共计 757 个字符,预计需要花费 2 分钟才能阅读完成。
描述:移动端常见的样式下拉框,当下拉框弹出的时候,我们点击别的位置就隐藏下拉框
操作:
- 新建 directive.js 文件
`
/**
* 点击空白区域, 隐藏下拉选框
*/
const clickOutside = {
// 一般在 vue 项目中的 main.js 中
// 添加点击空白处的指令
bind: function (el, binding, vnode) {el.clickOutsideEvent = function (event) {
// 检查点击是在外面的 el 和他的子元素
if (!(el == event.target || el.contains(event.target))) {
// 如果是,则调用属性值中提供的方法
vnode.context[binding.expression](event)
}
}
document.body.addEventListener('click', el.clickOutsideEvent)
},
unbind: function (el) {document.body.removeEventListener('click', el.clickOutsideEvent)
}
};
export default clickOutside
`
- 为了再项目中全局使用我们再 main.js 文件中全局引入自定义指令
import utilDirecitve from './assets/js/directive'
Vue.directive('clickOutside', utilDirecitve)
- 再页面中使用
html 标签:<div v-click-outside="hideBox">
methods 方法:hideBox () {
this.selectMatch = false;
this.isShowSelect = false;
this.selectStatus = true
},
正文完