vue手机端input change时,无法执行的问题及解决

更新时间：2023年05月25日 10:19:20 作者：qq_43103581

这篇文章主要介绍了vue手机端input change时,无法执行的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue手机端input change时无法执行

vue H5页面中，有一个搜索功能，回车时执行

代码如下：

<el-input placeholder="请输入内容" prefix-icon="el-icon-search" clearable size="small" v-model="searchVal" @change="search"></el-input>

问题

手机端在搜索时，按如下步骤搜索，会有偶发性的不执行的情况（打字区域右下角键为 “确认”或者“换行”）

输入列表中的某一项，如视频，点击右下角的确认
删除视频，输入一些其他文字，再删除，再输入，点击右下角确认

这里写图片描述

当加上form后 确认或换行 就会变为前往

<form action="">
    <el-input placeholder="请输入内容" prefix-icon="el-icon-search" clearable size="small" v-model="searchVal" @change="search"></el-input>
</form>

如果该问题依旧存在，在搜索时，将光标移除

<form action="">
    <el-input ref="ipt" placeholder="请输入内容" prefix-icon="el-icon-search" clearable size="small" v-model="searchVal" @change="search"></el-input>
</form>
search () {
    this.$refs.ipt.blur()
    ……
}

vue input[type=‘file’] change事件无法上传相同文件的问题

== 话不多说，上代码 ==

html

<input
   ref="fileInput"
   type="file"
   accept="image/*"
   style="display: none"
   @change="getFile">
<el-button size="mini" type="primary" @click="addLogo">嵌入logo</el-button>
<el-button size="mini" @click="removeLogo">撤销logo</el-button>

// 嵌入logo
    addLogo() {
      this.$refs.fileInput.click()
    },
// 调用change方法    
    getFile(event) {
      const files = event.target.files || null
      const fileReader = new FileReader() // 内置方法new FileReader()   读取文件
      fileReader.addEventListener('load', () => {
        this.imageUrl = fileReader.result
        this.qrCode.clear()
        this.qrCode2.clear()
        this.options2['logo'] = this.imageUrl
        this.options['logo'] = this.imageUrl
        this.qrCode = new QRCode(this.$refs['QRCode'], this.options)
      })
      fileReader.readAsDataURL(files[0])
    },
   // 撤销logo
    removeLogo() {
      this.options.logo = ''
      this.options2.logo = ''
      this.qrCode.clear()
      this.qrCode2.clear()
      this.qrCode = new QRCode(this.$refs['QRCode'], this.options)
    },

当我点击嵌入logo，再撤销logo后，再次嵌入同一张logo时，发现不起作用，logo没有嵌入进来，后来明白，是因为我们在嵌入logo地址后，需要将logo地址清空，以便下次嵌入再次写入logo图片路径，这时：

 getFile(event) {
      const files = event.target.files || null
      const fileReader = new FileReader() // 内置方法new FileReader()   读取文件
      fileReader.addEventListener('load', () => {
        this.imageUrl = fileReader.result
        this.qrCode.clear()
        this.qrCode2.clear()
        this.options2['logo'] = this.imageUrl
        this.options['logo'] = this.imageUrl
        this.qrCode = new QRCode(this.$refs['QRCode'], this.options)
      })
      fileReader.readAsDataURL(files[0])
      this.$refs.fileInput.value = null  //我们需要加一个把当前文件路径清空的方法
    },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue使用echarts可视化组件的方法
这篇文章主要介绍了Vue使用echarts可视化组件的方法,本文通过实例代码案例给大家详细介绍，需要的朋友可以参考下
2021-07-07
Vue3如何在SCSS中使用v-bind
这篇文章主要介绍了Vue3如何在SCSS中使用v-bind,通过template先创建一个通用的页面结构,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-03-03
vue实现在线预览pdf文件和下载（pdf.js）
这篇文章主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
使用vue组件封装共用的组件
这篇文章主要介绍了使用vue组件封装共用的组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
vue-cli 介绍与安装
这篇文章主要给大家介绍的是vue-cli 介绍与安装，vue-cli是和vue进行深度组合的工具，可以快速帮我们创建vue项目，并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目，都是用vue-cli来创建项目的，下面文章详细内容,需要的朋友可以参考一下
2021-10-10
Vue 中获取当前时间并实时刷新的实现代码
这篇文章主要介绍了Vue 中获取当前时间并实时刷新,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-05-05
关于vue的列表图片选中打钩操作
这篇文章主要介绍了关于vue的列表图片选中打钩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue中get请求如何传递数组参数的方法示例
这篇文章主要介绍了vue中get请求如何传递数组参数的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue指令中的v-once用法
这篇文章主要介绍了vue指令中的v-once用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
用vue构建多页面应用的示例代码
这篇文章主要介绍了用vue构建多页面应用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09