使用方法
import Vue from "vue";
在双花括号中:
{{ message | timeFilter }}
{{message | filterA | filterB}}
{{message | fliterA('arg1',arg2)}}
在 v-bind 简写:中:
<div :id="rawId | timeFilter></div>
//时间戳转换为"yyyy-MM-dd HH:mm:ss"格式
Vue.filter("timeFilter", function (val) {
var unixtimestamp = new Date(val);
var year = 1900 + unixtimestamp.getYear();
var month = "0" + (unixtimestamp.getMonth() + 1);
var date = "0" + unixtimestamp.getDate();
var hour = "0" + unixtimestamp.getHours();
var minute = "0" + unixtimestamp.getMinutes();
var second = "0" + unixtimestamp.getSeconds();
return (
year +
"-" +
month.substring(month.length - 2, month.length) +
"-" +
date.substring(date.length - 2, date.length) +
" " +
hour.substring(hour.length - 2, hour.length) +
":" +
minute.substring(minute.length - 2, minute.length) +
":" +
second.substring(second.length - 2, second.length)
);
});
Vue.filter("dateTimeFormat", function (date, fmt = 'yyyy-MM-dd HH:mm:ss') { //日期时间格式化
if (!date) {
return ''
}
if (typeof date === 'string') {
date = date.replace('T', ' ').replace('Z', '');
date = new Date(date.replace(/-/g, '/'))
}
if (typeof date === 'number') {
date = new Date(date)
}
var o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() + 3) / 3),
'S': date.getMilliseconds()
}
var week = {
'0': '\u65e5',
'1': '\u4e00',
'2': '\u4e8c',
'3': '\u4e09',
'4': '\u56db',
'5': '\u4e94',
'6': '\u516d'
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
if (/(E+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[date.getDay() + ''])
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt
});
秒、毫秒转时分秒显示 例:65000 => 00:01:05
参数:isMs 是否是毫秒;dft:默认显示
Vue.filter('timeLongFormat', function (value, isMs = false, dft = '00:00:00') {
let total = parseInt(value);
if (!isNaN(total)) {
if (isMs) {
total = total / 1000;
}
let hours = parseInt(total / 3600);
let minutes = parseInt((total % 3600) / 60);
let seconds = parseInt((total % 3600) % 60);
let h = hours > 9 ? hours : '0' + hours;
let m = minutes > 9 ? minutes : '0' + minutes;
let s = seconds > 9 ? seconds : '0' + seconds;
return h + ':' + m + ':' + s;
} else {
return dft;
}
});
/秒、毫秒(时长)格式化为时分秒(中文)(例:65000ms => 1分5秒)
Vue.filter("timeLongFormat_zh", function (valuevalue, isMs = false, dft = '--') {
let total = parseInt(value);
if (!isNaN(total)) {
if (isMs) {
total = total / 1000;
}
let hours = parseInt(total / 3600);
let minutes = parseInt((total % 3600) / 60);
let seconds = parseInt((total % 3600) % 60);
let h = hours == 0 ? "" : `${hours}时`;
let m = minutes == 0 ? "" : `${minutes}分`;
let s = seconds == 0 ? "" : `${seconds}秒`;
return h + m + s;
} else {
return dft;
}
});
Vue.filter("serviceStatus", function (value) {
if (value == "1") {
return "未审核";
} else if (value == "2") {
return "已审核";
} else if (value == "3") {
return "已完成";
} else if (value == "5") {
return "已确认";
} else if (value == "4") {
return "已驳回";
}
});
Vue.filter("statusFilter", function (value) {
if (value == "UNPAID") {
return "未支付";
} else if (value == "PAID") {
return "已支付";
} else if (value == "PAYING") {
return "支付中";
} else if (value == "ERROR") {
return "退款";
}
});
字典表中获取的下拉选项过滤
Vue.filter("codeFilter", function (val, list) {
list &&
list.forEach(item => {
if (item.itemValue == val) {
val = item.itemName;
}
});
return val;
});
AccessKey-hidden
Vue.filter("accessKeyHiddenFilter", function (val) {
if (val && val.length == 32) {
val = val.substring(0, 8) + "****************" + val.substring(25);
}
return val;
});
格林时间转换成北京时间
Vue.filter('greenTime', function (time) {
//时间处理为空
if (time == null) {
return "--"
}
var unixtimestamp = new Date(time)
var year = 1900 + unixtimestamp.getYear()
var month = '0' + (unixtimestamp.getMonth() + 1)
var date = '0' + unixtimestamp.getDate()
var hour = '0' + unixtimestamp.getHours()
var minute = '0' + unixtimestamp.getMinutes()
var second = '0' + unixtimestamp.getSeconds()
return (
year +
'-' +
month.substring(month.length - 2, month.length) +
'-' +
date.substring(date.length - 2, date.length) +
' ' +
hour.substring(hour.length - 2, hour.length) +
':' +
minute.substring(minute.length - 2, minute.length) +
':' +
second.substring(second.length - 2, second.length)
)
});
/保留小数
Vue.filter("toFixed", function (val, acc) { //保留小数位,acc为保留几位小数位
let num = parseFloat(val);
if (isNaN(num)) {
num = 0;
}
let accuracy = parseInt(acc);
if (isNaN(accuracy) || accuracy < 0 || accuracy > 10) {
accuracy = 2;
}
return num.toFixed(accuracy);
});
转百分比
Vue.filter("toPercent", function (val, acc) { //小数转百分比 ,acc为保留小数位
let num = parseFloat(val);
if (isNaN(num)) {
num = 0;
}
let accuracy = parseInt(acc);
if (isNaN(accuracy) || accuracy < 0 || accuracy > 10) {
accuracy = 2;
}
return (num * 100).toFixed(accuracy) + "%"
});
byte转K、M、G
Vue.filter("bytesToSize", function (bytes) { //文件大小单位转换
if (bytes === 0) {
return '0 B'
};
var k = 1024;
var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
var i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(4) + ' ' + sizes[i];
});
数据源是对象的键值转换
Vue.filter("objectKeyToValueConverter", function (val, keyValueObject) {
var isExists = _.has(keyValueObject, val);
if (isExists) {
return keyValueObject[val];
}
return "";
});
重在分享代码,觉得有用,记得点赞收藏,谢谢