Vue--自定义指令

自定义指令

使用Vue的静态方法directive，我们可以定义属于自己的指令。

格式：Vue.directive(指令的名字， 回调函数)

例子：

<div id='app'>
    <span v-red>vue</span>
</div>
<script src='../js/vue.js'></script>
<script>
    Vue.directive('red', function(){
        this.el.style.color = 'red';
    });
    new Vue({
        el : '#app'
    });
</script>

标签使用了v-red指令后，字体颜色会变红。回调函数里的this.el就是被绑定的v-red的span。 需要注意的是，directive函数里的指令名字不要带v-

 

指令传参

指令后面加上 = “”可以以字符串的形式传参。(而且也只能以字符串的形式传递参数) 

如 ：

v-set="{size:'40px', color:'blue'}"

例子 ：

<div id='app'>
    <span v-set='{size : "40px", color : "blue"}'>hello</span>
</div>
<script src='../js/vue.js'></script>
<script>
    Vue.directive('set', function(json){
        this.el.style.fontSize = json.size;
        this.el.style.color = json.color;
    });
    new Vue({
        el : '#app'
    });
</script>

 

自定义拖拽指令

<div id='app'>
    <div class='box' v-drag></div>
</div>
<script src='../js/vue.js'></script>
<script>
    Vue.directive('drag', function(){
        var div = this.el;
        div.onmousedown = function(e){
            disX = e.clientX - div.offsetLeft;
            disY = e.clientY - div.offsetTop;
            document.onmousemove = function(e){
                var l = e.clientX - disX;
                var t = e.clientY - disY;
                div.style.left = l + 'px';
                div.style.top = t + 'px';
            }
            document.onmouseup = function(){
                document.onmousedown = document.onmousemove = null;
            }
        }    
    });
    new Vue({
        el : '#app'
    });
</script>