自定义指令介绍（含自动获取焦点案例、实时时间转换案例）

最新推荐文章于 2022-10-26 14:52:37 发布

Kim丶

最新推荐文章于 2022-10-26 14:52:37 发布

阅读量101

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u010689561/article/details/90048771

版权

vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

基本用法

全局注册

Vue.directive('focus', {
	// 指令选项
});

局部注册

var app = new Vue({
	el: '#app',
	directives: {
		focus: {
			// 指令选项
		}
	}
});

自定义指令的选项

自定义指令的选项是由几个钩子函数组成的，每个都是可选的。

bind：只调用一次，指令第一次绑定到元素时调用，常用于初始化动作。
inserted：被绑定元素插入父节点时调用。
update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
unbind：指令与元素解绑时调用，只执行一次。

每个钩子函数都有几个参数可用：

el 指令所绑定的元素，可以用来直接操作DOM。
binding 一个对象，包含以下属性：
- name 指令名，不包含v-前缀
- value 指令的绑定值，例如v-my-directive="1+1"，value的值是2。
- oldValue 指令绑定的前一个值，仅在update和componentUpdated钩子中可用。
- expression 绑定值得字符串信息，例如v-my-directive="1+1"，expression 的值是"1+1"。
- arg 传给指令的参数，例如v-my-directive:foo，arg的值是foo。
- modifiers 一个包含修饰符的对象。例如v-my-directive.foo.bar，修饰符对象modifiers的值是{ foo: true, bar: true }。
vnode Vue编译生成的虚拟节点。
oldVue 上一个虚拟节点仅在update和componentUpdated钩子中可用。

在大多数使用场景，我们会在bind钩子里绑定一些时间，比如在document上用addEventListener绑定，在unbind里用removeEventListener解绑。

自动获取焦点案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>自动获取焦点案例</title>
</head>

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script type="text/javascript">
    Vue.directive('focus', {
        inserted: function(el) {
            el.focus();
        }
    });
    var app = new Vue({
        el: '#app'
    });
    </script>
</body>

</html>

实时时间转换指令v-time

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间转换指令</title>
</head>
<body>
    <div id="app" v-cloak>
        <div v-time="timeNow"></div>
        <div v-time="timeBefore"></div>
    </div>
    
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script type="text/javascript" src="time.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

time.js

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分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;
    },
    // 转换时间
    getFormatTime: 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;
    }
}

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

index.js

var app = new Vue({
    el: '#app',
    data: {
        timeNow: (new Date()).getTime(),
        timeBefore: 1488930695721
    }
})

在这里插入图片描述

Kim丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义指令介绍（含自动获取焦点案例、实时时间转换案例）

基本用法全局注册Vue.directive('focus', { // 指令选项});局部注册var app = new Vue({ el: '#app', directives: { focus: { // 指令选项 } }});自定义指令的选项自定义指令的选项是由几个钩子函数组成的，每个都是可选的。bind：只调用一次，指令第一次绑定到元素...
复制链接

扫一扫