本文将介绍一下实际项目中过滤器一种定义方式，不局限于这一种方式。
在成熟的项目中过滤器的使用很频繁，局部过滤器一般不建议使用，我们使用全局过滤器，将过滤器的实现抽出来变成全局过滤器，方便复用。
使用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>
实现效果
错误记录
https://www.jianshu.com/p/9a6965a14c2a
参考
https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
https://zhuanlan.zhihu.com/p/59564277
https://www.cnblogs.com/ll15888/p/11904707.html
https://www.cnblogs.com/Guorisy/p/12389347.html
