注册全局 filter

关于

后台系统中出现手机号码通常需要加密展示，如果直接后台返回数据没有加密就需要我们自行处理。

但每个页面中都有这个方法很繁琐,所以封装为全局过滤器来使用。

Vue 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

实现方法

全局过滤器

• 创建一个全局 filter 文件，导出要封装的方法

/**
 * 加密手机号码
 */
export const privatePhone = function (val) {
  let mobile = val.toString()
  return mobile.substring(0, 3) + '****' + mobile.substring(8, 11)
}

• 在 main.js 中注册为全局 filter

import * as filters from './uilt/filters' // 引入 filter

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]) // 插入过滤器名和对应方法
})

• 在文件中使用 filter 进行过滤

<template>
  <div>
    {{ 17666666666 | privatePhone }}
  </div>
</template>

局部过滤器

还可以在文件内部定义过滤器，局部过滤器优先级高于全局，会优先调用。

<template>
  <div>
    {{ 17666666666 | privatePhone }}
  </div>
</template>
<script>
export default {
  filters: {
    privatePhone(val) {
      let mobile = val.toString()
      return mobile.substring(0, 3) + '****' + mobile.substring(8, 11)
    }
  }
}
</script>