Vue自定义管道,时间过滤器

2020-12-28  本文已影响0人  一学就会的小天才

1、在src文件夹中创建一个新的文件,用来放置自定义的管道:pipe-vue.js

import Vue from 'vue';

Vue.filter('dateTime', function (date, type) {
    if (date != null && date != "") {
        let yer,
            month,
            day,
            HH,
            mm,
            ss;
        let time = new Date(date),
            timeDate;
        yer = time.getFullYear();
        month = time.getMonth() + 1;
        day = time.getDate();
        HH = time.getHours(); //获取系统时,
        mm = time.getMinutes(); //分
        ss = time.getSeconds(); //秒

        month = (month < 10) ? ('0' + month) : month;
        day = (day < 10) ? ('0' + day) : day;
        HH = (HH < 10) ? ('0' + HH) : HH;
        mm = (mm < 10) ? ('0' + mm) : mm;
        ss = (ss < 10) ? ('0' + ss) : ss;

        switch (type) {
            case 'yyyy':
                timeDate = String(yer);
                break;
            case 'yyyy-MM':
                timeDate = yer + '-' + month;
                break;
            case 'yyyy-MM-dd':
                timeDate = yer + '-' + month + '-' + day;
                break;
            case 'yyyy/MM/dd':
                timeDate = yer + '/' + month + '/' + day;
                break;
            case 'yyyy-MM-dd HH:mm:ss':
                timeDate = yer + '-' + month + '-' + day + ' ' + HH + ':' + mm + ':' + ss;
                break;
            case 'HH:mm:ss':
                timeDate = HH + ':' + mm + ':' + ss;
                break;
            case 'MM':
                timeDate = String(month);
                break;
            default:
                timeDate = yer + '-' + month + '-' + day;
                break;
        }
        return timeDate
    } else {
        return ''
    }
})

2、在main.js文件中引入,方便全局使用

import Vue from 'vue';
import App from './App.vue';
import './pipe-vue.js'; // 管道方法

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

3、使用方法

<span>{{ data.dateupload_time | dateTime('yyyy-MM-dd') }}</span>
上一篇 下一篇

猜你喜欢

热点阅读