vue公用函数封装

1.与当前页面的操作无关，纯方法，不会用到当前页面(调用该方法的页面)的数据或者this，比如实现如下功能，某个页面需要获取服务器时间并同步变化，需要用到以下方法：获取服务器时间，时间戳 转成 时间字符串 ，以及正则验证非负整数：
新建一个commonFun.js

const commonFun = {
    getServiceTime : (cb)=>{
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new window.XMLHttpRequest();
        }else{ 
            xhr = new ActiveObject("Microsoft")
        }
       
        xhr.open("get","/getserviceTime_false");//任意随便写个url，404没关系
        xhr.send(null);
    
        xhr.onreadystatechange = function(){
            var time = null;
            if(xhr.readyState===2){
                // 获取响应头里的时间戳
                time = xhr.getResponseHeader("Date");
                // console.log(xhr.getAllResponseHeaders())
   
                if(cb && typeof cb == 'function')
                    cb(new Date(time).getTime());
            }
        }
    },
    formatDate : (thisDate = null,ifHour = true,ifToday = false) => {
        // 不准用今天，且没有日期
        if(!ifToday && !thisDate){
            return '-';
        }

        if(commonFun.testIntSpe(thisDate) && typeof thisDate == 'string'){
            thisDate = Number(thisDate);
        }

        let myDate = !thisDate?new Date():new Date(thisDate),
            year = myDate.getFullYear(),
            month = myDate.getMonth() + 1,
            date = myDate.getDate(),
            hour = myDate.getHours(),
            minute = myDate.getMinutes(),
            second = myDate.getSeconds();

        month = month < 10 ? '0' + month : month;
        date = date < 10 ? '0' + date : date;
        hour = hour < 10 ? '0' + hour : hour;
        minute = minute < 10 ? '0' + minute : minute;
        second = second < 10 ? '0' + second : second;

        let arr1 = [year,month,date],
            arr2 = [hour,minute,second];

        return arr1.join('-') + (ifHour?(' '+arr2.join(':')):'');
    },
    testIntSpe : (num) => {
        return (/^[1-9]+\d*$/.test(num) || num === 0 || num === '0')
    },
};

export default commonFun

在main.js里面,可以把commonFun挂载在vue上面 Vue.prototype.$commonFun = commonFun; 这样就不用每个页面都引入commonFun了。下面是在具体页面使用获取服务器时间：

created(){
    let me = this;

    me.$commonFun.getServiceTime((time_s)=>{
        if(time_s){
            setInterval(()=>{
                time_s -= 1000;
                me.serviceTime = me.$commonFun.formatDate(time_s);
            },1000)
        }
    });
},

2.与当前页面的操作有关系，比如很多页面的删除 几乎都差不多，可以写成公用方法，又或者 页面表格有展开显示的功能，如下图：表头的操作是批量展开隐藏，由hideMore控制，每行的操作是单个显示隐藏，由单个数据的hideMore控制。

image.png

新建一个unit.js

// 全部展开收起
let showMoreAllTpl = function(){//因为this问题，这里不能使用箭头函数
    let me = this;//这里的this 即调用这个函数的页面的this，所以可以获取到页面上面的数据
    me.hideMore = !me.hideMore;

    me.tableData.forEach(function(v,i){
        v['hideMore'] = me.hideMore;
    })
}

// 单个展开收起
let showMoreThisTpl = function(val,ind){
    let me = this;
    let cloneData = [...me.tableData];
    cloneData[ind].hideMore = !val.hideMore;
    me.tableData = cloneData;

    let allHide = me.tableData.every(function(v){
        return v.hideMore
    })
    if(allHide){
        me.hideMore = true
    }

    let allShow = me.tableData.every(function(v){
        return !v.hideMore
    })
    if(allShow){
        me.hideMore = false
    }
}

let deleteTpl = function(id){
    let me = this;

    me.$confirm('温馨提示： 您是否确认要删除此条数据，id：'+id, '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        me.$ajax.delete(me.baseUrl,{id:id})
        .then(res =>{
            me.$message({
                type: 'success',
                message: '删除成功！',
                duration : me.$globalConfig.duration_short,
                onClose : function(){
                    if(me.tableData.length == 1 && me.search.index > 1){
                        me.search.index -= 1;
                    }
                    me.loadPage();
                }
            });
        }).catch(error=>console.log(error))
    }).catch(() => {
               
    });
}

export {
    showMoreAllTpl,
    showMoreThisTpl,
    deleteTpl
}

具体页面调用如下：

import {showMoreAllTpl,showMoreThisTpl} from "../../function/unit";

export default {
    data(){
        return{
            tableData : [],
            hideMore : true,//默认收起
        }
     },
    methods : {
         showMoreAllTpl,
         showMoreThisTpl,
    }
}