指南
基于 Ant Design Vue 部分组件的封装和扩展，提供更适配桌面端的高阶组件
| 组件 | 名称 | 描述 | 相关文档 |
|---|
| SIcon | 图标组件 | 支持 Props 中 type 字段，动态渲染 @ant-design/icons-vue 中图标，也支持 iconfont 配置 | 详情 |
| SIconSelect | 图标选择器 | 图标 Selection 下拉框，默认使用 @ant-design/icons-vue 中图标作为选项，也支持自定义选项 | 详情 |
| SEditCell | 单元格编辑框 | 表格 Cell 编辑框，支持 date-picker、input、select、textarea、tree-selec、s-icon-select 等组件适配 | 详情 |
| SEllipsis | 文字省略提示 | 基于 ATooltip 的封装，支持实时计算内容是否超出父元素边界，是否需要文字省略和 Tooltip 提示 | 详情 |
| STable | 表格组件 | 不是 ATable 的封装，支持 列拉伸/拖拽/属性配置，单元格合并/卡槽定义，Checkbox/Radio、内置分页等功能 | 详情 |
| SForm | 表单组件 | 支持 Groups 配置渲染表单内容，也支持卡槽自定义组件。(Group: ARate、ARadio、AInput、ASwitch ...) | 详情 |
| STree | 树形组件 | 借助 ATree 的 checkStrictly="true" 特性，重新实现了 勾选/选中/展开/异步加载 等逻辑，并扩展了其 API | 详情 |
安装
适配支持 Ant Design Vue 4.x
pnpm add @antd-templater/library-3.x@^4.3.20
pnpm add @antd-templater/eslint-config@^1.0.7
适配支持 Ant Design Vue 3.x
pnpm add @antd-templater/library-3.x@^3.0.2
如何使用
全局注册使用
import App from "./App.vue"
import AntdComponentPlugin from "@antd-templater/library-3.x"
createApp(App)
.use(AntdComponentPlugin)
.mount("#app")
自动按需导入使用
/* in vite.config.ts */
import { defineConfig } from 'vitest/config'
import { AntdLibraryResolver } from '@antd-templater/library-3.x/resolver'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import AutoComponents from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import VueJsx from '@vitejs/plugin-vue-jsx'
import Vue from '@vitejs/plugin-vue'
export default defineConfig(() => {
return {
plugins: [
AutoComponents({
resolvers: [
AntdLibraryResolver(),
AntDesignVueResolver({
resolveIcons: true,
importStyle: 'less',
}),
],
include: [
/\.[tj]sx?/,
/\.vue\?vue/,
/\.vue$/,
],
}),
AutoImport({
resolvers: [
AntdLibraryResolver(),
],
eslintrc: {
enabled: true,
filepath: './.eslintrc-auto-import.json',
globalsPropValue: true,
},
dts: true,
}),
VueJsx(),
Vue(),
],
}
})
TypeScript 和 ESLint 支持
TypeScript: `@antd-templater/library-3.x/globals`
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["@antd-templater/library-3.x/globals"]
}
}
ESlint: `@antd-templater/eslint-config`
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import vueParser from "vue-eslint-parser";
import pluginVue from "eslint-plugin-vue";
import stylistic from "@stylistic/eslint-plugin";
import templater from "@antd-templater/eslint-config"; // [!code highlight]
const flatArray = (options) => {
return !Array.isArray(options) ? [options] : options;
};
export default tseslint.config({
extends: [
...flatArray(eslint.configs.recommended),
...flatArray(tseslint.configs.recommended),
...flatArray(stylistic.configs["recommended-flat"]),
...flatArray(pluginVue.configs["flat/recommended"]),
...flatArray(templater.configs["flat/recommended"]), // [!code highlight]
],
});
