vue.mixin()怎么使用?

vue.mixin()怎么使用?下面本篇文章给大家介绍一下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 的模板文件中随意使用自定义函数了

1.png

2.png

这里用了两种时间转换的方法,一种是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

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是vue.mixin()怎么使用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏