Vue3全局过滤器
解决方案
在Vue 2中，我们可以直接使用Vue.filter()来注册全局过滤器。在Vue 3中官方移除了内置的过滤器功能，但我们可以使用计算属性、方法或者组合式API来实现类似的功能，并通过插件的形式创建全局过滤器。
思路一：使用组合式API和插件
创建过滤器函数
ts
// filters.ts
export function formatDate(date: Date) {
return new Intl.DateTimeFormat('zh-CN').format(date)
}</p>
<p>export function toUpperCase(value: string) {
return value.toUpperCase()
}
创建插件
ts
// filterPlugin.ts
import { App } from 'vue'
import * as filters from './filters'</p>
<p>export default {
install(app: App) {
Object.keys(filters).forEach(key => {
app.config.globalProperties[<code>$${key}] = filters[key]
})
}
}
使用插件
ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import FilterPlugin from './filterPlugin'</p>
<p>const app = createApp(App)
app.use(FilterPlugin)
app.mount('#app')
在组件中使用
vue
<template>
<div>
<!-- 使用全局过滤器 -->
{{ $formatDate(new Date()) }}
{{ $toUpperCase('hello world') }}
</div>
</template>
思路二：使用自定义指令
创建指令
ts
// directives.ts
import { DirectiveBinding } from 'vue'</p>
<p>export const formatText = {
mounted(el: HTMLElement, binding: DirectiveBinding) {
el.textContent = (binding.value || '').toUpperCase()
}
}
注册指令
ts
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { formatText } from './directives'</p>
<p>const app = createApp(App)
app.directive('format', formatText)
app.mount('#app')
使用指令
vue
<template>
<div v-format="'hello world'"></div>
</template>
思路三：使用计算属性或方法
组件内部实现
vue</p>
import { computed } from 'vue'
function formatPrice(price: number) {
return `¥ ${price.toFixed(2)}`
}
const price = ref(123.456)
const formattedPrice = computed(() => formatPrice(price.value))
<p>
<div>
<!-- 使用计算属性 -->
{{ formattedPrice }}</p>
<pre><code><!-- 或者使用方法 -->
{{ formatPrice(789.123) }}
