vue 自定義指令自動(dòng)獲取文本框焦點(diǎn)的方法
更新時(shí)間：2018年08月25日 09:17:07 作者：lx_1024
今天小編就為大家分享一篇vue 自定義指令自動(dòng)獲取文本框焦點(diǎn)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
HTML：
<p><b v-show="show">{{tag}}</b><input v-focus v-model="tag" :hidden="show" type="text"></p>
js：
官方例子：
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
我的：
directives: {
focus:function (el) {
el.focus();
}
}
在我的項(xiàng)目中使用官方的例子時(shí)，input不能自動(dòng)獲取焦點(diǎn)，使用我的js時(shí)可自動(dòng)獲取焦點(diǎn)，查詢相關(guān)資料后知道，insert是一個(gè)鉤子函數(shù)，只要父節(jié)點(diǎn)存在，在插入父節(jié)點(diǎn)時(shí)調(diào)用，我這里并沒有插入所以沒有調(diào)用，所以還是要多讀多學(xué)，仔細(xì)一些。
拓展知識(shí)：vue 自定義指令 自動(dòng)聚焦的實(shí)例講解
如下所示：
<el-input v-model="data.carDealerJobs.bankDetail" v-focus placeholder="請輸入內(nèi)容" size="small"></el-input>
局部注冊指令：
directives: {
focus: {
inserted: function (el) {
el.children[0].focus()
}
}
}
以上這篇vue 自定義指令自動(dòng)獲取文本框焦點(diǎn)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3使用threejs實(shí)現(xiàn)3D卡片水平旋轉(zhuǎn)效果的示例代碼
這篇文章主要介紹了在vue3中使用threejs實(shí)現(xiàn)3D卡片水平旋轉(zhuǎn)效果,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
Vue中常用的rules校驗(yàn)規(guī)則的實(shí)現(xiàn)
在vue開發(fā)中,難免遇到各種表單校驗(yàn),本文主要介紹了Vue中常用的rules校驗(yàn)規(guī)則的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
本文主要介紹了Vue簡化用戶查詢/添加功能的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)勻速輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
詳解vue2.0 transition 多個(gè)元素嵌套使用過渡
這篇文章主要介紹了詳解vue2.0 transition 多個(gè)元素嵌套使用過渡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue項(xiàng)目中openlayers繪制行政區(qū)劃
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中openlayers繪制行政區(qū)劃，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了vue中的slot-scope及scope.row用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue3?跨域配置devServer的參數(shù)和設(shè)置方法
這篇文章主要介紹了Vue3?跨域配置devServer的參數(shù)和設(shè)置,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue中webpack的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue+element模態(tài)框中新增模態(tài)框和刪除功能
這篇文章主要介紹了vue+element模態(tài)框中新增模態(tài)框和刪除功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06