快捷導(dǎo)航

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

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

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

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

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

代碼如下：

<el-input placeholder="請(qǐng)輸入內(nèi)容" prefix-icon="el-icon-search" clearable size="small" v-model="searchVal" @change="search"></el-input>

問題

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

輸入列表中的某一項(xiàng)，如視頻，點(diǎn)擊右下角的確認(rèn)
刪除視頻，輸入一些其他文字，再刪除，再輸入，點(diǎn)擊右下角確認(rèn)

這里寫圖片描述

當(dāng)加上form后 確認(rèn)或換行 就會(huì)變?yōu)?前往

<form action="">
    <el-input placeholder="請(qǐng)輸入內(nèi)容" prefix-icon="el-icon-search" clearable size="small" v-model="searchVal" @change="search"></el-input>
</form>

如果該問題依舊存在，在搜索時(shí)，將光標(biāo)移除

<form action="">
    <el-input ref="ipt" placeholder="請(qǐng)輸入內(nèi)容" 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()
? ? },
// 調(diào)用change方法 ? ?
? ? getFile(event) {
? ? ? const files = event.target.files || null
? ? ? const fileReader = new FileReader() // 內(nèi)置方法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)
? ? }, ? ?

當(dāng)我點(diǎn)擊嵌入logo，再撤銷logo后，再次嵌入同一張logo時(shí)，發(fā)現(xiàn)不起作用，logo沒有嵌入進(jìn)來，后來明白，是因?yàn)槲覀冊(cè)谇度雔ogo地址后，需要將logo地址清空，以便下次嵌入再次寫入logo圖片路徑，這時(shí)：

?getFile(event) {
? ? ? const files = event.target.files || null
? ? ? const fileReader = new FileReader() // 內(nèi)置方法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 ?//我們需要加一個(gè)把當(dāng)前文件路徑清空的方法
? ? },