vue.js---自定义指令 (配置传参及修饰符)

钩子函数的属性

binding：一个对象，包含以下属性：

name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。//等于号后面的值
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

一个实例（modifiers,arg属性）：

js代码：

Vue.directive("pin2",function(el,binding){
    var val = binding.value;
    var position = binding.modifiers;//获取对象数组，使用需要遍历
    var warnning = binding.arg;//获取true属性
    if(val){
        el.style.position = "fixed";
        for(var key in position){//遍历对象数组，使用modifier属性
            if(position[key]) {
                el.style[key] = '10px';
            }
            if(warnning){//使用arg属性
                el.style.background = "yellow";
            }
            }

    }else{
        el.style.position = "static";
    }
});

html代码：

<div id="app">
    <div class="card" v-pin2:true.bottom.right="card1.pin" >
        <button @click="card1.pin = !card1.pin">固定/取消</button><br>
        卡片1
    </div>
    <div class="card" v-pin2.bottom.left="card2.pin">
        <button @click="card2.pin = !card2.pin">固定/取消</button><br>
        卡片2
    </div>
</div>