vue封装全局过滤器(及常用方法封装)

攻城狮超超

已于 2023-03-20 14:09:28 修改

阅读量488

点赞数 1

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

于 2023-03-01 23:26:30 首次发布

本文链接：https://blog.csdn.net/CCKing7/article/details/129291969

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中创建并使用全局过滤器，包括时间格式化、保留小数、时间单位转换等常见功能。通过在filters.js中定义函数，然后在main.js中引入并注册为Vue过滤器，最后在模板中使用管道符进行数据处理。

摘要由CSDN通过智能技术生成

1.创建filters.js文件，定义过滤函数。

如：时间格式转化函数

// 转化时间格式 年月日  时分秒
function filterTime(time) {
    var date = new Date(time);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    var d = date.getDate();
    d = d < 10 ? "0" + d : d;
    var h = date.getHours();
    h = h < 10 ? "0" + h : h;
    var minute = date.getMinutes();
    minute = minute < 10 ? "0" + minute : minute;
    var s = date.getSeconds();
    s = s < 10 ? "0" + s : s;
    return y + "年" + m + "月" + d + "日" + " " + h + ":" + minute;
}

2.在main.js中引入使用

//全局过滤器
import * as filters from '@/js/filters'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

3.在vue页面使用管道法进行过滤

如：

<span>
  开始日期：{{ item.f_StartTime | filterTime }}至
  结束日期：{{ item.f_EndTime | filterTime }}
</span>

常用方法封装：

注：(后续用到其他方法会持续更新，如有用到其他常用的方法欢迎评论留言)。

1.保留两位小数

2.保留两位小数并转化时间单位

3.转化时间格式年-月-日-时-分-秒

4.转化时间格式年-月-日

5.文字/字符首字母

6.根据时间段获取相差XX天xx小时xx分钟

// 保留两位小数
function Tofixed(value) {
    // 截取当前数据到小数点后两位
    let realVal = parseFloat(value).toFixed(2)
    return realVal
}
// 保留两位小数并转化时间单位
function Tofixed_time_3600(num) {
    return num == 0 ? num : (num / 3600).toFixed(2);
}
// 转化时间格式 年月日  时分秒
function filterTime(time) {
    var date = new Date(time);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    var d = date.getDate();
    d = d < 10 ? "0" + d : d;
    var h = date.getHours();
    h = h < 10 ? "0" + h : h;
    var minute = date.getMinutes();
    minute = minute < 10 ? "0" + minute : minute;
    var s = date.getSeconds();
    s = s < 10 ? "0" + s : s;
    return y + "年" + m + "月" + d + "日" + " " + h + ":" + minute;
}
// 转化时间格式 年月日
function filterTime2(time) {
    var date = new Date(time);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    var d = date.getDate();
    d = d < 10 ? "0" + d : d;
    var h = date.getHours();
    h = h < 10 ? "0" + h : h;
    var minute = date.getMinutes();
    minute = minute < 10 ? "0" + minute : minute;
    var s = date.getSeconds();
    s = s < 10 ? "0" + s : s;
    return y + "年" + m + "月" + d + "日";
}
// 文字/字符首字母
function Splice(str) {
    if (!str) return "";
    str = str.toString();
    return str.substr(0, 1);
}
// 根据时间段获取相差XX天xx小时xx分钟
function formatDuring(millisecond) {
    var days = parseInt(millisecond / (1000 * 60 * 60 * 24));
    var hours = parseInt(
        (millisecond % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    var minutes = parseInt((millisecond % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = (millisecond % (1000 * 60)) / 1000;
    return days + " 天 " + hours + " 小时 " + minutes + " 分钟 ";
}
export {
    Tofixed,
    Tofixed_time_3600,
    filterTime,
    filterTime2,
    formatDuring,
    Splice
}

参考文章：vue封装全局过滤器_zhuzhucaicai的博客-CSDN博客

有用的话请点赞，关注加收藏哦(｡･ω･｡)ﾉ♡