【Vue部分】Vue springboot前后端分离开发实战【贾志杰】 - 002自定义指令 - 《Vue知识【多方】》

指令的注册
- 全局自定义指令
- 注册局部指令
指令的定义对象

指令的注册

自定义指令的注册分为全局注册和局部注册。
语法：Vue.directive(id，definition)。id 是指令的唯一标识，definition 定义对象则是指令的相关属性及钩子函数

全局自定义指令

Vue.directive('focus', {    // 注册一个全局自定义指令 v-focus  
    //定义对象
 })

注册局部指令

var vm = new Vue({
  el: '#app',
  directives:{
    focus:{
      //定义对象
    }
  }
})

指令的定义对象

definition定义对象，对指令赋予具体的功能。可以提供如下几个钩子函数 (均为可选):
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 ocument 中）。
update：被绑定元素所在的模板跟新时调用，而不论绑定值是否变化。通过比较更新前后绑定的值，可以忽略不必要的模板更新。
componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
unbind：只调用一次，指令与元素解绑时调用。
根据需求在不同的钩子函数内完成逻辑代码。

(全局/局部) 自定义 v-focus 指令

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>页面载入时,input 元素自动获取焦点：</p>
            <input v-focus>
        </div>
        <script>
            // 注册一个全局自定义指令 v-focus
            /* Vue.directive('focus', {
                 // 当绑定元素插入到 DOM 中。
                 inserted: function (el) {
                               el.focus();   // 聚焦元素
                 }
             })*/
            // 创建根实例
            var vm = new Vue({
                el: '#app',
                directives: {
                    // 注册一个局部的自定义指令 v-focus
                    focus: {
                        // 指令的定义
                        inserted: function(el) {
                            // 聚焦元素
                            el.focus()
                        }
                    }
                }
            })
        </script>
    </body>
</html>

指令实例属性

在指令的钩子函数内，可以通过 this 来调用指令实例。下面详细说明指令的实例属性。
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property
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 }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-demo="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-demo:msg.a.b="message"></div>
</div>
<script>
    Vue.directive('demo', {
        bind: function (el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML =
                'name: '       + s(binding.name) + '<br>' +
                'value: '      + s(binding.value) + '<br>' +
                'expression: ' + s(binding.expression) + '<br>' +
                'argument: '   + s(binding.arg) + '<br>' +
                'modifiers: '  + s(binding.modifiers) + '<br>' +
                'vnode keys: ' + Object.keys(vnode).join(', ')
        }
    })
    new Vue({
        el: '#app',
        data: {
            message: 'hello!'
        }
    })
</script>
</body>
</html>

下拉菜单

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--自定义指令v-clickoutside绑定handleHide函数-->
    <div class="main" v-clickoutside="handleHide">
        <button @click="show = !show">点击显示下拉菜单</button>
        <div class="dropdown" v-show="show">
            <div class="item"><a href="#">选项 1</a></div>
            <div class="item"><a href="#">选项 2</a></div>
            <div class="item"><a href="#">选项 3</a></div>
        </div>
    </div>
</div>
<script>
    /*自定义指令v-clickoutside*/
    Vue.directive('clickoutside', {
        /*在document上绑定click事件,所以在bing钩子函数内声明了一个函数
        documentHandler,并将它作为句柄绑定在document的click事件上。
        documentHandler函数做了两个判断。
        * */
        bind(el, binding) {
            function documentHandler(e) {
                /*第一个是判断点击的区域是否是指令所在的元素内部,如果是,
                就跳转函数,不往下继续执行。
                * contains方法是用来判断元素A是否包含了元素B,包含返回true。
                * */
                if (el.contains(e.target)) {
                    return false
                }
                /*第二个判断的是当前的指令v-clickoutside有没有表达式,在该自定义
                指令中,表达式应该是一个函数,在过滤了内部元素后,点击外面任何区
                域应该执行用户表达式中的函数,所以binding.value()
                * 就是用来执行当前上下文methods中指定的函数的。
                * */
                if (binding.expression) {
                    binding.value(e)
                }
            }
            /*与Vue 1.0不同的是,在自定义指令中,不能再使用this.xxx的形式再上下
            文中声明一个变量,所以用了el.__vueMenuHandler__引用了documentHandler,
            这样就可以再unbind钩子里移除对document的click
            事件监听。如果不移除,当组建或元素销毁时,它任然存在于内存中。
            * */
            el.__vueMenuHandler__ = documentHandler;
            document.addEventListener('click', el.__vueMenuHandler__)
        },
        unbind(el) {
            document.removeEventListener('click', el.__vueMenuHandler__)
            delete el.__vueMenuHandler__
        }
    })
    new Vue({
        el: '#app',
        data: {
            show: false
        },
        methods: {
            handleHide() {
                this.show = false
            }
        }
    })
</script>
</body>
</html>

相对时间转换

在很多社区网站，比如朋友圈、微博等，发布的动态有一个相对本机时间转换后的相对时间。
我们来实现这样一个Vue自定义指令v-time，将表达式传入的时间戳实时转换为相对时间。为了便于演示效果，我们初始化时定义了两个时间

<!DOCTYPE html>
<html>
<head>
    <title>时间转换指令</title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-time="timeNow"></div>
    <div v-time="timeBefore"></div>
</div>
<script src="./time.js"></script>
<script src="./index.js"></script>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
        timeNow: (new Date()).getTime(),
        timeBefore: 1580503571085
    }
})
  </script>
</body>
</html>

timeNow是当前的时间，
timeBefore是一个写死的时间：2020-02-01。

在写指令v-time之前，需要先写一系列与时间相关的函数，我们声明一个对象Time，把它们都封装到里面

var Time = {
    //获取当前时间戳
    getUnix: function() {
        var date = new Date();
        return date.getTime();
    },
//获取今天0点0分0秒的时间戳
getTodayUnix: function() {
    var date = new Date();
    date.setHours(0);
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
    return date.getTime();
},
//获取今年1月1日0点0秒的时间戳
getYearUnix: function() {
    var date = new Date();
    date.setMonth(0);
    date.setDate(1);
    date.setHours(0);
    date.setMinutes(0);
    date.setSeconds(0);
   date.setMilliseconds(0);
    return date.getTime();
},
//获取标准年月日
getLastDate: function(time) {
    var date = new Date(time);
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    return date.getFullYear() + '-' + month + '-' + day;
},
//转换时间
getFormateTime: function(timestamp) {
    var now = this.getUnix();
    var today = this.getTodayUnix();
    var year = this.getYearUnix();
    var timer = (now - timestamp) / 1000;
    var tip = '';
if (timer <= 0) {
        tip = '刚刚';
    } else if (Math.floor(timer / 60) <= 0) {
        tip = '刚刚';
    } else if (timer < 3600) {
        tip = Math.floor(timer / 60) + '分钟前';
    } else if (timer >= 3600 && (timestamp - today >= 0)) {
        tip = Math.floor(timer / 3600) + '小时前';
    } else if (timer / 86400 <= 31) {
        tip = Math.ceil(timer / 86400) + '天前';
    } else {
        tip = this.getLastDate(timestamp);
    }
    return tip;
}
}

Time.getFormatTime()方法就是自定义指令v-time所需要的，参数为毫秒级时间戳，返回已经整理好的时间格式的字符串。
最后在time.js里补全剩余的代码如下

 Vue.directive('time', {
    bind: function(el,binding) {
        el.innerHTML = Time.getFormateTime(binding.value);
        el.__timeout__ = setInterval(() => {
            el.innerHTML = Time.getFormateTime(binding.value);
        },60000);
    }，
    unbind: function() {
        clearInterval(el.__timeout__);
        delete el.__timeout__;
    }
})

在bind钩子里，将指令v-time表达式的值binding.value作为参数传入Time.getFormatTime()方法中得到格式化时间，在通过el.innerHTML写入指令所在元素。定时器el.timeout每分钟触发一次，更新时间，并且在unbind钩子里清除掉。