V01 Vue.js 实战教程 - 基础篇4.6. 退出用户登录
简介
本小节中，我们将新建一个自定义指令，来切换 Bootstrap 的下拉菜单，同时增加退出相关的功能。
添加下拉菜单指令
1). 导出下拉指令对象
在 src/directives 下新建 dropdown.js 文件，复制贴入以下代码：
src/directives/dropdown.js
export default {
bind(el, binding, vnode) {
const handler = () => {
el.parentElement.classList.toggle('open')
}
const documentHandler = (e) => {
const target = e.target
if (target.isSameNode(el) || el.contains(target)) return
el.parentElement.classList.remove('open')
}
el.addEventListener('click', handler, false)
document.addEventListener('click', documentHandler, false)
el.destroy = () => {
el.removeEventListener('click', handler, false)
document.removeEventListener('click', documentHandler, false)
el.destroy = null
}
},
unbind(el) {
el.destroy()
}
}<...>
关于 LearnKu
粤公网安备 44030502004330号