vue手机端input change时,无法执行的问题及解决
作者：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>
js
// 嵌入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 //我们需要加一个把当前文件路径清空的方法
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。