自定义指令v-time

最新推荐文章于 2022-06-06 10:41:13 发布

summer·

最新推荐文章于 2022-06-06 10:41:13 发布

阅读量431

点赞数 4

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45774485/article/details/113665648

版权

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

自定义一个vue指令，实现复用

在这里插入图片描述
上面这种评论后面显示用户多久前发出这条消息，其实就可以用vue自定义指令实现，我定义为v-time，起始时间戳是2月4日凌晨
HTML部分：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间指令</title>
</head>

<body>
    <div id="app" v-cloak>
        <div v-time="timeNow"></div>
        <div v-time="timeBefore"></div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="time.js"></script>
    <script src="index.js"></script>
</body>

</html>

index.js部分：

var app = new Vue({
    el: '#app',
    data: {
        timeNow: (new Date()).getTime(),
        timeBefore: 1612368000000 //时间为2021年2月4号
    }
});

time.js部分：

var Time = {
    getUnix: function() {
        var date = new Date();
        return date.getTime();
    },
    //获取今天的时间戳
    getTodayUnix: function() {
        var date = new Date();
        date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0);
        return date.getTime();
    },
    //获取今年的时间戳
    getYearUnix: function() {
        var date = new Date();
        date.setMonth(0);
        date.setDate(0);
        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(() => {
            el.innerHTML = Time.getFormatTime(binding.value);
        }, 6000);
    },
    unbind: function(el) {
        clearInterval(el.__timeout__);
        delete el.__timeout__;
    }
});