【vue】使用全局filter方法

工具方法文件下新建一个文件filters.js

const filters = {
    /**
     * 功能：本地图片利用全局过滤器拼接cdn域名
     */
    fmtImgUrl(url) {
        const src = `${this.$cdnUrl}${url}`
        return src
    }
}
export default (Vue) => {
    Object.keys(filters).forEach(key => {
        Vue.filter(key, filters[key])
    })
}

main.js 引入

import Vue from 'vue'
import filters from './filters' //将全部过滤器放在 filters/index.js 中便于管理
//技巧 同时 use 多个插件 被依赖的插件应放在偏后方
filters(Vue )

全局filter 过滤图片URL拼接cdn前缀

 <img :src="'/order-merchant-phone.png'| fmtImgUrl()" class="shop-innerimg">