vue引入全局过滤器，引入全局公共方法，引入全局变量

---

多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)

---

一、首先我们先看vue项目中引入全局过滤器的方式：

       1、先在src文件夹下新建JS文件夹，用来存放我们新建的js文件

       2、在我们新建的JS文件夹下新建filters.js文件，存放过滤器的代码           

// 时间戳转年月日时分秒
function getformatDate(date, fmt) {
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
    };
    for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + '';
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ?
                str : padLeftZero(str));
        }
    }
    return fmt;
}
function padLeftZero(str) {
    return ('00' + str).substr(str.length);
};
// 时间过滤     
export function formatDate(time) {
    var date = new Date(time * 1000);
    return getformatDate(date, 'yyyy-MM-dd hh:mm:ss');
}

        这里柚子只是写了一个时间戳转化年月日时分秒的过滤器，如果有需要其他过滤器的朋友，可以留言我们共同讨论！！！

      3、js文件写好之后，我们就可以在main.js中进行全局引入了，只需在main.js中加入以下代码即可：

// 引入过滤器
import * as filters from './JS/filters.js'
// register global utility filters.
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

     4、到此全局过滤器已经引入完毕，下面直接在页面中使用即可，使用方法：

{
    {date | formatDate}}


 //注：date是时间戳

二、vue引入全局公共的js方法：

      1、在刚才创建的JS文件夹下新建function.js文件，用来存放我们的js方法： 

export default {
    findIndex(l, o) {
        var objStr = JSON.stringify(o);
        return l.reduce((index, ele, i) => {
            if (JSON.stringify(ele) === objStr) {
                return i;
            } else {
                return index;
            }
        }, -1);
    }
}

              这里柚子写了一个数组中查找指定元素下标的方法以供参考！

       2、在main.js中进行全局引入：

// 引入公共方法
import fun from './JS/function.js'
Vue.prototype.$fun = fun

       3、引入完毕之后就可以在页面中直接使用该方法了：

var idx = this.$fun.findIndex(this.arr,el);

//注：this.arr是数组，el为元素，idx就是你要找的元素在数组中的下标，不存在则为-1

三、vue引入全局变量：

      1、首先JS文件夹下新建variable.js文件，用来存放全局变量：

const table_height = `${document.documentElement.clientHeight}`//表格高度
export default {
  table_height,//表格高度
}

//这里我定义了一个表格高度的变量，所有页面的表格均可使用

     2、在main.js中进行全局引入：

// 引入全局变量文件
import variable from './JS/variable.js'
Vue.prototype.$var = variable

3、引入完毕之后就可以在页面中直接使用该变量：

//这里是使用的element-ui中的table表格，写高度之后超出会出现竖向滚动条

ok，到此不管是全局过滤器，全局方法还是全局变量都已引入完毕，希望能帮助到一些朋友！！！