Vue定义全局过滤器filter及自定义函数挂载到全局方法Vue定义全局过滤器filter 这里介绍的是多个过滤器一起添

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Vue定义全局过滤器filter

这里介绍的是多个过滤器一起添加到全局中

1.创建方法

首先src下新建plugin文件夹，用来存放插件。

在plugin文件夹内新建filters.js，编写方法（如隐藏手机号码等等...）

/**
 * 隐藏手机号码
 * @param val {Number, String} 转换的字符串对象
 * @param retain {Number} 保留位数
 * @return {String}
 */
export privatePhone = function(val,retain = 4){
    if(!NUMBER(val) || String(val).length !== 11 || retain==0 ) return val;
    let phone = String(val)
    let digit = 11 - 3 - retain
    let reg = new RegExp(`^(\\d{3})\\d{${digit}}(\\d{${retain}})$`)
    return mobile.replace(reg,`$1${'*'.repeat(digit)}$2`)
}

2.添加到Vue全局中

在main.js中引入,添加

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

3.使用

使用方法有两种

a.在双花括号插值（用的较多）

{{ phone | privatePhone }}

b.在v-bind表达式中使用

<div v-bind:data=" phone | privatephone "></div>

PS:

参数的写法：上述代码中privatePhone的第一个参数即是phone

基础的大家可以看这:

www.jianshu.com/p/ad21df191…

Vue自定义函数挂载到全局方法

看了很多方法介绍，基本思路是，定义方法->在main.js中引入->就能全局使用，提高代码的复用性。我这里只写下工作中常见和常用的方法

使用export default + install + Vue.prototype

方法写在哪，怎么写，一般按项目规则和个人习惯

我这里以$http为例

1.创建request文件夹，创建index.js文件,写入方法

const $http = function(...){ //全局方法最好用$开头
	...
}
export default vueHttp = {
	install(Vue){
        ...
        Object.defineProperty(Vue.prototype,'$http',{
            value:$http,
            writable:false
        })//这里使用了数据绑定的方法，下面给出学习链接
    }
}
export {$http}

2.在main.js中写入函数

import http from '@/request'
Vue.use(http)

3.在所有组件里可调用函数

this.$http(...);

数据绑定学习链接:www.jianshu.com/p/c02cb881b…

参考：