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中对象数组去重的实现
这篇文章主要介绍了vue中对象数组去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
解决cordova+vue 项目打包成APK应用遇到的问题
这篇文章主要介绍了解决cordova+vue 项目打包成APK应用遇到的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
koa2+vue实现登陆及登录状态判断
这篇文章主要介绍了koa2+vue实现登陆及登录状态判断，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-08-08
Vue使用formData类型上传文件
这篇文章主要介绍了Vue使用formData类型上传文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
9种方法优化jQuery代码详解
本文将详细介绍jQuery代码优化的9种方法,需要的朋友可以参考下
2020-02-02
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
这篇文章主要介绍了移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-06-06
浅谈Vuejs中nextTick()异步更新队列源码解析
本篇文章主要介绍了浅谈Vuejs中nextTick()异步更新队列源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
Vue中Axios配置不同的baseURL,请求不同的域名接口方式
这篇文章主要介绍了Vue中Axios配置不同的baseURL,请求不同的域名接口方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
详解Vue2 无限级分类(添加,删除,修改)
本篇文章主要介绍了详解Vue2 无限级分类(添加,删除,修改) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
Vue3通过JSON渲染ElementPlus表单的流程步骤
这篇文章主要介绍了Vue3通过JSON渲染ElementPlus表单的流程步骤,文中通过代码示例和图文给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-10-10