Vue2全局 filters 配置

1. filters 过滤器

应用场景：vue项目中，有些数据格式需要处理多处显示，ex：时间转换格式、特殊字符转换、脱敏…

2. 在vue项目src目录下utils文件创建filters.js

/**
 * 数据处理  
 * */
 /* 全局过滤 时间 - 变成 . */
 const handleFormat = function(val){
   	if(!val) return ""
	  return val.replace(/\-/g, ".")
 }
 
 /**
 *  手机号 ，身份证 ，地址  脱敏
 *  @param {string} value  要处理的值
 *  @param {string} frontLen 保留值显示前面个数
 *  @param {string} endLen 保留值显示后面个数
 *  
 *  */
const hideCode = function (value, frontLen, endLen) {
    if (!value) return ''
    value = value.toString()
    return value.substring(0, frontLen) + "*****" + value.substring(value.length - endLen)
}

 /**
  * 字符串超长截取省略号显示
  * @param {string}   value 值
  * @param {number}   vlength 范围值 默认值20
  * @return {string}  值
  * */
  const ellipsis = function(value, vlength = 20){
  	 if(!value){
  	    return "";
  	  }
  	  if (value.length > vlength) {
  	    return value.slice(0, vlength) + ' . . . '
  	  }
  	  return value
  }
 
 export default {
	 handleFormat,
   ellipsis,
   hideCode
 }

3. 在vue项目src目录下main.js配置全局

import  filters from './utils/filters.js'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
	// Object.keys(filters)得到的就是filters.js里面的函数名组成的数组 ['currency'] 因为这里filters.js里面就一个函数所以数组里就只有一个值
	//filterName 就是通过遍历['currency'] 得到的就是filters.js中的每一个函数名(过滤器名字)
	//filters[filterName])出发./filter/filters中的某个函数
})

4. 使用

<div>
  {{startTime | handleFormat}}  //2010.10.10
  </div>

export default {
		data() {
			return {
				startTime: '2010-10-10'
			}
		}
}