vue3.x的自定义指令动态指令参数

1.vue3.x的自定义指令参数

import { createApp } from 'vue';
import App from './App.vue';
app.directive('time', {
    created() {
        console.log('created生命周期函数')
    },
    beforeMount:(el) => {
        // console.log(binding, '什么')
        el.style.color = 'red'
    },
    mounted(el, binding) {
        console.log(el, binding.value)
        el.style.position = 'fixed'
        const x = binding.arg || 'bottom';
        el.style[x] = binding.value + 'px';
        console.log('挂载的函数mounted')
    },
    beforeUpdate(el, binding) {
        console.log(el, binding)
        const x = binding.arg || 'bottom';
        el.style[x] = binding.value + 'px';
        console.log('跟新全的函数beforeUpdate')
    },
    componentUpdated() {
        console.log('componentUpdated组件跟新的函数')
    },
    beforeUnmount() {
        console.log('beforeUnmount组件销毁前的函数')
    },
})
app.mount('#app');

这里我们需要知道自定义指令的钩子函数的参数

从这里我们可以看出.
binding.value 就是自定义指令参数的值
binding.arg 就是自定义指令的参数的属性名;

所以在自定义指令的mounted钩子函数中，我们是这么写的

mounted(el, binding){
	el.style.position = 'fixed'; // 将这个DOM设置成固定定位
	const x = binding.arg || 'top'; // 获取自定义指令的参数属性
	el.style[x] = bingind.value + 'px'; // 这样就ok
}

使用

<div v-time:bottom="300">我是一个自定义指令</div>

最终的效果就是div会距离bottom边300px像素。

2.将自定义指令参数设置为动态的

import { ref } from 'vue';
export default {
	inheritAttrs: false,
	setup(){
		const distance = ref(20); // 距离的长度
		const distanceChagne = () => {
			distance.value += 10;
		}
		return {
			distance,
			distanceChagne
		}
	}
}

使用

<template>
	<div v-time:bottom="distance">自定义指令</div>
	<button @click="distanceChagne">修改distance</button>
</template>

点击按钮是会修改distance的值，我需要在自定义指令的对应的钩子函数中进行操作beforeUpdate

beforeUpdate(el, binding){
	const x = binding.arg || 'bottom';
    el.style[x] = binding.value + 'px';
}

或者直接使用函数简写

app.directive('time', (el, time) => {
	el.style.position = 'fixed';
	const x = binding.arg || 'bottom';
    el.style[x] = binding.value + 'px';
})

这样每一次更新，都会触发。