Vue定義全域性過濾器filter

小白蔡發表於2020-04-21
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

詳細的大家可以看這:

https://www.jianshu.com/p/ad21df1914c5

相關文章