解決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ā)生效，也就導致所綁定的函數(shù)不能執(zhí)行。
解決
利用el-select的@focus方法，在select標簽內(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的時候，想要達到的效果是失去焦點之后獲取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進行判斷，
? ?blurChange(e){
? ? ? if(e.target.value){ ?// 不加這句還會多輸出一次空白的
? ? ? ? console.log(e.target.value,'__________');
? ? ? }
? ? }?以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue shallowRef作用及引發(fā)問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
在平時開發(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 組件可以通過設置 accept 屬性來限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下2024-02-02
Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue elementUI table表格自定義樣式滾動效果
這篇文章主要介紹了vue elementUI table表格自定義樣式滾動效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-08-08
最近接了一個移動端的項目，實現(xiàn)微信掃碼功能，今天小編利用這個平臺給大家分享vue實現(xiàn)二維碼掃描功能的實現(xiàn)代碼，需要的朋友參考下吧2021-08-08
適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
路由存在兩者模式,一種是歷史模式history,一種是hash模式,下面這篇文章主要給大家介紹了關(guān)于vite?vue3下配置history模式路由的相關(guān)資料,需要的朋友可以參考下2023-01-01
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03