自定义v-show功能
// stealth.js
// 元素隐藏显示指令
export default {
// 只调用一次,指令第一次绑定到元素时调用
bind (el, binding, vnode) {
el.style.display = binding.value ? 'block' : 'none'
},
// 被绑定元素插入父节点时调用
inserted (el, binding, vnode) {
console.log('inserted')
},
// 所在组件的 VNode 更新时调用
update (el, binding, vnode) {
console.log('update')
el.style.display = binding.value ? 'block' : 'none'
},
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用
componentUpdated (el, binding, vnode) {
console.log('componentUpdated')
},
unbind (el, binding, vnode) {
console.log('unbind')
}
}
// directives.js
import stealth from './modules/stealth'
export {stealth}
// main.js
import * as directives from './directives'
// 注册指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]))
<div v-stealth="true"></div>