扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
零售新物种：药店和便利店合体之后
我们利用 Vue.js 的自定义指令能力，来实现一个自定义下拉菜单功能。描述如下：
钦北ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！
1基础版
html：
Title 零售新物种：药店和便利店合体之后
我们为按钮绑定了 isShow 变量，当点击按钮时，显示 class="dropDown" 的 div 元素。
js：
Vue.directive('outside-click', {
bind: function (el, binding, vnode) {
//定义点击函数
function clickHandler(e) {
if (el.contains(e.target)) {//如果点击区域在所在指令元素内部，则直接返回
return false;
}
if (binding.expression) {//如果定义了表达式，则执行表达式中的函数
binding.value(e);
}
}
el.vueOutsideClick = clickHandler;
document.addEventListener('click', clickHandler);//绑定到 document 的点击事件
},
unbind: function (el, binding, vnode) {
document.removeEventListener('click', el.vueOutsideClick);//解绑
delete el.vueOutsideClick;//销毁
}
});
var app = new Vue({
el: '#app',
data: {
isShow: false
},
methods: {
close: function () {
this.isShow = false;
}
}
});
bind 中：
unbind 中：
css：
[v-cloak] {
display: none;
}
.main {
width: 125px;
}
button {
display: block;
width: 100%;
color: #ffffff;
background-color: #99CC66;
border: 0;
padding: 6px;
text-align: center;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
position: relative;
outline: none;
}
button:active {
top: 1px;
left: 1px;
}
.dropDown {
width: 100%;
height: 150px;
margin: 5px 0;
font-size: 12px;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
.dropDown p {
display: inline-block;
padding: 6px;
}
效果：
2 ESC 关闭
现在让我们做个优化，即在按下键盘的 ESC 键时，也能关闭下拉菜单。
js：
bind: function (el, binding, vnode) {
function clickHandler(e) {
if (el.contains(e.target) && e.keyCode !== 27) {
return false;
}
...
}
...
document.addEventListener('keyup', clickHandler, false);//绑定键盘事件
},
unbind: function (el, binding, vnode) {
...
document.removeEventListener('keyup', el.vueOutsideClick);//解绑
...
}
在 bind 函数中，强化了判断，如果点击区域在所在指令元素内部并且没有按下 ESC 键时，才直接返回。即按下 ESC 键时，会执行后续操作（执行表达式中的函数）。
在 unbind 函数中，也解绑了 keyup 事件。
效果：
3 ESC 为可选项
我们可以把 ESC 作为可选项，而这可以通过修饰符来实现。
js：
bind: function (el, binding, vnode) {
//定义点击函数
function clickHandler(e) {
//是否开启开关
var escSwitch = (binding.modifiers && binding.modifiers.esc);
if (el.contains(e.target)) {//如果点击区域在所在指令元素内部时
if (escSwitch && e.keyCode === 27) {//带有了 esc 修饰符，则让程序往下执行
} else {//直接返回
return false;
}
}
if (binding.expression) {//如果定义了表达式，则执行表达式中的函数
binding.value(e);
}
}
...
}
我们通过 binding.modifiers 来判断自定义指令是否设置了 esc 修饰符，然后以此为基础，来编写后续逻辑。
html：
...
本文示例代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网