Vue.js--自定义指令（时间转换）

最新推荐文章于 2023-10-23 22:31:02 发布

吴声子夜歌

最新推荐文章于 2023-10-23 22:31:02 发布

阅读量654

点赞数 2

分类专栏： Vue.js 文章标签： Vue.js 自定义指令

本文链接：https://blog.csdn.net/cold___play/article/details/102618534

版权

Vue.js 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

自定义指令 v-time

将绝对时间转换为相对时间。（例如，社交软件发布动态里面的时间、几分钟前、几小时前…）
在这里插入图片描述

入口页面 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>时间转换</title>
</head>
<body>
    <div id="app" v-cloak>
        <div v-time="timeNow">
        </div>
        <div v-time="timeBefore">
            {{timeBefore}}
        </div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.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: 1571324903814
    }
});

自定义指令 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 () {
        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();//今天0点时间戳
        var year = this.getYearUnix();//今年0点时间戳
        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);
        }, 1000);
    },
    unbind: function (el) {
        clearInterval(el.__timeout__);
        delete el.__timeout__;
    } 
});

吴声子夜歌

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js--自定义指令（时间转换）

自定义指令 v-time将绝对时间转换为相对时间。（例如，社交软件发布动态里面的时间、几分钟前、几小时前…）入口页面 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content...
复制链接

扫一扫

专栏目录