? ???????個(gè)人主頁：五敷有你? ? ??
???系列專欄：Vue
??穩(wěn)重求進(jìn)，曬太陽
自定義指令
之前的v-html v-model v-for 等都是內(nèi)置指令
自定義指令：自己定義的指令，可以封裝一些dom操作，擴(kuò)展額外功能
需求：當(dāng)頁面加載時(shí)，可以讓元素獲得焦點(diǎn)
操作dom：dom元素.focus()
mounted(){
this.$refs.inp2.focus()
}全局注冊：-語法
Vue 自動(dòng)將我們的 自定義指令添加上了 v- 前綴。
//全局注冊指令
Vue.directive("指令名",{
//insert會在指令所在元素被插入到頁面中觸發(fā)
"inserted" (el){
//可以對el標(biāo)簽擴(kuò)展額外的功能
el.focus()
}
})局部注冊：-語法
//局部注冊指令
directives:{
//指令名：指令配置項(xiàng)
focus:{
inserted(el){
el.focus()
}
}
}指令的值
- 語法：在綁定指令的時(shí)候，可以通過“等號”的形式為 指令 綁定具體的參數(shù)值
<div :v-color="red">指令的值</div>
- 通過binding.value 可以拿到指令值。指令值修改會觸發(fā) update函數(shù)
- 通過update鉤子，可以監(jiān)聽指令值的變化
//局部注冊指令
directives:{
//指令名：指令配置項(xiàng)
color:{
inserted(el,binding){
el.style.color=binding.value
},
update(el,binding){
el.style.color=binding.value
}
}
}封裝v-loading指令
分析：
- 本質(zhì)loading效果就是一個(gè)蒙層，蓋在了盒子上。
- 數(shù)據(jù)請求中，開啟loading狀態(tài)，添加蒙層
- 數(shù)據(jù)請求完畢，關(guān)閉loading狀態(tài)，移除蒙層
實(shí)現(xiàn)：文章來源：http://www.zghlxwxcb.cn/news/detail-831556.html
- 準(zhǔn)備一個(gè)loading類，通過偽元素定位，設(shè)置寬高，實(shí)現(xiàn)蒙層
- 開啟關(guān)閉loading狀態(tài)(添加移除蒙層)，本質(zhì)只需要添加移除類即可
- 結(jié)合自定義指令的語法進(jìn)行封裝復(fù)用
文章來源地址http://www.zghlxwxcb.cn/news/detail-831556.html
到了這里，關(guān)于【Vue】自定義指令的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
