Vue.mixin()的使用

Vue.mixin() 实现一次代码，无限复用。 

Vue.mixin() 官方说明。

一句话解释，Vue.mixin() 可以把你创建的自定义方法混入所有的 Vue 实例。

使用 Vue.mixin()

接下来的思路很简单，我们整合所有的 filter 函数到一个文件，在 main.js 中引入即可。

在上代码之前打断一下，代码很简单，但是我们可以写的更加规范化，关于如何做到规范，在 Vue 的官网有比较详细的 风格指南 可以参考。

1.创建一个mixin.js 文件，用于保存所有的自定义函数

时间戳(精确到毫秒)转yyyy-mm-dd hh:mm:ss

export default {
  methods: {
    /** 格式化时间戳 */
    MixinUnixToDate(timeStamp) {
      let date = new Date();
      date.setTime(timeStamp);  // 精确到毫秒、如果没有到毫秒就 date.setTime(timeStamp*1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? ('0' + m) : m;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? ('0' + minute) : minute;
      second = second < 10 ? ('0' + second) : second;
      return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    },
    /**
     * 计算传秒数的倒计时【天、时、分、秒】
     * @param seconds
     * @returns {{day : *, hours : *, minutes : *, seconds : *}}
     */
    countTimeDown(date1) {
      var time = '';
      var date2 = new Date();    //当前系统时间
      var date3 = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数
      var hours = Math.floor(date3 / (3600 * 1000)); //相差小时
      if (hours > 0) {
        time = hours + '小时前更新'
        if (hours > 24) {//如果小时大于24，计算出天和小时
          var day = parseInt(hours / 24);
          hours %= 24;//算出有多分钟
          time = day + '天' + hours + '小时前更新'
        }
      } else {
        //计算相差分钟数
        var leave2 = date3 % (3600 * 1000);      //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000));
        if (minutes > 0) {
          time = minutes + '分钟前更新';
        } else {
          time = '刚刚更新';
        }
      }
      return time;
    },

  }
}

 

2.main.js引入mixin.js方法集

import mixin from './mixin'

Vue.mixin(mixin)

 

3.接下来，我们就可以在 .vue 的模板文件中随意使用自定义函数了

这里用了两种时间转换的方法，一种是MixinUnixToDate自写js转换时间  打印于43行。

另一种是安装moment使用时间戳npm install --save moment

//main.js
import Vue from 'vue'
import moment from 'moment'
Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})

更新这里的时间戳问题：

Vue.filter('moment', function (value, formatString) {
  formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
  if(value == 0 || value == null || value == ""){
    return '-'
  }else{
    return moment(value).format(formatString);
  }
})

判断下后台返回的是否有值，如果没有用-替换，否则不能转换显示错误

{{scope.row.createTime | moment('YYYY-MM-DD')}}  这里的moment自定义的，前面我用的dateformat