解決element-ui的el-select選擇器的@blur事件失效的坑
更新時間：2022年09月13日 11:06:56 作者：F-Fanger
這篇文章主要介紹了解決element-ui的el-select選擇器的@blur事件失效的坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui的el-select選擇器的@blur事件失效
element-UI文檔中本來el-select有個blur事件綁定函數(shù)屬性。
但是使用后發(fā)現(xiàn)有時候失焦事件并不能觸發(fā)生效，也就導(dǎo)致所綁定的函數(shù)不能執(zhí)行。
解決
利用el-select的@focus方法，在select標(biāo)簽內(nèi) 添加 ref 于此便可在focus事件內(nèi)觸發(fā) blur事件。
代碼如下：
<el-select
multiple
filterable
allow-create
default-first-option
v-model="request_msg"
placeholder="請選擇或自行輸入拒絕原因"
class="config-select"
@focus="onBlur('request_msg', 'reqMsgRef')"
ref="reqMsgRef"
>
<el-option
v-for="item in refuseConfig"
:key="item"
:value="item"
:label="item"
></el-option>
</el-select>
onBlur(flag, ref) {
this.$refs[ref].$refs.input.blur = () => {
// 這里執(zhí)行失焦的代碼
const inp = this.$refs[ref].$refs.input.value
if(!inp) return
this[flag].push(inp)
};
},
// this.$refs[ref].$refs.input 此根節(jié)點找到得根節(jié)點時輸入得input
// this.$refs.select.$refs.reference.$refs.input 此根節(jié)點找到得是最外層得 input。包含被選中的數(shù)據(jù)在內(nèi)
使用el-select中的@blur遇到的問題
最近在使用elementui中的el-select的時候，想要達(dá)到的效果是失去焦點之后獲取el-select中選中的值，但是在實際使用中出現(xiàn)了如下問題：
1.直接使用@blur，第一次選中的時候，console的時候會輸出一個空的內(nèi)容，失去焦點再次輸出想要的內(nèi)容，
2.第二次選擇其他內(nèi)容會打印上一次選中的，失去焦點再次輸出想要的內(nèi)容
解決
1.使用*@blur.capture.native*
2.在methods中，對e.target.value進(jìn)行判斷，
? ?blurChange(e){
? ? ? if(e.target.value){ ?// 不加這句還會多輸出一次空白的
? ? ? ? console.log(e.target.value,'__________');
? ? ? }
? ? }?以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
將 unix 時間戳轉(zhuǎn)換為日期時間和使用日期時間轉(zhuǎn)換為 unix 時間戳,在項目中常常用到,其中vue中的moment庫很是方便,下面小編就來為大家講講具體使用吧2023-09-09
由于公司要求在內(nèi)網(wǎng)開發(fā)項目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,下面這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運行項目的詳細(xì)步驟,需要的朋友可以參考下2023-11-11
Vue3 Echarts通用的折線圖帶陰影效果實現(xiàn)
在環(huán)保倉管項目中,做了一個每月對藥品、消耗品、設(shè)備的進(jìn)出,進(jìn)行統(tǒng)計百分比,效果好看,后面經(jīng)常在用這個樣式,下面通過示例代碼分享Vue3 Echarts通用的折線圖帶陰影效果實現(xiàn),感興趣的朋友一起看看吧2024-07-07
使用 vue 實現(xiàn)滅霸打響指英雄消失的效果附demo
這篇文章主要介紹了使用 vue 實現(xiàn)滅霸打響指英雄消失的效果 demo,需要的朋友可以參考下2019-05-05
vue+ElementUI實現(xiàn)訂單頁動態(tài)添加產(chǎn)品數(shù)據(jù)效果實例代碼
本篇文章主要介紹了vue+ElementUI實現(xiàn)訂單頁動態(tài)添加產(chǎn)品效果實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了vue使用動畫實現(xiàn)滾動表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue如何將對象中所有的key賦為空值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項目, 利用scp2自動化部署到靜態(tài)文件服務(wù)器 Nginx。非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-04-04
最近一直在做vue項目,從網(wǎng)上搜索到的資料不太多,這篇文章主要給大家介紹了關(guān)于vue3中引入class類的寫法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)出頁面為PDF格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06