指南

基于 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 | 详情 |

安装

pnpm add @antdvr/library-3.x@^4.3.0
pnpm add @antdvr/eslint-config-3.x@^4.3.0

pnpm add @antdvr/library-3.x@^3.0.0

如何使用

import App from "./App.vue"
import ComponentPlugin from "@antdvr/library-3.x"

createApp(App)
  .use(ComponentPlugin)
  .mount("#app")

/* in vite.config.ts */

import { defineConfig } from 'vitest/config'
import { AntdvLibraryResolver } from '@antdvr/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: [
          AntdvLibraryResolver(),
          AntDesignVueResolver({
            resolveIcons: true,
            importStyle: 'less',
          }),
        ],
        include: [
          /\.[tj]sx?/,
          /\.vue\?vue/,
          /\.vue$/,
        ],
      }),
      AutoImport({
        resolvers: [
          AntdvLibraryResolver(),
        ],
        eslintrc: {
          enabled: true,
          filepath: './.eslintrc-auto-import.json',
          globalsPropValue: true,
        },
        dts: true,
      }),
      VueJsx(),
      Vue(),
    ],
  }
})

TypeScript 和 ESLint 支持

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["@antdvr/library-3.x/globals"]
  }
}

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 antdvr from "@antdvr/eslint-config-3.x";

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"]),
    ...flatArray(pluginVue.configs["flat/recommended"]),
    ...flatArray(antdvr.configs["flat/recommended"]),
  ],
});