唐山建设网站的网站,缩短网址在线生成,电子商务网站建设与管理程序设计题6,做医院网站公司吗在vue3中使用全局filters已经不是必须#xff0c;有很多种替代方案(直接定义函数即可)。如果项目中使用了unplugin-auto-import插件完全可以将filters导出函数使其在全局自动引入/声明。当然在这里就不说插件的使用了。下面就详细说说如何实现
题外话: 强烈推荐使用 vueuse有很多种替代方案(直接定义函数即可)。如果项目中使用了unplugin-auto-import插件完全可以将filters导出函数使其在全局自动引入/声明。当然在这里就不说插件的使用了。下面就详细说说如何实现
题外话: 强烈推荐使用 vueuse该库由vue核心成员开发封装了各种常用hooks能够省很多不必要的开发时间且其中的封装hooks思想也很值得学习参考
最终效果如下图所示 1. filters工具函数建立及类型参数声明
在src/filters目录下新建 index.ts 及 types.ts 分别用于全局filters的注册及全局参数声明
// index.ts// useDateFormat 为 vueuse 提供的时间格式化hooks内部实现基于dayjs
import { useDateFormat } from vueuse/core;import type { App } from vue;export default function filters(app: App) {app.config.globalProperties.$filters {dateFormat: (date, format YYYY-MM-DD hh:mm:ss, options {}) {return useDateFormat(date, format, options).value;},};
}
// types.ts
import type { MaybeRefOrGetter, DateLike, UseDateFormatOptions } from vueuse/core;export interface Filter {dateFormat: (date: MaybeRefOrGetterDateLike,format?: MaybeRefOrGetterstring,options?: UseDateFormatOptions) string;
}
注types.ts导出接口声明主要用于在vue组件的ComponentCustomProperties中作声明使用
2. 注册全局filters
在入口文件 main.ts中引入并注册即可
// main.ts
import { createApp } from vue;
import filters from ./filters;const app createApp(App);
app.use(filters);
app.mount(#app);注册完之后就可以在页面中使用了不过因为目前还没有添加类型提示页面会爆红。
3. 为.vue文件添加filters类型声明
// global-properties.d
import type { Component } from vue;
import type { Filter } from ../src/filters/types;declare module vue {interface ComponentCustomProperties extendsComponent {$filters: Filter;}
}
注别忘了将该文件加入tsconfig.json的include配置项中否则在.vue文件的template中使用将不会出现类型提示。
在线代码可查看vue-sy-admin 简易模板可查看vue-vite-template
