深色模式
全局配置
我们为部分组件提供了一些自定义扩展配置选项,用于使组件行为或特性更加符合被引用项目的规范
全局分页数据格式化
由于不同的项目中分页 API 返回的数据格式可能有所不同,当前组件库中默认的分页数据格式如下:
ts
interface PageListResponse {
currentPage: number; // 当前页码
pageSize: number; // 每页记录数
total: number; // 总记录数
records: object[]; // 当前页数据
}1
2
3
4
5
6
2
3
4
5
6
因此,当您的项目中分页数据字段与上述不符时,您可以使用 pageFieldsMap 自定义映射字段名称
使用示例:分页数据格式为 { current: number; pageSize: number; total: number; rows: object[] }
js
import { createApp } from "vue";
import ElementPlusPro from "@easyui/element-plus-pro";
import "@easyui/element-plus-pro/index.css";
import App from "./App.vue";
const app = createApp(App);
app.use(ElementPlusPro, {
pageFieldsMap: {
currentPage: "current",
records: "rows"
}
});
app.mount("#app");1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
全局字体图标前缀声明
实际开发中,同一个项目中可能会使用多个字体图标文件,其中不同文件中图标的可能会存在命名冲突的风险。 考虑到上述情况,我们支持您以键值对({ 图标前缀: 图标文件路径 })的形式为每个图标文件声明特定的图标前缀。 组件库安装后会根据您提供的图标文件地址自动将对应的图标文件导入到您的项目中。
使用示例:导入 iconfont1.js 及 iconfont2.js 图标文件,并分别声明前缀为 icon1 和 icon2
js
import { createApp } from "vue";
import ElementPlusPro from "@easyui/element-plus-pro";
import "@easyui/element-plus-pro/index.css";
import App from "./App.vue";
const app = createApp(App);
app.use(ElementPlusPro, {
iconSourceMap: {
"icon1": new URL("./assets/icons/iconfont1.js", import.meta.url).href,
"icon2": new URL("./assets/icons/iconfont2.js", import.meta.url).href
}
});
app.mount("#app");1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13