Vue 使用dayjs結合filter過濾器格式化日期

參考了：https://qtdebug.com/html/java-vue-adventure

格式化日期的插件有moment.js和day.js,這里我用的是day.js

npm 下載：npm install dayjs --save

在需要的頁面中引入 也可以在main.js中全局引入：import dayjs from 'dayjs'

使用前：

 

 

 使用后：

 

 

 上面是直接使用day .js ,我們也可以結合過濾器使用，其實就是把格式化的方法寫在過濾器中，在頁面直接使用過濾器即可。。

 首先在單獨建一個filter.js 代碼如下，這里我定義了兩個過濾器 分別表示不同的規則。

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
dayjs.extend(relativeTime)
console.log(dayjs())
const filters = {
  /**
   * 功能：將時間戳按照給定的 時間/日期 格式進行處理
   * @param {Number} date 時間戳
   * @returns {String} 規范后的 時間/日期 字符串
   */
  formatDate: function (date) {
    if (!date) {
      return '---';
    }
    return dayjs(date).format('YYYY-MM-DD dddd'); // 使用 dayjs 格式化時間
  },
  
  fmtTime(date) {
    if (dayjs().diff(dayjs(date), 'minutes') > 1) {
      return dayjs(date).fromNow()
    }
    return dayjs(date).format('YYYY-MM-DD HH:mm') // 使用 dayjs 格式化時間
  }
}
export default Vue => {
  Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
  })
}

然后在main.js 中引入filter.js

最后就可以在頁面中使用過濾器了：這次就不用引入day.js了（過濾器里已經引入過了） 因為已經把方法都寫在過濾器里了，直接使用定義的過濾器名字即可。。。