码迷,mamicode.com
首页 > 其他好文 > 详细

vue自定义指令directive

时间:2020-02-22 15:34:58      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:lis   作用   efault   节点   splay   class   main   ext   use   

    全局自定义指令: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():当使用指令的元素被卸载的时候会执行,就是当前元素被移除的时候




















































vue自定义指令directive

标签:lis   作用   efault   节点   splay   class   main   ext   use   

原文地址:https://www.cnblogs.com/wuqilang/p/12345244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!