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>



你可能感兴趣的:(Vue.js)