vue-cli工作中如何自定义一个过滤器？

文件结构：

.
├── src
│   ├── filter
│   │    ├── filter.js
│   │    
│   └── main.js
└── ...

过滤器们放在filter文件夹下

filter/filter.js：

这个文件主要是写了过滤器实现的方法，然后export进行导出。

function filterOne(n){
    return n + 10;
}
function filterTwo(n){
    return n + 5;
}
export{
    filterOne,
    filterTwo
}

main.js：

// 找 filter/filter.js
import * as filters from './filter/filter.js'
//遍历所有导出的过滤器并添加到全局过滤器
Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key]);
})

在 .vue 组件下使用

{{test | filterOne}}

问题二：vue-cli工作中常用的过滤器

在 .vue 组件中的使用示例：

{{ string | trim(1) }} //去除所有空格，过滤器第一个参数为value

常用的过滤器，filter/filter.js

//去除空格  type 1-所有空格  2-前后空格  3-前空格 4-后空格
function trim(value, trim) {
    switch (trim) {
        case 1:
            return value.replace(/s+/g, "");
        case 2:
            return value.replace(/(^s*)|(s*$)/g, "");
        case 3:
            return value.replace(/(^s*)/g, "");
        case 4:
            return value.replace(/(s*$)/g, "");
        default:
            return value;
    }
}
//任意格式日期处理
//使用格式：
// {{ '2018-09-14 01:05' | formaDate(yyyy-MM-dd hh:mm:ss) }} 
// {{ '2018-09-14 01:05' | formaDate(yyyy-MM-dd) }} 
// {{ '2018-09-14 01:05' | formaDate(MM/dd) }} 等
function formaDate(value, fmt) {
    var date = new Date(value);
    var o = {
      "M+": date.getMonth() + 1, //月份
      "d+": date.getDate(), //日
      "h+": date.getHours(), //小时
      "m+": date.getMinutes(), //分
      "s+": date.getSeconds(), //秒
      "w+": date.getDay(), //星期
      "q+": Math.floor((date.getMonth() + 3) / 3), //季度
      "S": date.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o) {
      if(k === 'w+') {
        if(o[k] === 0) {
          fmt = fmt.replace('w', '周日');
        }else if(o[k]

vue-cli工作中如何自定义一个过滤器？

相关推荐