1. 使用<script setup>
<template><input v-focus="11111" /><input v-obj="{ id: 1, name: '这里是name' }" />
</template>
<script setup>
//定义一个变量vFocus
//命名方法使得DOM元素中可以用v-focus来显示
let vFocus = {//此处传入的el就是控件本身//第一个值为控件即event//第二个值为自定义指令的值//在此组件及所有子组件挂载完成后执行mounted: (el, value) => {console.log("当前控件为:", el);console.log("第二个参数value的值:", value);console.log("自定义指令的值:", value.value);el.focus();},
};
let vObj={mounted: (el, value) => {console.log("当前控件为:", el);console.log("第二个参数value的值:", value);console.log("自定义指令的id值:", value.value.id);el.focus();},
}
</script>
<style scoped>
</style>
2. 不使用<script setup>
<template><input v-focus="11111" />
</template>
<script>
export default {setup() {},directives: {//定义一个变量vFocus//命名方法使得DOM元素中可以用v-focus来显示focus: {//此处传入的el就是控件本身//第一个值为控件即event//第二个值为自定义指令的值//在此组件及所有子组件挂载完成后执行mounted(el, value) {console.log("当前控件为:", el);console.log("第二个参数value的值:", value);console.log("自定义指令的值:", value.value);el.focus();},},},
};
</script>
<style scoped>
</style>
3. 全局注册
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'createApp(App).directive('focus', {//此处传入的el就是控件本身//第一个值为控件即event//第二个值为自定义指令的值//在此组件及所有子组件挂载完成后执行mounted(el, value) {console.log("当前控件为:", el);console.log("第二个参数value的值:", value);console.log("自定义指令的值:", value.value);el.focus();},}).mount('#app')
4. 指令钩子
el：指令绑定到的元素。这可以用于直接操作 DOM
binding：一个对象，包含以下属性。
value：传递给指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 “foo”。
modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
instance：使用该指令的组件实例。
dir：指令的定义对象。
vnode：代表绑定元素的底层 VNode。
prevNode：代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。
<template><input v-focus="11111" />
</template>
<script setup>
let vFocus = {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode, prevVnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode, prevVnode) {},
};
</script>
<style scoped>
</style>
4. 组件使用自定义指令(不推荐)
<MyComponent v-demo="test" /><!-- MyComponent 的模板 -->
<div> <!-- v-demo 指令会被应用在此处 --><span>My component content</span>
</div>
)
