正文

Vue如何封装多个全局过滤器到一个文件

IP云
IP云V管理员/7 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在写vue项目时，所用的过滤器很多时，把所有的过滤器方法封装在一个文件中，然后导出，并绑定在vue实例上

1.在 src 下创建filters文件夹，并新建 index.js 文件

2. index.js里面的代码 
import moment from 'moment'

const dateFormat = (input, fmtstring) => {

    // 使用momentjs这个日期格式化类库实现日期的格式化功能

    return moment(input).format(fmtstring);

}

const moneyFormat = value => {

    if (!value) return '0.00';

    /原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正/

    var intPart = Math.floor(value); //获取整数部分

    var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+)/g, '1,'); //将整数部分逢三一断

    var floatPart = ".00"; //预定义小数部分

    var value2Array = value.split(".");

    //=2表示数据有小数位

    if (value2Array.length == 2) {

        floatPart = value2Array[1].toString(); //拿到小数部分

        if (floatPart.length == 1) { //补0,实际上用不着

            return intPartFormat + "." + floatPart + '0';

        } else {

            return intPartFormat + "." + floatPart;

        }

    } else {

        return intPartFormat + floatPart;

    }

}

export {

    dateFormat,

    moneyFormat

}

3. main.js里面添加 
import * as filters from './filters'

Object.keys(filters).forEach(key => {

  Vue.filter(key, filters[key])

})
  1. 在.vue文件中就可以直接使用了 
<span>（{{item.add_time | dateFormat('YYYY-MM-DD HH:MM:SS')}}）</span>

相关阅读

目录[+]