Vue——自定义指令directive

基本使用

HTML

使用“v-”前缀自定义一个属性。

JS

使用directive设置。

语法

Vue.directive('属性名',function(所在元素,定义内容){})

实例

HTML




<div v-pin="card1.painned" class="card">
    
    <button @click="card1.painned =!card1.painned">钉住/取消button>
div>


JS
            //属性名        所在元素  pin等于的内容
Vue.directive('pin',function(ele,binding){

                // 这个就是我们定义的card1.pinned
    var pinned = binding.value; 

    if(pinned){
        ele.style.position = 'fixed';
        ele.style.top = '10px';
        ele.style.left = '10px';
    }else{
        ele.style.position = 'static'
    }
})

new Vue({
    el:'#app',
    data: {
        //定义这个card的pinned默认为false
        card1: {
            painned: false,
        },
    }
})

配置传参以及修饰符

HTML

在自定义属性后面使用“.”添加修饰符。

通过“：”添加参数。参数要在修饰符前面！！！

JS

使用modifiers获取修饰符

通过arg获取参数。

实例

HTML


true.bottom.right="card1.painned" class="card">
    "card1.painned =!card1.painned">钉住/取消


JS
Vue.directive('pin',function(ele,binding){

var pinned = binding.value; 

//通过过modifiers获取修饰符
var position = binding.modifiers;

//通过arg获取参数
var warnning = binding.arg;

//通过

    if(pinned){
        ele.style.position = 'fixed';

        //遍历一下修饰符
        for (var key in position){
            if(position[key]){
                ele.style[key] = '10px';
            }
        }
        //这里判断一下参数
        if(warnning === 'true'){
            ele.style.background = 'yellow';
        }
    }else{
        ele.style.position = 'static'
    }
})