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

川长思鸟来 2021-11-16 17:38 674阅读 0赞

--------------------

**多读多写多记录，多学多练多思考。----------- 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、到此全局过滤器已经引入完毕，下面直接在页面中使用即可，使用方法：

<p>{
       {date | formatDate}}</p>
    
    
     //注：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、引入完毕之后就可以在页面中直接使用该变量：

<el-table
          ref="multipleTable"
          border
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;"
          @selection-change="handleSelectionChange"
    
          :max-height="this.$var.table_height"
    
          @row-click="details"
          stripe
        >
    </el-table>
    
    //这里是使用的element-ui中的table表格，写高度之后超出会出现竖向滚动条

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