vue封裝全局過濾器的方法詳解
1.找到utils下創(chuàng)建fifilter.js
一些常用的過濾方法
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瀏覽器有兼容性問題處理如下: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) { // 一分鐘以內(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í)間過濾器 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' // 定義全局自定義過濾器 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })
3.頁(yè)面使用
{{ item.createtime | dateFormat }}
到此這篇關(guān)于vue封裝全局過濾器的方法詳解的文章就介紹到這了,更多相關(guān)vue封裝全局過濾器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue項(xiàng)目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁(yè)面后狀態(tài)依然保持)
關(guān)于vue登錄注冊(cè),并保持登錄狀態(tài),是vue玩家必經(jīng)之路,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目如何保持用戶登錄狀態(tài)的相關(guān)資料,localStorage+vuex刷新頁(yè)面后狀態(tài)依然保持,需要的朋友可以參考下2022-05-05ant-design-vue 實(shí)現(xiàn)表格內(nèi)部字段驗(yàn)證功能
這篇文章主要介紹了ant-design-vue 實(shí)現(xiàn)表格內(nèi)部字段驗(yàn)證功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12Vue3實(shí)現(xiàn)自定義Input組件的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3自定義實(shí)現(xiàn)一個(gè)類似el-input的組件,可以v-model雙向綁定,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03Vue簡(jiǎn)單封裝axios網(wǎng)絡(luò)請(qǐng)求的方法
這篇文章主要介紹了Vue簡(jiǎn)單封裝axios網(wǎng)絡(luò)請(qǐng)求,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,對(duì)Vue封裝axios網(wǎng)絡(luò)請(qǐng)求相關(guān)知識(shí)感興趣的朋友一起看看吧2022-11-11