Vue——自定义指令directive

基本使用

HTML

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

JS

使用directive设置。

语法

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

实例

HTML

<!--自定义的属性pin,需要加“v-”前缀-->
<!--属性值是布尔值，true的话，便position: fixed-->

<div v-pin="card1.painned" class="card">
    <!--点击之后，变为fixed-->
    <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

<!--注意这里，pin后面的参数(true)，修饰符(bottom right)-->
<div v-pin:true.bottom.right="card1.painned" class="card">
    <button @click="card1.painned =!card1.painned">钉住/取消</button>
</div>

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'
    }
})