vue封裝全局過(guò)濾器的方法詳解
1.找到utils下創(chuàng)建fifilter.js

一些常用的過(guò)濾方法
export const filters = {
//url解碼
urlCode: value => {
if (!value) return ''
let v = decodeURIComponent(value)
let bigIndex = v.lastIndexOf('/')
let endIndex = v.lastIndexOf('.')
let url = v.substring(bigIndex + 1, endIndex) + v.substring(endIndex)
return url
},
dateFormat: value => {
if (!value) return ''
value = value * 1000
//new Date 在 ios safari瀏覽器有兼容性問(wèn)題處理如下:ios不支持2027-2-22 16:23,需要改為2027/2/22 16:23
// ? 兼容 ios safari : 兼容其他瀏覽器
let $this = new Date(value) == 'Invalid Date' ? new Date(date.replace(/-/g, "/")) : new Date(value)
var timestamp = parseInt(Date.parse($this)) / 1000 //- 8 * 60 * 60; //(本地時(shí)間)東八區(qū)減去8小時(shí);
// console.log(timestamp)
function zeroize(num) {
return (String(num).length == 1 ? '0' : '') + num;
}
var curTimestamp = parseInt(new Date().getTime() / 1000); //當(dāng)前時(shí)間戳
// console.log(curTimestamp)
var timestampDiff = curTimestamp - timestamp; // 參數(shù)時(shí)間戳與當(dāng)前時(shí)間戳相差秒數(shù)
var curDate = new Date(curTimestamp * 1000); // 當(dāng)前時(shí)間日期對(duì)象
var tmDate = new Date(timestamp * 1000); // 參數(shù)時(shí)間戳轉(zhuǎn)換成的日期對(duì)象
var Y = tmDate.getFullYear(),
m = tmDate.getMonth() + 1,
d = tmDate.getDate();
var H = tmDate.getHours(),
i = tmDate.getMinutes(),
s = tmDate.getSeconds();
if (timestampDiff < 60) { // 一分鐘以?xún)?nèi)
return "剛剛";
} else if (timestampDiff < 3600) { // 一小時(shí)前之內(nèi)
return Math.floor(timestampDiff / 60) + "分鐘前";
} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
return '今天 ' + zeroize(H) + ':' + zeroize(i)
} else {
var newDate = new Date((curTimestamp - 86400) * 1000); // 參數(shù)中的時(shí)間戳加一天轉(zhuǎn)換成的日期對(duì)象
if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
return '昨天 ' + zeroize(H) + ':' + zeroize(i)
} else if (curDate.getFullYear() == Y) {
return zeroize(m) + '月' + zeroize(d) + '日';
} else {
return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日';
}
}
},
// 時(shí)間過(guò)濾器
formatDate: value => {
if (value == undefined) {
return;
}
let date = new Date(value * 1000); //時(shí)間戳為10位需*1000,時(shí)間戳為13位的話不需乘1000
let Y = date.getFullYear() + '年';
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日';
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
return Y + M + D + h + m + s;
},
//微信時(shí)間
wxleftTime: value => {
if (value == undefined) {
return;
}
const date = new Date(value * 1000);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
if (new Date(Number(value) * 1000).toDateString() === new Date().toDateString()) {
return `${hours}:${minutes}`;
} else {
return `${year}/${month}/${day}`;
}
},
//千分位
numberToCurrencyNo: value => {
if (!value) return 0.00
// 獲取整數(shù)部分
const intPart = Math.trunc(value)
// 整數(shù)部分處理,增加,
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
// 預(yù)定義小數(shù)部分
let floatPart = ''
// 將數(shù)值截取為小數(shù)部分和整數(shù)部分
const valueArray = value.toString().split('.')
if (valueArray.length === 2) { // 有小數(shù)部分
floatPart = valueArray[1].toString() // 取得小數(shù)部分
return intPartFormat + '.' + floatPart
}
return intPartFormat + floatPart
}
}2.在main.js 注冊(cè)
import { filters } from './utils/filters'
// 定義全局自定義過(guò)濾器
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
3.頁(yè)面使用
{{ item.createtime | dateFormat }}
到此這篇關(guān)于vue封裝全局過(guò)濾器的方法詳解的文章就介紹到這了,更多相關(guān)vue封裝全局過(guò)濾器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解關(guān)于vue2.0工程發(fā)布上線操作步驟
這篇文章主要介紹了詳解關(guān)于vue2.0工程發(fā)布上線操作步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue watch內(nèi)部調(diào)用methods方法報(bào)錯(cuò)的解決方案
這篇文章主要介紹了vue watch內(nèi)部調(diào)用methods方法報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
解決vant的Cascader級(jí)聯(lián)選擇組建css樣式錯(cuò)亂問(wèn)題
這篇文章主要介紹了解決vant的Cascader級(jí)聯(lián)選擇組建css樣式錯(cuò)亂問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
從0搭建Vue3組件庫(kù)如何使用?glup?打包組件庫(kù)并實(shí)現(xiàn)按需加載
這篇文章主要介紹了從0搭建Vue3組件庫(kù)如何使用?glup?打包組件庫(kù)并實(shí)現(xiàn)按需加載,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03

