vue通過指令(directives)實現(xiàn)點擊空白處收起下拉框
日常開發(fā)中有時會有這樣的需求，就是展開下拉框的時候，通過點擊空白處，可以實現(xiàn)讓下拉框收回。這里我們通過vue2.0中的自定義指令來簡單實現(xiàn)。
貌似截圖尺寸有點大(╯﹏╰)
vue自定義指令
解釋(參考官方文檔)
除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。注意，在 Vue2.0 中，代碼復(fù)用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。
舉例:
我們要讓這樣一個輸入框在頁面加載的時候獲得焦點
我們可以注冊自定義指令
全局注冊:
// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部注冊
//組件內(nèi)
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
然后便可以在模板中相關(guān)元素上使用自定義的v-focus屬性:(這里的v-focus是從自定義的focus得來的)
<input v-focus>
鉤子函數(shù)(參考官方文檔)
上面例子中我們用的鉤子是inserted，這個是在被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
vue官方文檔上有一些鉤子可供我們參考使用:
- bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置。
- inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
- update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。
- componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
- unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。
通過自定義指令實現(xiàn)點擊空白處隱藏下拉框
關(guān)于自定義指令，我們就不再多說了，下面我們來講下如何通過指令來實現(xiàn)我們這個需求吧。
首先注冊全局指令
// 一般在vue項目中的main.js中
// 添加點擊空白處的指令
Vue.directive('click-outside', {
bind: function (el, binding, vnode) {
el.clickOutsideEvent = function (event) {
// here I check that click was outside the el and his childrens
if (!(el == event.target || el.contains(event.target))) {
// and if it did, call method provided in attribute value
vnode.context[binding.expression](event)
}
}
document.body.addEventListener('click', el.clickOutsideEvent)
},
unbind: function (el) {
document.body.removeEventListener('click', el.clickOutsideEvent)
}
})
在需要監(jiān)聽的組件元素上添加自定義指令
// 這里的clickOutSide是在監(jiān)聽到點擊的不是 <input id="dropdown1" v-show="flag" v-click-outside="clickOutSide" />
這個id為dropdown1的元素當(dāng)監(jiān)聽到點擊的不是自身的時候，就會觸發(fā)clickOutSide方法。
在組件里定義響應(yīng)方法
// 點擊空白處使topBar隱藏
clickOutSide() {
this.flag = false;
},
這樣就可以實現(xiàn)類似文章開頭的那種效果。
是不是很簡單哦? 關(guān)于指令還有很多比較簡便的用法，各位可以自己去研究下哦。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Vue3實現(xiàn)全局loading指令的示例詳解
- vue全局注冊自定義指令防抖解析
- vue全局自定義指令和局部自定義指令的使用
- Vue全局自定義指令Modal拖拽的實踐
- vue全局自定義指令-元素拖拽的實現(xiàn)代碼
- vue directive定義全局和局部指令及指令簡寫
- 對Vue2 自定義全局指令Vue.directive和指令的生命周期介紹
- vue3的自定義指令directives實現(xiàn)
- vue 自定義指令directives及其常用鉤子函數(shù)說明
- vue?filters和directives訪問this的問題詳解
- 詳解vue + vuex + directives實現(xiàn)權(quán)限按鈕的思路
- vue全局指令文件?directives詳解
相關(guān)文章
這篇文章主要介紹了Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項,需要的朋友可以參考下2023-11-11
pinia是vue3官方的狀態(tài)管理工具,當(dāng)然vue2也可以用,vue2中的狀態(tài)管理工具是vuex,vue3中不再使用vuex,推薦使用的是pinia,和vuex差不多,但比vuex更方便、更強、更好,下面這篇文章主要給大家介紹了關(guān)于Vue3之Pinia狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2022-11-11
學(xué)過 vue2 的小伙伴們肯定學(xué)習(xí)過偵聽器，主要是用來監(jiān)聽頁面數(shù)據(jù)或者是路由的變化，來執(zhí)行相應(yīng)的操作，在 vue3里面呢，也有偵聽器的用法，功能基本一樣,本文就來為大家詳細(xì)講講2022-07-07
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3自定義實現(xiàn)一個類似el-input的組件,可以v-model雙向綁定,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要介紹了Vue項目實現(xiàn)換膚功能的一種方案分析，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
基于Vue實現(xiàn)關(guān)鍵詞實時搜索高亮顯示關(guān)鍵詞
這篇文章主要介紹了基于Vue實現(xiàn)關(guān)鍵詞實時搜索高亮顯示關(guān)鍵詞，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要給大家介紹的是基于Vue2的移動端環(huán)境搭建，移動端大家更多想到的是響應(yīng)布局，我們根據(jù)不同大小的屏幕進行適配，當(dāng)然少不了我們的重頭戲rem，移動端相比pc端就沒什么特別的了。我會一步一步帶領(lǐng)大家進入Vue2的世界，感興趣的朋友下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
監(jiān)聽element-ui table滾動事件的方法
這篇文章主要介紹了監(jiān)聽element-ui table滾動事件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
VUE多個下拉框?qū)崿F(xiàn)雙向聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了VUE多個下拉框?qū)崿F(xiàn)雙向聯(lián)動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本篇文章主要介紹了vue模擬加載更多功能（數(shù)據(jù)追加），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06