### 创建和配置
全局时间格式化
过滤器
在
Vue 3 中虽然官方不再支持
过滤器作为内置特性，但仍然可以通过组合 API 和插件机制来实现相同功能。对于希望创建一个能够
全局使用的时间格式化工具来说，推荐采用自定义指令或 Composition API 的方式。
为了保持代码的一致性和易维护性，在 `main.
js`
文件中
引入第三方库 `day
js` 或者继续沿用 `moment` 来处理日期格式化问题[^4]。下面展示如何利用 Composition API 实现这一目标：
#### 安装依赖包
首先安装所需的日期处理库，这里以 `day
js` 为例：
```bash
npm install day
js
```
#### 配置
全局方法
编辑
项目的入口
文件 `main.
js` ，添加如下代码片段用于注册
全局属性 `$filters` :
```javascript
import { createApp } from '
vue'
import App from './App.
vue'
import day
js from 'day
js'
// 自定义
全局过滤器对象
const globalProperties = {
$filters: {
formatDate(date, fmt='YYYY-MM-DD HH:mm:ss') {
return day
js(date).format(fmt);
}
}
}
const app = createApp(App)
app.config.globalProperties = Object.assign(app.config.globalProperties, globalProperties);
export default app.mount('#app')
```
这样做的好处在于可以在模板内像调用原生
过滤器那样方便地使用这个新加入的方法:
```html
<template>
<div>{{ someDate | formatDate }}</div> <!-- 不再适用 -->
<div>{{ $filters.formatDate(someDate) }}</div> <!-- 推荐写法 -->
</template>
<script setup>
import { ref } from '
vue';
let someDate = ref(new Date());
</script>
```
此外还可以进一步封装成插件形式以便更灵活地管理多个类似的辅助函数。
扫一扫
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
