解決element-ui的el-select選擇器的@blur事件失效的坑
更新時(shí)間：2022年09月13日 11:06:56 作者：F-Fanger
這篇文章主要介紹了解決element-ui的el-select選擇器的@blur事件失效的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
element-ui的el-select選擇器的@blur事件失效
element-UI文檔中本來el-select有個(gè)blur事件綁定函數(shù)屬性。
但是使用后發(fā)現(xiàn)有時(shí)候失焦事件并不能觸發(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="請(qǐng)選擇或自行輸入拒絕原因"
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é)點(diǎn)找到得根節(jié)點(diǎn)時(shí)輸入得input
// this.$refs.select.$refs.reference.$refs.input 此根節(jié)點(diǎn)找到得是最外層得 input。包含被選中的數(shù)據(jù)在內(nèi)
使用el-select中的@blur遇到的問題
最近在使用elementui中的el-select的時(shí)候，想要達(dá)到的效果是失去焦點(diǎn)之后獲取el-select中選中的值，但是在實(shí)際使用中出現(xiàn)了如下問題：
1.直接使用@blur，第一次選中的時(shí)候，console的時(shí)候會(huì)輸出一個(gè)空的內(nèi)容，失去焦點(diǎn)再次輸出想要的內(nèi)容，
2.第二次選擇其他內(nèi)容會(huì)打印上一次選中的，失去焦點(diǎn)再次輸出想要的內(nèi)容
解決
1.使用*@blur.capture.native*
2.在methods中，對(duì)e.target.value進(jìn)行判斷，
? ?blurChange(e){
? ? ? if(e.target.value){ ?// 不加這句還會(huì)多輸出一次空白的
? ? ? ? console.log(e.target.value,'__________');
? ? ? }
? ? }?以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- element-ui時(shí)間日期選擇器限制選擇范圍的幾種場(chǎng)景
- vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯的問題及解決
- element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問題詳解(二十多行代碼搞定）
- 詳解element-ui日期時(shí)間選擇器的日期格式化問題
- element-ui 時(shí)間選擇器限制范圍的實(shí)現(xiàn)（隨動(dòng)）
- vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)
- vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
相關(guān)文章
這篇文章主要為大家介紹了vue shallowRef作用及引發(fā)問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
在平時(shí)開發(fā)是經(jīng)常用到一些父子組件通信,經(jīng)常用到props、vuex等等,下面這篇文章主要給大家介紹了關(guān)于vue中v-model和.sync修飾符區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue組件是如何解析及渲染的？，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過設(shè)置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下2024-02-02
Vue中transition單個(gè)節(jié)點(diǎn)過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個(gè)節(jié)點(diǎn)過渡與transition-group列表過渡全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue elementUI table表格自定義樣式滾動(dòng)效果
這篇文章主要介紹了vue elementUI table表格自定義樣式滾動(dòng)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08
最近接了一個(gè)移動(dòng)端的項(xiàng)目，實(shí)現(xiàn)微信掃碼功能，今天小編利用這個(gè)平臺(tái)給大家分享vue實(shí)現(xiàn)二維碼掃描功能的實(shí)現(xiàn)代碼，需要的朋友參考下吧2021-08-08
適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
路由存在兩者模式,一種是歷史模式history,一種是hash模式,下面這篇文章主要給大家介紹了關(guān)于vite?vue3下配置history模式路由的相關(guān)資料,需要的朋友可以參考下2023-01-01
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03