Vue.mixin()的使用
Vue.mixin()实现一次代码,无限复用。Vue.mixin()官方说明。一句话解释,Vue.mixin()可以把你创建的自定义方法混入所有的Vue实例。使用 Vue.mixin()接下来的思路很简单,我们整合所有的filter函数到一个文件,在main.js中引入即可。在上代码之前打断一下,代码很简单,但是我们可以写的更加规范化,关于如何做到规范,在...
·
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
更多推荐
已为社区贡献5条内容
所有评论(0)