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了（过滤器里已经引入过了） 因为已经把方法都写在过滤器里了，直接使用定义的过滤器名字即可。。。