封装vue项目中的全局过滤器_vue 封装过滤器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41555854/article/details/113125495

本文介绍如何在Vue项目中封装全局过滤器，并提供几个实用的过滤器示例，如状态、时间和类别的过滤。这些过滤器可以方便地应用于各种场景，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

故心故心故心故心小故冲啊

文章目录

封装全局过滤器
导出的函数

封装全局过滤器

import Vue from 'vue'
import * as filters from './filters' //引入filters对象(所有的)

Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key]); //通过循环添加全局过滤器
})

导出的函数

//过滤状态
export function getStatus(data) {
    switch (data) {
        case "2":
            return "代提交";
        case "1":
            return "已提交";
        case "3":
            return "初审通过";
        case "4":
            return "初审拒接";
        case "5":
            return "终审通过";
        case "6":
            return "终审拒接";
        default:
            return data;
    }
}

//过滤时间
export function getDate(data) {
    var d = new Date(data);
    var times =
        d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();

    return times;
}

//过滤类别
export function getClassess(data) {
    switch (data) {
        case "chuangyi":
            return "创意类";
        case "other":
            return "其他类";
        case "shenghuo":
            return "日常类";
        default:
            return data;
    }
}

//过滤类型
export function getType(data) {
    switch (data) {
        case "1":
            return "primary";
        case "2":
            return "";
        case "3":
            return "success";
        case "4":
            return "danger";
        case "5":
            return "success";
        case "6":
            return "danger";
        default:
            return data;
    }
}