全局过滤器

vue 过滤器 官方文档 (opens new window)，在阅读本文档前，请对该方法的使用有一定了解。

优点

• 不会改变原数据，只改变输出结果；
• 注册为全局时，无需引入，可在任意 template 中使用。

使用场景

• 格式化时间，如将时间戳转为 Y-m-d H:i:s 格式；本项目将后端返回短视频秒数转为 00:00 格式；
• 将年月日转化为多久前；本项目中评论等时间使用了该方式。

1 目录结构

└─ src                          # 项目主文件
   └─ filters                   # 全局过滤器
      └─ index.js               # 过滤器方法

2 过滤器介绍

说明：以下两个过滤器方法，引自 utils 工具方法中

2.1 过滤器定义

// dateBefore 传入日期，返回多少时长前，主要用于评论等发布时间，如刚刚、5分钟前
// timeFormat 传入秒数，返回`00:00`结构，主要用于视频时长格式化，如 07:32
import { dateDiff, dayDiff } from '@/util/index'

export { dateDiff, dayDiff }

2.2 过滤器注册

过滤器在 main.js 中注册

// 全局过滤器
import * as filters from './filters/index'

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

2.3 过滤器使用

<!-- 照片列表，全局过滤器无需引入即可使用 -->
<time class="time">{{ photo.created_at | dateDiff }}</time>