Vue全局过滤器设置

vue全局过滤器设置

废话不多说，直接贴代码

import Vue from 'vue'

// 支付方式过滤
Vue.filter('payWay', value => {
    switch (value) {
        case 1:
            return '微信支付'
        case 2:
            return '会员充值'
    }
});

// 商品价格过滤（保留两位小数）
Vue.filter('price', (val) => {
    if(val){
		val ='¥' + val.toFixed(2)
	}else{
		val = 0;
		val ='¥' + val.toFixed(2)
	}
    return val;
})

// 价格设置（保留两位小数）
Vue.filter('money',(val = 0, len = 2)=>{
    return val && /^\-?\d+(\.\d+)?$/.test(val.toString()) ? (Math.round(val * (10 ** len)) / 10 ** len).toFixed(len) : '0.00'
})

// 货币过滤（三位加，保留两位小数）
Vue.filter('MoneyFormat',(money)=>{
    if (money && money != null) {
        money = String(money);
        var left = money.split('.')[0], right = money.split('.')[1];
        var tr = right.substr(2,1);
        let ri = 0;
        if(tr && tr > 4){
            ri = Number(right.substr(0, 2)) + 1;
        } else{
            ri = right.substr(0, 2);
        };
        console.log(tr);
        right = right ? (right.length >= 2 ? '.' + ri : '.' + right + '0') : '.00';
        var temp = left.split('').reverse().join('').match(/(\d{1,3})/g);
        return (Number(money) < 0 ? '-' : '') + temp.join(',').split('').reverse().join('') + right;
      } else if (money === 0) { 
        return '0.00';
      } else {
        return '';
      }
})

// 年/月/日 日期过滤
Vue.filter('formateTime', (val) => {
    let date = new Date(val);
    let year = date.getFullYear();
    let m = date.getMonth() + 1;
    let month = m > 9 ? m:'0'+m;
    let day = date.getDate();
    val = `${year}/${month}/${day}`;
    return val
})

// 年/月/日 时/分/秒 时间过滤
Vue.filter('formdate',(val)=>{
  const dt = new Date(val)
  const y = dt.getFullYear()
  const m = (dt.getMonth()+ 1 + '').padStart(2,'0')
  const d =(dt.getDate() + '').padStart(2,'0')
  const hh =(dt.getHours() + '').padStart(2,'0')
  const mm =(dt.getMinutes() + '').padStart(2,'0')
  const ss =(dt.getSeconds() + '').padStart(2,'0')
  return `${y}/${m}/${d} ${hh}:${mm}:${ss}`
})

//  小写转大写过滤
Vue.filter('toUpperCase',(e)=>{
    return  e.toUpperCase()
})

//  大写转小写过滤
Vue.filter('toLowerCase',(e)=>{
    return  e.toLowerCase()
})

// 隐藏手机号过滤
Vue.filter('phone',(e)=>{
   return e && e.toString().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
})
    
// 文本长度超出5个溢出隐藏过滤 
Vue.filter('ellipsis5',(val)=>{
    if (!val) return ''
        if (val.length > 5) {
            return val.slice(0,5) + '...'
        }
    return val
})

// 空格过滤
Vue.filter('trim',(val)=>{  
    return val.replace(/\s*/g,"");    
})


// 金额转人民币大写过滤
Vue.filter('MoneyChange',(n)=>{
    var fraction = ['角', '分', '厘'];
    var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '   玖'];
    var unit = [['元', '万', '亿'],['', '拾', '佰', '仟']];
    var head = n < 0 ? '欠人民币：' : '人民币：';
    n = Math.abs(n);
    var s = '';
    for (var i = 0; i < fraction.length; i++) {
    s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]   ).replace(/零./, '');
    }
    s = s || '整';
    n = Math.floor(n);
    for (var i = 0; i < unit[0].length && n > 0; i++) {
        var p = '';
            for (var j = 0; j < unit[1].length && n > 0; j++) {
                p = digit[n % 10] + unit[1][j] + p;
                 n = Math.floor(n / 10);
            }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
        //s = p + unit[0][i] + s;
    }
        return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');

})

// 首字母大写过滤
Vue.filter('indexUper',(val)=>{
    return val.charAt(0).toUpperCase() + val.slice(1)  
})

mian.js中直接引入

import './filters'

然后直接在结构中用就行了

 	<div> 支付方式：{{ 1 | payWay}} </div>

    <div> 商品价格：{{ 100.296 | price}} </div>

    <div> 价格设置：{{ 101.126 | money}} </div>

	![在这里插入图片描述](https://img-blog.csdnimg.cn/8a7a0da3c6ca4337868bee1e159cefc5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAU2xlZXBpbmdfRmFpcnk=,size_20,color_FFFFFF,t_70,g_se,x_16)
<div> 货币过滤：{{ 3247126.9293 | MoneyFormat}} </div>

    <div> 年/月/日：{{ 1632032196000 | formateTime}} </div>

    <div> 年/月/日 时/分/秒:{{ 1632032196000 | formdate}} </div>

    <div> 大写转换：{{ 'abc' | toUpperCase}} </div>

    <div> 小写转换：{{ 'CBA' | toLowerCase}} </div>

    <div> 手机号码：{{ 17798259325 | phone}} </div>

    <div> 文本长度过滤：{{ '文本长度超出5个后隐藏' | ellipsis5}} </div>

    <div> 过滤空格：{{ '     过滤空格  ' | trim}} </div>

    <div> 金额转人民币大写：{{ 21352.76 | MoneyChange}} </div>
    
	<div> 首字母大写：{{ 'hello world' | indexUper}} </div>

效果图如下：

注意（第二种设置全局过滤的方法）：

也可以在filters中新建一个全局global.js文件，将所有不同类型的过滤文件统一导出：

文件目录结构如下：

global.js:

export { accountType, getOrderState,paymentStatus } from './constant'
export { formatPriceShow, formatPriceWitchComma,priceInt } from './price'

constant.js:

// 财务结算-收支状态
export function paymentStatus(val) {
  return {
    0: '全部',
    1: '入账中',
    2: '已结算',
    3: '已退款'
  }[val]
}

用法和上面的区别在于第二种直接在模板字符串中直接用就行了，不需要在vue页面中二次引入