vue过滤器模块

作者: 误入IT的人 | 来源:发表于2021-06-24 14:22 被阅读0次

vue过滤器模块
tool.js
6.Vue过滤器
Vue-04
vue自定义过滤器
9.自定义vue全局过滤器
vue 过滤器做字数限制并显示省略号
关于angular与vue在过滤器方面的不同
vue 过滤器filter中this为undefined
Vue过滤器和vue-resource

本文将介绍一下实际项目中过滤器一种定义方式，不局限于这一种方式。

在成熟的项目中过滤器的使用很频繁，局部过滤器一般不建议使用，我们使用全局过滤器，将过滤器的实现抽出来变成全局过滤器，方便复用。

使用Vue CLI创建demo工程，然后在src目录下创建过滤器模块，创建完成后的工程目录结构如下：

DateFilter.js

/**
 * 传入的数据格式为:20210625
 * 传出的数据格式为:2021-06-25
 */
const filter = function (input) {
    //过滤器的业务逻辑
    if (input) {
      return input.substring(0, 4) + '-' + input.substring(4, 6) + '-' + input.substring(6);
    }
}

let filterObj = {}
//确保filterObj的属性（DateFilter）需要与当前文件名保持一致
filterObj.DateFilter = filter
export default filterObj

PhoneFilter.js

/**
 * 传入的数据格式为:18811996654
 * 传出的数据格式为:188****6654
 */
const filter = function (input) {
    if (input) {
      return input.substring(0, 3) +'****'+ input.substring(7, 11);
    }
}

let filterObj = {}
//确保filterObj的属性（PhoneFilter）需要与当前文件名保持一致
filterObj.PhoneFilter = filter
export default filterObj

以上代码展示了DateFilter（日期格式化过滤器）和PhoneFilter（手机号脱敏过滤器）文件内部的逻辑，注意点就是filterObj对象的唯一属性名字需要跟当前js文件同名，这样便于批量导入。一个过滤器js文件只能有一个过滤器。

filter文件夹下的index.js实现过滤器批量导入与注册

import Vue from 'vue'
//使用webpack中require.context批量导入
const files = require.context('./filters', true, /\.js$/)
files.keys().forEach(fileName => {
    var obj = files(fileName).default;
    var filterName = fileName.replace('./', "");
    filterName = filterName.replace('.js', "");
    if(obj[filterName] === undefined){
        console.warn("过滤器文件名和过滤器方法名应保持一致",fileName);
    }else{
        //全局注册过滤器
        Vue.filter(filterName, obj[filterName]);
    }
})

main.js引入所有过滤器

import Vue from 'vue'
import App from './App.vue'

//导入所有过滤器
import './filter'


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

页面使用
为了简单，我直接在App.vue文件里面演示一下过滤器的使用。App.vue代码如下：

<template>
    <div id="app">
        <div>过滤器演示</div>
        <div>时间过滤器 {{date | DateFilter}}</div>
        <div>手机号过滤器 {{phone | PhoneFilter}}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                date: '20210625',
                phone: '18811907765'
            }
        },
        name: 'App'
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

实现效果