历史小剧场
崇祯很勤政，崇祯并非王国之君，弘光很昏庸，弘光活该倒霉，几百年来，我们都这样认为。
但我们之所以一直这样认为，只是因为有人这样告诉我们。
之所以有人这样告诉我们，是因为他们希望我们这样认为。 ---- 《明朝那些事儿》
app.directive
作用：注册自定义指令
自定义指令
指令钩子函数
- created: 在绑定元素的attribute前或事件监听器前调用；
- beforeMount: 在元素插入到DOM前调用；
- mounted: 在绑定元素的父组件及它自己的所有子节点都挂载完成后调用（常用）
- beforeUpdate: 绑定元素的父组件更新前调用
- updated: 在绑定元素的父组件及它自己的所有子节点都更新后调用（常用）
- beforeUnmount: 绑定元素的父组件卸载前调用
- unmounted: 绑定元素的父组件卸载后调用
钩子参数
案例
export default {mounted(el: any, binding: any, vnode: any, prevNode: any) {console.log("tab mounted", el, binding, vnode, prevNode)const { activeClass, curIndex } = binding.value;const buttonList = el.querySelectorAll("button");buttonList[curIndex].classList.add(activeClass);},updated(el: any, binding: any, vnode: any, prevNode: any) {console.log("tab updated", el, binding, vnode, prevNode)const buttonList = el.querySelectorAll("button");let { activeClass, curIndex } = binding.oldValue;buttonList[curIndex].classList.remove(activeClass);activeClass = binding.value.activeClass;curIndex = binding.value.curIndex;buttonList[curIndex].classList.add(activeClass);}
}
- el: 指定绑定到的元素。
- binding: 对象，通常包含如下属性
- value: 传递给指令的值
- oldValue: 之前的值，仅在 beforeUpdate 和 updated 中可用
- arg: 传递给指令的参数
- modifers: 一个包含修饰符的对象
- instance: 使用该指令的组件实例
- dir: 指令的定义对象
- vnode: 代表绑定元素的底层VNode
- prevNode: 代表之前的渲染中指定所绑定元素的VNode。仅在 beforeUpdate 和 updated 钩子中可用
使用
这里，我们封装一个自定义v-tab指令来处理按钮点击切换样式变幻问题
定义一个组件 TestDirective.vue
<!-- TestDirective.vue -->
<template><div><div class="tab" @click="handleClick($event)"v-tab="{ activeClass: 'active',curIndex}"><button data-index="0">按钮一</button><button data-index="1">按钮二</button><button data-index="2">按钮三</button></div></div>
</template><script lang="ts">
import { ref } from 'vue'
import { tab } from '../directives'export default {name: 'TestDirective',directives: {tab},setup() {const curIndex = ref<number>(0)const handleClick = (event: MouseEvent) => {const tar = event.target as HTMLElementconst className = tar.classNameif (Object.is(className, '')) {const index = parseInt(tar.dataset?.index ?? "")curIndex.value = index}}return {handleClick,curIndex}}
}
</script><style lang="scss" scoped>
.tab {.active {background-color: skyblue;border: 2px solid slategrey;color: white;}
}
</style>
在src下面创建directives文件夹来存放自定义指令
index.ts
import tab from './tab'export {tab
}
tab.ts
export default {mounted(el: any, binding: any, vnode: any, prevNode: any) {console.log("tab mounted", el, binding, vnode, prevNode)const { activeClass, curIndex } = binding.value;const buttonList = el.querySelectorAll("button");buttonList[curIndex].classList.add(activeClass);},updated(el: any, binding: any, vnode: any, prevNode: any) {console.log("tab updated", el, binding, vnode, prevNode)const buttonList = el.querySelectorAll("button");let { activeClass, curIndex } = binding.oldValue;buttonList[curIndex].classList.remove(activeClass);activeClass = binding.value.activeClass;curIndex = binding.value.curIndex;buttonList[curIndex].classList.add(activeClass);}
}
运行之后，我们可以鼠标点击按钮切换样式
app.use
安装插件。 必须带一个install()方法
封装插件
这里，我们自己封装一个MyUI插件，且在插件里有两个自定义组件：MyButton 和 MyInput
MyButton.vue
<!-- MyButton.vue -->
<template><div><button class="my-button"><slot></slot></button></div>
</template><script lang="ts">
export default {name: 'MyButton',
}
</script><style lang="scss" scoped>.my-button {background-color: #41b883;color: #fff;border: none;border-radius: 10px;width: 80px;}
</style>
MyInput.vue
<!-- -->
<template><div><input class="my-input" type="text" placeholder="placeholderText" /></div>
</template><script lang="ts">
export default {name: 'MyInput',props: {placeholderText: {type: String,default: 'This is my input'}}
}
</script><style lang="scss" scoped>.my-input {width: 180px;border: 1px solid #ccc;border-radius: 4px;padding: 4px;}
</style>
index.ts
import MyButton from './MyButton.vue'
import MyInput from './MyInput.vue'const componentsPool: Map<String, any> = new Map()
componentsPool.set(MyButton?.name ?? "", MyButton)
componentsPool.set(MyInput?.name ?? "", MyInput)export default {install(app: any, options: any) {console.log("options => ", options)console.log("componentsPool => ", componentsPool)if (options?.components.length > 0) {// 按需加载options.components.map((com: String) => {componentsPool.has(com) && app.component(com, componentsPool.get(com))})} else {// 全部加载for (let [name, com] of componentsPool.entries()) {app.component(name, com)}}}
}
注意：在插件加载逻辑中，我们实现了按需加载。就是，如果我们在app.use()方法的第二个参数中传入components数组且长度大于0就进行按需加载，优化性能，否则的话，全部加载。
注册
我们在程序入口文件main.ts中进行注册
import MyUI from './libs/MyUI'
app.use(MyUI, {components: ['MyButton', 'MyInput']
})
使用
然后，我们创建一个TestUse.vue
<!-- -->
<template><div><my-button>测试按钮</my-button><my-input></my-input></div>
</template><script lang="ts">
export default {name: "TestUse",
}
</script><style lang="scss" scoped></style>
按照上面我们运行结果则是两个都可以展示
如果，我们在注册的时候只加载按钮
app.use(MyUI, {components: ['MyButton']
})
则只展示按钮
