vue手機端input change時,無法執(zhí)行的問題及解決

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

這篇文章主要介紹了vue手機端input change時,無法執(zhí)行的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue手機端input change時無法執(zhí)行

vue H5頁面中，有一個搜索功能，回車時執(zhí)行

代碼如下：

<el-input placeholder="請輸入內容" prefix-icon="el-icon-search" clearable size="small" v-model="searchVal" @change="search"></el-input>

問題

手機端在搜索時，按如下步驟搜索，會有偶發(fā)性的不執(zhí)行的情況（打字區(qū)域右下角鍵為 “確認”或者“換行”）

輸入列表中的某一項，如視頻，點擊右下角的確認
刪除視頻，輸入一些其他文字，再刪除，再輸入，點擊右下角確認

這里寫圖片描述

當加上form后 確認或換行 就會變?yōu)?前往

<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時，發(fā)現(xiàn)不起作用，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 ?//我們需要加一個把當前文件路徑清空的方法
? ? },