Vue自定义指令，时间转换

最新推荐文章于 2023-02-01 11:03:46 发布

来自流星

最新推荐文章于 2023-02-01 11:03:46 发布

阅读量219

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_34579060/article/details/97270255

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间转换指令</title>
</head>
<body>

    <div id="app">
        <div v-time="timeNow"></div>
        <div v-time="timeBefore"></div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./js/time.js"></script>
<script>
    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__;
        }
    });

    var app = new Vue({
        el: "#app",
        data: {
            timeNow: (new Date()).getTime(),
            timeBefore: 1488930695721
        }
    });
</script>
</body>
</html>

time.js 时间转换：

var Time = {

    // 获得当前时间戳
    getUnix: function () {
        var date = new Date();
        return date.getTime();
    },

    // 补齐时间格式
    handleTime: function (val) {
        return val < 10 ? "0" + val : val;
    },

    // 获得今天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 = this.handleTime(date.getMonth() + 1);
        var day = this.handleTime(date.getDate());
        return date.getFullYear() + "-" + month + "-" + day;
    },

    // 转换时间
    getFormatTime: function (timestamp) {
        // 当前的时间戳
        var now = this.getUnix();

        // 今天0点的时间戳
        var today = this.getTodayUnix();

        /**
         1分钟以前显示 刚刚
         1分钟到1小时之间 显示 xx 分钟之前
         1小时—— 1天之间  显示  xx 小时之前
         1天  - 31天之间  显示  xx 天之前
         大于 1 个月 显示 xx 年 xx 月 xx 日
         */

        var timer = (now - timestamp) / 1000;
        var tip = '';

        // 1分钟以前，显示“刚刚”。
        // 1分钟~1小时之间，显示“xx分钟前”。
        // 1小时~1天之间，显示“xx小时前”。
        // 1天~1个月（31天）之间，显示“xx天前”。
        // 大于1个月，显示“xx年xx月xx日”。

        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;
    }

};

来自流星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义指令，时间转换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>时间转换指令</title></head><body> <div id="app"> <div...
复制链接

扫一扫

专栏目录