vue全局使用过滤器
1、创建一个js文件//全局封装性别类型展示export function getSex (sexStatus){letsexName = ''if (sexStatus != null) {switch (sexStatus) {case '0': sexName = "男"break;case '1': sexName = "女"br
·
1、创建一个js文件
//全局封装性别类型展示
export function getSex (sexStatus) {
let sexName = ''
if (sexStatus != null) {
switch (sexStatus) {
case '0': sexName = "男"
break;
case '1': sexName = "女"
break;
default: sexName = "未知"
}
} else {
sexName = "未知"
}
return sexName;
}
// yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合
export function timeFormat(dateTime = null, fmt = 'yyyy-mm-dd') {
// 如果为null,则格式化当前时间
if (!dateTime) dateTime = Number(new Date());
// 如果dateTime长度为10或者13,则为秒和毫秒的时间戳,如果超过13位,则为其他的时间格式
if (dateTime.toString().length == 10) dateTime *= 1000;
let date = new Date(dateTime);
let ret;
let opt = {
"y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日
"h+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分
"s+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加,必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
}
}
return fmt;
}
function timeFrom(dateTime = null, format = 'yyyy-mm-dd') {
// 如果为null,则格式化当前时间
if (!dateTime) dateTime = Number(new Date());
// 如果dateTime长度为10或者13,则为秒和毫秒的时间戳,如果超过13位,则为其他的时间格式
if (dateTime.toString().length == 10) dateTime *= 1000;
let timestamp = + new Date(Number(dateTime));
let timer = (Number(new Date()) - timestamp) / 1000;
// 如果小于5分钟,则返回"刚刚",其他以此类推
let tips = '';
switch (true) {
case timer < 300:
tips = '刚刚';
break;
case timer >= 300 && timer < 3600:
tips = parseInt(timer / 60) + '分钟前';
break;
case timer >= 3600 && timer < 86400:
tips = parseInt(timer / 3600) + '小时前';
break;
case timer >= 86400 && timer < 2592000:
tips = parseInt(timer / 86400) + '天前';
break;
default:
// 如果format为false,则无论什么时间戳,都显示xx之前
if(format === false) {
if(timer >= 2592000 && timer < 365 * 86400) {
tips = parseInt(timer / (86400 * 30)) + '个月前';
} else {
tips = parseInt(timer / (86400 * 365)) + '年前';
}
} else {
tips = timeFormat(timestamp, format);
}
}
return tips;
}
export default { getSex, timeFormat, timeFrom}
2、在main.js中引入全局过滤,这里使用循环,可以在上述js中添加更多的过滤方法
import filters from "./filters/index"
// 添加全局filter
Object.keys(filters).map(v => {
Vue.filter(v, filters[v])
})
3、组件中使用
<template>
<div>{{sex | getSex}}</div>
</template>
<script>
export default {
data(){
return{
sex:'0'
}
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)