vue自定义指令directive

Posted 2021-03-08 wuqilang

    全局自定义指令：Vue.directive()

    局部自定义指令：directives

 

    directive(参数一,参数二)

        参数一：指令名称

        参数二：指令的配置项，可以是函数，也可以是对象

            函数：

                参数一：使用当前指令的元素

                参数二：指令的详细信息

                    {

                        modifiers:修饰符（只要自定义指令后面跟了修饰符，modifiers对象中就有值，为true）,

                        value:指令的值（假设指令这样写：<div v-test="‘aaa‘"></div>，那么value就是aaa）

                    }

                    

    指令的作用：操作DOM元素

 

    步骤：

        ①src下新建utils/utils.js：

import Vue from "vue";

/**
 *  v-test指令：
 *      <div v-test="‘发发发‘"></div>
 *      相当于
 *      <div>发发发</div>
 * 
 */
Vue.directive("test",(el,{value})=>{
    el.innerText=value;
});

/**
 *  设置背景颜色的指令 
 * 
 */
Vue.directive("backgroundColor",(el,{value,...rest})=>{
    el.style.backgroundColor=value;
});

/**
 *  阻止浏览器默认事件：v-event.prev
 * 
 */
Vue.directive("event",(el,{modifiers})=>{
    let {prev}=modifiers;
    el.addEventListener("contextmenu",(e)=>{
        if(prev){
            e.preventDefault();
        }
    });
});

/**
 *  自动聚焦
 * 
 */
Vue.directive("focus",{
    // 获取光标在inserted中操作，此时元素已经插入到父节点了
    inserted(el){
        el.focus();
    }
});

/**
 *  第一个参数是指令名称，第二个参数如果是一个函数，这个函数是指令要做的事情，如果是一个对象，这个对象是指令的配置项。
 * 
 * 
 */
Vue.directive("wql",{
    bind(){ 
        // 当前元素使用当前指令的时候会被调用，只会调用一次，用来做初始化
        console.log("bind")
    },
    inserted(){
        // 当使用指令的元素被插入到父节点（#app）的时候会被触发
        console.log("inserted")
    },
    update(){
        // 只要当前元素不被移除，其他操作几乎都会触发这2个生命周期，先触发update后触发componentUpdate
        // 虚拟DOM只要涉及到元素的隐藏、显示（display）值的改变、内容的改变等都会触发虚拟DOM更新
        console.log("update")
    },
    componentUpdated(){
        console.log("componentUpdate")
    },
    unbind(){
        // 当只用指令的元素被卸载的时候会执行，简单的说就是当前元素被移除的时候
        console.log("unbind")
    }
});


/**
 *  v-drag
 * 
 */
Vue.directive("drag",(el,{modifiers,value})=>{
    if(value){
        var disX,disY;
        var {l,t} = modifiers;
        el.style.position = "absolute";
        el.addEventListener("mousedown",mousedown)
        function mousedown(e){
            disX = e.offsetX;
            disY = e.offsetY;
            document.addEventListener("mousemove",move)
            document.addEventListener("mouseup",up)
        }
        function move(e){
            var x = e.clientX - disX;
            var y = e.clientY - disY;
            if((l&&t) || (!l&&!t)){
                 el.style.left = x + ‘px‘;
                 el.style.top = y + ‘px‘;
                 return;
            }
            if(l){
                el.style.left = x + ‘px‘;
                 return;
            }
            if(t){
                el.style.top = y + ‘px‘;
                 return;
            }
        }
        function up(){
            document.removeEventListener("mousemove",move)
            document.removeEventListener("mouseup",up)
        }
    }
});

        ②main.js中引入：

            import "./utils/utils.js";

 

        ③App.vue中使用自定义指令：

            <div v-test="‘发发发‘" v-backgroundColor.not="‘blue‘"></div>

            <div v-test="‘阻止浏览器默认事件‘" v-backgroundColor="‘yellow‘" v-event.prev></div>

            <input type="text" v-focus>

 

    指令的生命周期：

        bind()：当元素只用当前指令的时候会被调用，只会调用一次，用来做初始化

        inserted()：当使用指令的元素被插入到父节点（#app）的时候会被触发

        update()：只要当前元素不被移除，其他操作几乎都会触发这2个生命周期，先触发update后触发componentUpdate。虚拟DOM什么时候更新：只要涉及到元素的隐藏、显示（display）值的改变、内容的改变等都会触发虚拟DOM更新

        componentUpdate()：组件更新

        unbind()：当使用指令的元素被卸载的时候会执行，就是当前元素被移除的时候