定义全局过滤器，可循环注册多个（时间戳转换）（filter）（vue）

最新推荐文章于 2023-08-01 17:37:59 发布

秃秃秃了

最新推荐文章于 2023-08-01 17:37:59 发布

阅读量358

点赞数

分类专栏：细聊vue js需求文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_61285710/article/details/122581837

版权

js需求同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

细聊vue

7 篇文章 0 订阅

订阅专栏

问题：

在项目中，我们会经常遇到，类似于时间等，后端给我们返回的数据是时间戳，而我们渲染时需要展示具体的年月日等，这时我们就可以封装一个全局的filter过滤器，这样在整个项目中随时都可以使用了。

解决：

直接上代码：

// 创建一个filters.js的文件，  
  // 全局时间过滤器
export function formatDate (date, fmt) {
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
    };
    for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + '';
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
        }
    }
    return fmt;
};

function padLeftZero (str) {
    return ('00' + str).substr(str.length);
};

// main.js文件里注册，以防止多个filter需要注册，我们可以依靠循环一次性注册
// 注册全局过滤器
import * as filters from './filters' // global filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

// 组件引用
<template>
    <!-- 过滤器  time 可以使后台得到的数据，循环出来的也行 -->
    <div>{{time | formatDate}}</div>
    <!-- 输出结果 -->
    <!-- <div>2016-07-23 21:52</div> -->
</template>

// 也可通过单页面引用，在js里转换，还可以自定义格式，例如YYYY-MM-DD年月日也可
<script>
import {formatDate} from './common/date.js';
export default {
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    }
}
</script>