vue3+ts 挂载全局过滤器函数及踩坑总结
VUE3中移除了 filter,可以用全局函数替代
const app = createApp(App) //挂载全局函数 app.config.globalProperties.$filters = { userTypeFilter(type:number):string { return type+'-1' }, }
使用:虽然报错不存在属性 “$filters”,但是能正常使用,下面会讲解决方法
解决报错:在main.ts里面添加,解决方案来自@小满zs大佬的文章 https://blog.csdn.net/qq1195566313/article/details/123292042
type Filter = { format<T>(str: T): string } //声明文件 不然TS无法正确类型 推导 declare module 'vue' { // 声明要扩充@vue/runtime-core包的声明. // 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型. export interface ComponentCustomProperties { $filters: Filter } }
上面这种写法个人不太喜欢,如果函数数量少的话还能接受,如果多了会导致main.ts过于臃肿了,不美观,个人喜欢下面这种模块化的写法,将所有方法和声明文件分别写在一个文件里面导出,在main.ts中引入使用
import { createApp } from 'vue' import { createPinia } from 'pinia' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' import router from './router' //引入全局过滤函数 import * as allMethods from './untils/filter' //引入过滤类型文件,否则调用将报错找不到方法 import type Filter from './untils/filter.d' //声明文件 不然TS无法正确类型 推导 declare module 'vue' { // 声明要扩充@vue/runtime-core包的声明. // 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型. export interface ComponentCustomProperties { $filters: Filter } } const app = createApp(App) app.config.globalProperties.$filters = allMethods app.use(router) app.mount('#app')