自定义指令

babywenever

已于 2023-12-02 13:44:45 修改

阅读量37

点赞数

文章标签： vue.js 前端 javascript

于 2023-11-30 14:36:26 首次发布

本文链接：https://blog.youkuaiyun.com/babywenever/article/details/134711961

版权

1.全局注册指令
Vue.directive("highlight", {

	bind(el, binding, vNode, oldNode) {

		// el:v-highlight绑定的当前p元素

		// binding:绑定的数据内容

		// vNode:虚拟dom节点

		// oldNode:虚拟dom节点,原来的dom, tag: ''

})
1-v-xxx可以进行自定义指令的调用
<p v-highlight:background.delayed.blink="{mainColor:'pink',secondColor:'skyblue', delay:500}">自定义指令的调用，全句指令</p>
2-可以在 v-xxx="'value'" 进行值的设置

        v-highlight="'red'"时，binding里多了一个 value:"red"

3-利用 : 进行自定义指令参数的传递

        v-highlight:backgroundt="'red'", binding里多了一个 arg: "background"

4-利用 .xxx 进行修饰符的设置

        v-highlight:background.delayed, binding 里的 modifiers 对象则多了 {delayed: true}

2.局部指令注册:directives是复数

new Vue({

	el: '#app',

	directives: {

			"local-highlight": {

				bind(el, binding, vNode, oldNode) {}

}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>01.custom-directive</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 指令里面的需要用''引起来，不然会在响应式数据里找 -->
        <p v-text="'我是文本'"></p>
        <b v-text="'我是文本'"></b>

        <!-- 自定义指令封装 -->
        <!-- "'red'" 里面需要加引号 -->
        <!--
                1. v-xxx可以进行自定义指令的调用
                2.可以在 v-xxx="'value'" 进行值的设置,v-highlight="'red'"时，binding里多了一个 value:"red"
                也可以设置成对象数据 {mainColor:'pink',secondColor:'blue', delay:500} | value:{mainColor: 'pink', secondColor: 'blue', delay: 500}
                3.可以利用 : 进行自定义指令参数的传递  v-xxx:background="'value'" , binding里多了一个 arg: "background"
                4.可以利用 .xxx 进行修饰符的设置 .加了修饰符.delayed ，binding 里的 modifiers 对象则多了 {delayed: true} ，原来是{}空对象
        -->
        <p v-highlight:background.delayed.blink="{mainColor:'pink',secondColor:'skyblue', delay:500}">自定义指令的调用，全句指令</p>


        <!-- 自定义指令的调用，本地指令 -->
        <p v-local-highlight:background.delayed.blink="{mainColor:'pink',secondColor:'skyblue', delay:500}">自定义指令的调用，本地指令</p>

    </div>
    <script type="text/javascript">
        // TODO:全局注册自定义指令
        // 利用Vue.directive进行自定义指令的创建，现在是全局指令的注册
        Vue.directive("highlight", {
            bind(el, binding, vNode, oldNode) {
                // el:v-highlight绑定的当前p元素 <p>自定义指令的调用</p>
                // binding:绑定的数据内容
                // vNode:虚拟dom节点,
                // oldNode:虚拟dom节点,原来的dom, tag: ''

                // 很少操作 vNode和oldNode
                // console.log(el, binding,vNode,oldNode)

                console.log(binding)

                // 加了修饰符.delayed，则 binking里的 modifiers: {delayed: true}
                var delay = 0;
                if (binding.modifiers.delayed) {
                    delay = 2000
                }

                // 如果修饰符有 blink 则 进入if这个代码块,2秒后进行霓虹灯颜色跳转
                // 否则进入 else 代码块，2秒后进行背景颜色显示
                if (binding.modifiers.blink) {
                    let mainColor = binding.value.mainColor       // pink
                    let secondColor = binding.value.secondColor   // skyblue
                    let currentColor = binding.value.mainColor
                    setTimeout(() => {
                        setInterval(() => {
                            // 进行颜色判断
                            // 判断当前颜色是否等于secondColor，如果等于则让他变为mainColor，如果不是则让他变为 secondColor，进行颜色变换
                            currentColor === secondColor ? (currentColor = mainColor) : (currentColor = secondColor)

                            // 增加背景判断
                            if (binding.arg === "background") {
                                el.style.backgroundColor = currentColor
                            } else {
                                el.style.color = currentColor
                            }

                        }, binding.value.delay)
                        // setTimeout的delay是上面设置的2000 , setInterval 是 v-highlight 设置的 delay
                    }, delay)


                } else {
                    setTimeout(() => {
                        // 如果 v-highlight 没有加 :background,则是字体颜色的设置
                        // 加了则是背景颜色
                        if (binding.arg === 'background') {
                            el.style.backgroundColor = binding.value.mainColor
                        } else {
                            el.style.color = binding.value.mainColor
                        }
                    }, delay)
                }
            }
        })
        new Vue({
            el: '#app',
            // 全局：Vue.directive("highlight",{ bind(el, binding, vNode, oldNode) {} })
            // 局部指令注册,directives是复数，全局是Vue.directive
            directives: {
                "local-highlight": {
                    bind(el, binding, vNode, oldNode) {
                        // el:v-highlight绑定的当前p元素 <p>自定义指令的调用</p>
                        // binding:绑定的数据内容
                        // vNode:虚拟dom节点,
                        // oldNode:虚拟dom节点,原来的dom, tag: ''

                        // 很少操作 vNode和oldNode
                        // console.log(el, binding,vNode,oldNode)

                        console.log(binding)

                        // 加了修饰符.delayed，则 binking里的 modifiers: {delayed: true}
                        var delay = 0;
                        if (binding.modifiers.delayed) {
                            delay = 2000
                        }

                        // 如果修饰符有 blink 则 进入if这个代码块,2秒后进行霓虹灯颜色跳转
                        // 否则进入 else 代码块，2秒后进行背景颜色显示
                        if (binding.modifiers.blink) {
                            let mainColor = binding.value.mainColor       // pink
                            let secondColor = binding.value.secondColor   // skyblue
                            let currentColor = binding.value.mainColor
                            setTimeout(() => {
                                setInterval(() => {
                                    // 进行颜色判断
                                    // 判断当前颜色是否等于secondColor，如果等于则让他变为mainColor，如果不是则让他变为 secondColor，进行颜色变换
                                    currentColor === secondColor ? (currentColor = mainColor) : (currentColor = secondColor)

                                    // 增加背景判断
                                    if (binding.arg === "background") {
                                        el.style.backgroundColor = currentColor
                                    } else {
                                        el.style.color = currentColor
                                    }

                                }, binding.value.delay)
                                // setTimeout的delay是上面设置的2000 , setInterval 是 v-highlight 设置的 delay
                            }, delay)


                        } else {
                            setTimeout(() => {
                                // 如果 v-highlight 没有加 :background,则是字体颜色的设置
                                // 加了则是背景颜色
                                if (binding.arg === 'background') {
                                    el.style.backgroundColor = binding.value.mainColor
                                } else {
                                    el.style.color = binding.value.mainColor
                                }
                            }, delay)
                        }




                    }
                }
            }
        });
    </script>
</body>

</html>