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中四种操作dom方法保姆级讲解
这篇文章主要介绍了Vue中四种操作dom方法，首先，在vue中强烈禁用原生与jquery来操作DOM元素。我们要充分的利用vue的优势：MVVM，在vue中程序员几乎不操作DOM，只需要维护好数据即可，vue给程序员提供ref引用，不调用api直接获取元素组件的使用
2023-02-02
vue.js element-ui tree树形控件改iview的方法
这篇文章主要介绍了vue.js element-ui tree树形控件改iview的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
node+vue前后端分离实现登录时使用图片验证码功能
这篇文章主要介绍了node+vue前后端分离实现登录时使用图片验证码,记录前端使用验证码登录的过程，后端用的是node.js，关键模块是svg-captcha，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-11-11
Vue引入sass并配置全局变量的方法
这篇文章主要介绍了Vue引入sass并配置全局变量的方法
2018-06-06
Vue生命周期中的组件化你知道吗
这篇文章主要为大家详细介绍了Vue生命周期中的组件化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
LogicFlow插件使用前准备详解
这篇文章主要为大家介绍了LogicFlow插件使用前准备详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
vue3中Hook使用以及Hook结合自定义指令
这篇文章主要介绍了vue3中Hook使用以及Hook结合自定义指令方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vue数据监听解析Object.defineProperty与Proxy区别
这篇文章主要为大家介绍了vue数据监听解析Object.defineProperty Proxy源码示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
解决cordova+vue 项目打包成APK应用遇到的问题
这篇文章主要介绍了解决cordova+vue 项目打包成APK应用遇到的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
vue+el使用this.$confirm,不能阻断代码往下执行的解决
这篇文章主要介绍了vue+el使用this.$confirm,不能阻断代码往下执行的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09