【13】vue.js — 自定义指定(directive)

最新推荐文章于 2024-07-31 18:23:58 发布

原创最新推荐文章于 2024-07-31 18:23:58 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #自定义指定

本文介绍了Vue.js中自定义指令的应用实例，包括颜色指定、生命周期钩子及拖拽效果实现等，展示了如何通过自定义指令增强组件交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义指定的操作

自定义指定使用时前面必须得加v-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <!-- 使用自定义color指定，调取data中red的值 -->
            <span v-color="red">自定义指定01</span>
            <span v-color="blue">自定义指定02</span>
            <span v-color="yellow">自定义指定03</span>
        </div>
    </body>
    <script>
        window.onload=function(){
            Vue.directive('color',function(color){
                //接收参数，但执行v-color指令时
                this.el.style.color = color;
            });
            var vm = new Vue({
                el: '#box',
                data: {
                    msg: 'welcome',
                    red: 'red',
                    blue: 'blue',
                    yellow: 'yellow'
                }
            });
        }
    </script>
</html>

自定义指定的生命周期

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <span v-color="red">自定义指定01</span>
            <span v-color="blue">自定义指定02</span>
            <span v-color="yellow">自定义指定03</span>
            <br />
            <input type="button" value="将红色更换成绿色,不会执行bind方法" @click="change" />
        </div>
    </body>
    <script>
        window.onload=function(){
            Vue.directive('color',{
                bind:function(color) {
                    //第一次绑定到DOM元素上的时候触发
                    console.info("第一次绑定数据时触发了")
                },
                update: function(color) {
                    //console.info("更新渲染数据");
                    this.el.style.color = color;
                },
                unbind: function() {
                    console.info("解绑了");
                }
            });
            var vm = new Vue({
                el: '#box',
                data: {
                    msg: 'welcome',
                    red: 'red',
                    blue: 'blue',
                    yellow: 'yellow'
                },
                methods: {
                    change: function(){
                        this.red = 'green';
                    }
                }
            });
        }
    </script>
</html>

自定义指定的生命周期

当我们再次点击按钮时候，上面红色字体会变成绿色，bind方法不会再执行。

自定义指定 — 拖拽效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
            <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
        </div>
    </body>
    <script>
        window.onload=function(){
            Vue.directive('drag',function(){
                var oDiv = this.el;
                oDiv.onmousedown = function(ev){
                    var disX = ev.clientX - oDiv.offsetLeft;
                    var disY = ev.clientY - oDiv.offsetTop;
                    document.onmousemove = function(ev) {
                        var l = ev.clientX - disX;
                        var t = ev.clientY - disY;
                        oDiv.style.left = l + 'px';
                        oDiv.style.top = t + 'px';
                    }
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        document.onmouseup=null;
                    };
                }
            });
            var vm = new Vue({
                el: '#box',
                data: {
                    msg: 'welcome'
                }
            });
        }
    </script>
</html>