2020-07-24 vue全局filter和在项目中的做法

过滤器大家都懂，不多说，有些常用的过滤器（时间格式化等）如果每用一次在组件写一次的话会造成代码冗余，而且复用性差，在项目中比较好的做法是在src下建立一个filters目录，把所有的filter写在一个文件里（index.js）：

index.js：

const timeFormat = (value, format) => {
    let date = new Date(value);
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    let h = date.getHours();
    let min = date.getMinutes();
    let s = date.getSeconds();
    let result = "";
    if (format == undefined) {
        result = `${y}-${m < 10 ? "0" + m : m}-${d < 10 ? "0" + d : d} ${
            h < 10 ? "0" + h : h
            }:${min < 10 ? "0" + min : min}:${s < 10 ? "0" + s : s}`;
    }
    if (format == "yyyy-mm-dd") {
        result = `${y}-${m < 10 ? "0" + m : m}-${d < 10 ? "0" + d : d}`;
    }
    if (format == "yyyy-mm") {
        result = `${y}-${m < 10 ? "0" + m : m}`;
    }
    if (format == "mm-dd") {
        result = ` ${mm < 10 ? "0" + mm : mm}:${ddmin < 10 ? "0" + dd : dd}`;
    }
    if (format == "hh:mm") {
        result = ` ${h < 10 ? "0" + h : h}:${min < 10 ? "0" + min : min}`;
    }
    if (format == "yyyy") {
        result = `${y}`;
    }
    return result;
};

//字母大小写切换
/*type
 1:首字母大写
 2：首页母小写
 3：大小写转换
 4：全部大写
 5：全部小写
 * */
const changeCase = (str, type) => {
    function ToggleCase(str) {
        var itemText = ""
        str.split("").forEach(
            function (item) {
                if (/^([a-z]+)/.test(item)) {
                    itemText += item.toUpperCase();
                } else if (/^([A-Z]+)/.test(item)) {
                    itemText += item.toLowerCase();
                } else {
                    itemText += item;
                }
            });
        return itemText;
    }
    switch (type) {
        case 1:
            return str.replace(/\b\w+\b/g, function (word) {
                return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();
            });
        case 2:
            return str.replace(/\b\w+\b/g, function (word) {
                return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
            });
        case 3:
            return ToggleCase(str);
        case 4:
            return str.toUpperCase();
        case 5:
            return str.toLowerCase();
        default:
            return str;
    }
}

export {
    timeFormat,
    changeCase
}

然后在main.js全局注册一下：

import * as filters from './filters/index'

Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

就可以在组件内使用啦：

（//附带了一个实时刷新页面时间的实现）

<template>
  <div>
    <div>原生new Date():{{date}}</div>
    <div>过滤之后：{{date|timeFormat}}</div>
    <div>全部小写:{{str|changeCase(5)}}</div>
    <div>全部大写:{{str|changeCase(4)}}</div>
    <div>大小写互换:{{str|changeCase(3)}}</div>
  </div>
</template>
<script>
export default {
  name: "GrammerTest",
  data() {
    return {
      date: new Date(),
      str:'GGGGyyyyy'
    };
  },
  mounted() {
    let _this = this;
    this.timer = setInterval(function () {
      _this.date = new Date();
    });
  },
  beforeDestroy: function() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>