Vue如何引入全局過濾器
更新時間:2023年01月23日 12:47:17 作者:呱呱?.?
這篇文章主要介紹了Vue如何引入全局過濾器問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
Vue引入全局過濾器
創(chuàng)建單獨的文件
加上時間過濾函數(shù)
將formatDate 暴露export 出來
// 時間戳轉(zhuǎn)時分秒 function getformatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ''; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); } } return fmt; }; function padLeftZero (str) { return ('00' + str).substr(str.length); }; // 時間過濾 export function formatDate(time) { return getformatDate(new Date(time), "yyyy-MM-dd hh:mm"); }
在main.js中全局引入
import * as filters from './filters' // global filters // register global utility filters. Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })
在組件中使用formatDate過濾時間戳
<el-table :data="item.children" style="width: 100%"> <el-table-column prop="title" label="標題"></el-table-column> <el-table-column prop="portName" label="上傳單位"></el-table-column> <el-table-column prop="createdTime" label="上傳時間"> <template slot-scope="scope">{{scope.row.createdTime | formatDate}}</template> </el-table-column> </el-table>
頁面顯示
vue全局過濾器配置
有時一個過濾器需要在項目中多次使用,此時可以將該過濾器定義為全局過濾器,全局過濾器在main.js下配置。
以時間過濾器為例,當為局部過濾器寫為:
filters: { ? timeForm(val) { ? ? ? ? ? if (typeof (value) == "undefined" || value === null) return ""; ? ? ? ? ? let date = new Date(value); ? ? ? ? var y = date.getFullYear(); ? ? ? ? var m = date.getMonth() + 1; ? ? ? ? var d = date.getDate(); ? ? ? ? if (isNaN(y) && y != 0) { ? ? ? ? ? y = " "; ? ? ? ? } ? ? ? ? if (isNaN(m) && m != 0) { ? ? ? ? ? m = " "; ? ? ? ? } else { ? ? ? ? ? (m < 10 ? "0" + m : m); ? ? ? ? } ? ? ? ? if (isNaN(d) && d != 0) { ? ? ? ? ? d = " "; ? ? ? ? } else { ? ? ? ? ? (d < 10 ? "0" + d : d); ? ? ? ? } ? ? ? ? ? return y + "-" + m + "-" + d + " " + date.toTimeString().substr(0, 5); }
現(xiàn)在我們把它設(shè)置成全局過濾器
Vue.filter('timeForm', function (value) { ? if (typeof (value) == "undefined" || value === null) return ""; ? ? let date = new Date(value); ? var y = date.getFullYear(); ? var m = date.getMonth() + 1; ? var d = date.getDate(); ? if (isNaN(y) && y != 0) { ? ? y = " "; ? } ? if (isNaN(m) && m != 0) { ? ? m = " "; ? } else { ? ? (m < 10 ? "0" + m : m); ? } ? if (isNaN(d) && d != 0) { ? ? d = " "; ? } else { ? ? (d < 10 ? "0" + d : d); ? } ? return y + "-" + m + "-" + d + " " + date.toTimeString().substr(0, 5); }); var timeForm = Vue.filter('timeForm');
- 直接定義為:Vue.filter('timeForm', function (value) { //過濾代碼}
- 然后定義一下過濾器:var timeForm = Vue.filter('timeForm')
使用的時候和局部過濾器相同方式使用,直接{{ value | filter }} 即可
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js實現(xiàn)簡單ToDoList 前期準備(一)
這篇文章主要介紹了Vue.js實現(xiàn)簡單ToDoList的前期準備,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12vue 實現(xiàn)路由跳轉(zhuǎn)時更改頁面title
今天小編就為大家分享一篇vue 實現(xiàn)路由跳轉(zhuǎn)時更改頁面title,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue計算屬性computed--getter和setter用法
這篇文章主要介紹了vue計算屬性computed--getter和setter用法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue打印插件vue-print-nb的實現(xiàn)代碼
這篇文章主要介紹了vue打印插件vue-print-nb的實現(xiàn),需要引入插件npm install vue-print-nb --save,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03