# SD Design Vue Docs Source site: https://sd-design.js.org/ ## SD Design Source: https://sd-design.js.org/ 面向企业级 Vue 项目的简体中文组件文档与设计实践入口。 --- ## 组件总览 Source: https://sd-design.js.org/components/ 按分类浏览全部组件文档。 全部组件入口按 sidebar 自动编排,卡片说明优先复用各组件文档 frontmatter 中的 description,避免总览页重复维护同一份信息。 --- ## 设计指引 Source: https://sd-design.js.org/design/guidelines/ 预留中的设计指引页面,后续会补充布局、配色、组件模式与文案规范。 该页面已预留,后续会补充 SD Design 的设计指引,包括布局、配色、组件模式与文案规范。 --- ## 设计价值观 Source: https://sd-design.js.org/design/values/ 预留中的设计价值观页面,后续会补充体验原则与判断标准。 该页面已预留,后续会补充 SD Design 的设计价值观、体验原则与判断标准。 --- ## 暗黑模式 Source: https://sd-design.js.org/guides/dark/ 组件库内置暗色的主题,你可以轻易的切换到暗色。 ## 切换到暗黑模式 组件库通过带有 `sd-theme` 属性的主题容器来标明当前模式。最外层应用可以继续直接修改 `body`,但从现在开始,你也可以在任意局部容器上切换暗黑模式。 ```ts document.body.setAttribute('sd-theme', 'dark'); document.body.removeAttribute('sd-theme'); ``` ## 局部暗黑模式 如果你只想让某个区域进入暗黑模式,可以直接给容器设置 `sd-theme`: ```html
``` 更推荐的方式是通过 `ThemeProvider` 或 `ConfigProvider` 统一管理局部主题模式和运行时 theme 对象: ```vue ``` 如果同时还需要 locale、rtl、size 等全局配置,再使用 `ConfigProvider`: ```vue ``` `theme-mode="dark"` 会在当前子树内创建一个真正的主题容器。它不仅会切换 `sd-theme`,也会把当前 `theme` 对象对应的 CSS variables 一起分发到这个子树。 ## 原理和内置颜色 可参考 [暗黑模式](https://arco.design/react/docs/palette) 和 [颜色](https://arco.design/react/docs/palette) --- ## 常见问题 Source: https://sd-design.js.org/guides/faq/ 组件库使用中的常见问题解答 ## 受控与非受控 SD Design Vue 组件库中使用了 `受控` 的概念,正如其名,组件的显示状态将始终与传入值相同。我们推荐通过受控模式来使用输入组件。 这时可以通过 `双向绑定(v-model)` 或者 `change` 事件来修改 `model-value` 的值,来保证组件内部与外部的值相同。 在受控模式中,如果希望控制显示的值,可以使用 `change` 事件进行处理。 如果我们不希望控制组件的值,可以使用非受控模式,此时组件的值将维护在组件内部,可以通过 `default-value` 来设置初始值。非受控模式下可以通过 `change` 事件来获取组件的值。 特别注意:`default-*` 类属性用来设置非受控模式下的初始值,不会影响后续的状态。此值与受控值同时使用时,受控值优先生效。 ## 下拉菜单的滚动跟随 下拉菜单默认会跟随 window 滚动条的变化更新位置,如果将包含下拉菜单的组件放置在一个可滚动的容器中,会出现容器滚动时下拉菜单没有更新位置的问题,此时可以通过组件内部的 trigger 配置,将 `updateAtScroll` 设置为 `true` 开启滚动更新的支持。 如果项目内此场景较多,可以通过 [ConfigProvider](/components/config-provider/) 组件全局开启此属性。 ## 虚拟列表的使用 支持设置虚拟列表的组件包括 [List](/components/list/)、[Select](/components/select/)、[Tree](/components/tree/),以及复用这些能力的 `AutoComplete`、`Cascader`、`TreeSelect`。当前版本的虚拟列表能力已经切换到 `vue-virtual-scroller`,并继续使用组件库内置 `Scrollbar`。`Table` 本次不在新语义范围内。 虚拟列表元素的渲染分为 **固定高度**、**动态高度** 两种情况:固定高度请使用 `itemSize`,动态高度请使用 `minItemSize`。完整迁移说明见 [虚拟列表迁移](/guides/virtual-list-migration/)。 | 参数名 | 描述 | 类型 | 默认值 | 版本 | | --- | --- | --- | :-: | :-- | | keyField | 用于提取每项唯一键,支持字段名或函数 | `string \| ((item, index) => string \| number)` | `'key'` | | | itemSize | 固定高度模式的 item 高度,传入后使用 `RecycleScroller` | `number \| string \| ((item, index) => number)` | `-` | | | minItemSize | 动态高度模式的最小 item 高度;未传 `itemSize` 时使用 `DynamicScroller` | `number \| string` | `32` | | | buffer | 额外渲染缓冲区 | `number` | `200` | | --- ## Naive UI 迁移 Source: https://sd-design.js.org/guides/naive-ui-migration/ 从 Naive UI 迁移到 SD Design Vue 的常用组件差异与改造建议。 ## 文本省略 Ellipsis 本次已完成 `naive-ui` 的 `Ellipsis` 能力迁移,并适配到 SD Design Vue 现有的 Tooltip / Trigger 体系。 迁移后的能力包含: - 单行省略 - 多行省略 - 点击展开 - 自定义提示内容 - 高性能渲染版本 `PerformantEllipsis` ### 对应关系 | Naive UI | SD Design Vue | 说明 | | --- | --- | --- | | `NEllipsis` | `sd-ellipsis` / `Ellipsis` | 常规文本省略组件 | | `NPerformantEllipsis` | `sd-performant-ellipsis` / `PerformantEllipsis` | 大量列表场景下的轻量版本 | | `#tooltip` | `#tooltip` | 保留同名插槽,用于自定义提示内容 | | `:tooltip="false"` | `:tooltip="false"` | 关闭浮层提示,退回原生 `title` | | `line-clamp` | `line-clamp` | 多行省略写法保持一致 | ### 主要差异 1. 在 SD Design Vue 中,省略提示直接复用组件库内置的 Tooltip,不需要再额外包一层 Tooltip 组件。 2. `tooltip` 除了支持 `true` / `false`,也支持直接传入 Tooltip 配置对象,例如 `position`、`mini`、`popupContainer` 等。 3. `PerformantEllipsis` 首屏先输出纯 CSS 省略结果,只有在用户真正交互后才会激活完整的 `Ellipsis` 能力,更适合长列表。 4. 文档和业务代码里如果是模板直接使用,推荐优先使用 `sd-ellipsis`、`sd-performant-ellipsis` 标签;如果在 `script` 中显式导入,推荐从稳定子入口导入对应组件。 ### 迁移前后示例 #### 基础用法 ```vue ``` ```vue ``` #### 多行省略 ```vue ``` ```vue ``` #### 自定义提示内容 ```vue ``` ```vue ``` #### 高性能渲染 ```vue ``` ```vue ``` ### 建议的迁移顺序 1. 先把 `n-ellipsis` 替换成 `sd-ellipsis`,保持原有 `line-clamp`、`tooltip` 插槽等写法不变。 2. 如果原页面是表格、大列表或虚拟列表,再把热点位置替换为 `sd-performant-ellipsis`。 3. 如果原来依赖外层 `n-tooltip` 包裹省略内容,优先改成 `sd-ellipsis` 自身的 `tooltip` 属性或 `tooltip` 插槽。 4. 对文档或示例页,除了在线编辑器,也要检查实际预览里的首轮 hover / focus / click 表现是否正常。 ### 本次迁移结果 本次迁移在 SD Design Vue 中补齐了以下交付物: - `Ellipsis` 组件源码、样式、导出与注册链路 - `PerformantEllipsis` 组件与对应测试 - 文档页、组件总览、侧边栏入口 - 单行省略、自定义提示内容、文档预览行为等回归修复 如果你正在从 Naive UI 逐步迁移,建议优先以这套 `Ellipsis` / `PerformantEllipsis` 对应关系作为替换模板。 --- ## 快速上手 Source: https://sd-design.js.org/guides/start/ 跟随以下的步骤,快速上手组件库的使用。 ## Vue 版本 vue >= 3.2.0 **注意**:由于 `Vue3` 不再支持 IE 浏览器环境,SDVue 也不再支持 IE 浏览器环境。 ## 安装 ```shell # npm npm install --save-dev @sdata/web-vue # yarn yarn add --dev @sdata/web-vue # 自动导入解析器 pnpm add -D @sdata/web-vue-auto-import-resolver unplugin-vue-components ``` ## 完整引入 ```ts const app = createApp(App); app.use(SDVue); app.mount('#app'); ``` ## 按需加载(模板) 如果使用模板方式进行开发,可以使用 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 和 `@sdata/web-vue-auto-import-resolver` 开启按需加载和组件自动导入。插件会自动解析模板中的组件,并导入组件和对应的样式文件。 注意:`@sdata/web-vue-auto-import-resolver` 当前不支持 SSR。SSR 项目请使用完整引入,或在服务端渲染方案里自行处理组件与样式加载。 ```ts export default defineConfig({ plugins: [ vue(), Components({ resolvers: [ SdDesignResolver({ sideEffect: true, }), ], }), ], }); ``` 注意:这种方法只会处理模板里使用到的组件。如果你在 `script` 里手动导入了 `Message` 之类的 API,仍然需要按实际使用场景手动处理样式入口。 如果你的项目调整了 `app.use(SDVue, { componentPrefix })` 的组件前缀,也可以把同样的前缀传给解析器: ```ts SdDesignResolver({ prefix: 'Acme', sideEffect: true, }); ``` ## 全局配置 在引入 SDVue 时,可以传入一个全局配置对象。 ```ts const app = createApp(App); app.use(SDVue, { componentPrefix: 'sd', }); app.mount('#app'); ``` ## 浏览器兼容性 以下版本号基于当前 [Browserslist 配置](https://web.dev/baseline?hl=zh-cn)自动生成: - and_chr>=119 - and_ff>=120 - chrome>=119 - edge>=119 - firefox>=120 - ios_saf>=17.0 - safari>=17.0 --- ## 样式迁移手册 Source: https://sd-design.js.org/guides/style-migration/ 从 Less 主题覆盖迁移到 Scss + CSS variables + ConfigProvider theme 对象的步骤与风险说明。 这次样式升级把主题能力拆成三层:Scss token 基础层、运行时 CSS variables、ConfigProvider theme 对象。迁移目标不是把 Less 全量翻译成 Scss,而是把真正需要长期维护的主题入口收敛成一份可序列化的 theme JSON。 ## 推荐迁移步骤 1. 盘点现有 Less modifyVars,只保留仍然影响业务品牌识别的变量。 2. 将品牌色、中性色、背景色和圆角优先映射到 tokens。 3. 用 ConfigProvider theme 对象先在关键页面验证视觉结果,再逐步清理旧的 Less 覆盖。 4. 对于仍未迁移到 CSS variable 消费链路的字号、间距类 token,先记录在迁移清单中,不要同时改业务样式和组件源码。 ## Less 到 theme 对象的思路 | 旧能力 | 新能力 | 说明 | | --- | --- | --- | | modifyVars 覆盖全局品牌色 | tokens.primary5/6/7 | 直接驱动按钮、链接、焦点态与浅色层 | | modifyVars 覆盖中性色 | tokens.colorNeutral2/3/8/10 | 直接影响输入框、卡片、文本层级 | | Less 中维护导出的主题包 | 主题 JSON 下载与上传 | 更适合跨项目共享与版本管理 | | 零散组件变量覆盖 | components.componentName.tokenName | 用于描述组件级偏移,后续继续完善消费链路 | ## 风险说明 - 不是所有历史 token 都已经进入运行时 CSS variable 消费链路。当前最稳定的是颜色和圆角,字号与间距仍在持续迁移中。 - components 级覆盖已经能进入归一化和变量分发链路,但部分组件样式还没有完全消费这些 override 变量。 - 同一页面上可以并存多个局部 ConfigProvider 主题区域。每个区域会在自身子树下维护变量容器,不再依赖 body 级覆盖。 ## 与 Naive UI 迁移的关系 主题迁移和组件 API 迁移应该分开处理: - 先确认视觉 token 是否落在新的 theme 对象协议里 - 再处理 Naive UI 组件替换与行为差异 如果你当前同时在做组件替换,可以结合 [Naive UI 迁移](/guides/naive-ui-migration/) 一起推进。 --- ## Tailwind 搭配使用 Source: https://sd-design.js.org/guides/tailwind/ 在 SD Design 组件库中与 Tailwind CSS v3/v4 共存的完整实践,覆盖样式优先级、Layer、Preflight、主题 Token 映射与排障。 本手册用于解决以下高频问题: - 原子类不生效(例如给按钮加 padding 没效果) - 组件样式被 Tailwind Preflight 冲掉(例如按钮背景变透明) - 局部主题和站点主题互相影响 - 想在 Tailwind 原子类中直接消费组件库主题变量 ## 适用范围 - 组件库:@sdata/web-vue - Tailwind:v3 / v4 - 构建工具:Vite(其他构建工具同理) 浏览器兼容目标请以项目当前 Browserslist 为准。对于 CSS Layer 等特性,建议确保目标浏览器满足现代能力基线。 ## 组件库 Reset 策略(重要) `@sdata/web-vue` 已内置基于 Tailwind v4 Preflight 的 reset 基线,并放在 `sd-design` layer。 这意味着: 1. 业务项目没有安装 Tailwind:组件库也能正常工作 2. 业务项目安装了 Tailwind:组件库仍可正常工作,不要求业务方改 Tailwind 源码 设计原则: - 组件库基于 Tailwind v4 reset 语义构建 - 不修改 Tailwind 本身的规则语义 - 通过 layer 顺序处理与业务 utilities 的优先级关系 ## 问题根因 Tailwind 与组件库共存时,本质是三类样式在竞争: 1. 浏览器默认样式重置(Tailwind Preflight) 2. 组件库样式(sd.css / web-vue.css) 3. 业务原子类(utilities) 如果顺序和优先级不稳定,就会出现: - utilities 覆盖不了组件默认规则 - Preflight 把组件基础样式重置掉 ## 推荐方案(现代浏览器) 推荐使用 CSS Layer 显式声明优先级。 目标顺序: - base(含 Preflight)最低 - sd-design(组件库)居中 - utilities(业务原子类)最高 ### Tailwind v4 新建样式入口,例如 src/styles/app.css: ```css @layer theme, base, sd-design, components, utilities; @import 'tailwindcss'; @import '@sdata/web-vue/dist/sd.css' layer(sd-design); ``` 在应用入口最前面引入: ```ts ``` 要点: - layer 顺序声明必须在任何 layer 使用前加载 - 组件库样式要放进同一 sd-design layer,否则会出现权重漂移 - 业务项目可保留 Tailwind Preflight;若希望减少重复 reset,可在业务侧关闭 Preflight(可选) ### Tailwind v3 新建样式入口,例如 src/styles/app.css: ```css @layer tailwind-base, sd-design, tailwind-components, tailwind-utilities; @layer tailwind-base { @tailwind base; } @layer tailwind-components { @tailwind components; } @layer tailwind-utilities { @tailwind utilities; } @import '@sdata/web-vue/dist/sd.css' layer(sd-design); ``` 入口文件中确保该 CSS 第一时间加载。 ## 备选方案(不使用 Layer) 如果你的构建链路暂时无法稳定使用 Layer,可采用保守方案: 1. 关闭 Preflight 2. 对 utilities 提升优先级 Tailwind 配置示例: ```js // tailwind.config.js module.exports = { corePlugins: { preflight: false, }, important: '#app', }; ``` 说明: - 该方案会改变全局原子类输出策略 - 组件库仍包含自身 reset,不依赖业务方是否启用 Preflight - 建议仅作为过渡,优先回到 Layer 方案 ## 与局部主题共存(重点) 组件库支持通过 ThemeProvider / ConfigProvider 实现局部主题作用域。 实践建议: 1. 局部主题演示默认使用 ThemeProvider(仅主题能力) 2. 需要 locale/rtl/size 等再用 ConfigProvider 3. 不要在局部演示中写入 body 级主题属性 4. 不要在 demo 外层注入会污染文档站的全局变量 示例: ```vue ``` ## 在 Tailwind 中使用组件库主题 Token ### Tailwind v4(推荐) 在 Tailwind 入口 CSS 中声明 @theme 映射: ```css @import 'tailwindcss'; @theme { --color-sd-primary-6: rgb(var(--primary-6)); --color-sd-neutral-10: var(--color-neutral-10); --color-sd-bg-2: var(--color-bg-2); --radius-sd-md: var(--border-radius-medium); } ``` 使用方式: - text-sd-neutral-10 - bg-sd-bg-2 - rounded-sd-md ### Tailwind v3 在 tailwind.config.js 中做 extend 映射: ```js module.exports = { theme: { extend: { colors: { 'sd-primary-6': 'rgb(var(--primary-6) / )', 'sd-neutral-10': 'var(--color-neutral-10)', 'sd-bg-2': 'var(--color-bg-2)', }, borderRadius: { 'sd-md': 'var(--border-radius-medium)', }, }, }, }; ``` ### 完整版:自动生成 Token 映射(含 GitHub raw) 如果你希望避免手写 token,建议直接从组件库源码拉取并生成。 组件 Token 源文件(raw): - https://raw.githubusercontent.com/liunnn1994/sd-design/main/packages/web-vue/components/style/theme/css-variables.scss - https://raw.githubusercontent.com/liunnn1994/sd-design/main/packages/web-vue/components/style/theme/global.scss 下面脚本会从 `css-variables.scss` 提取变量名,生成两个产物: 1. Tailwind v4 的 `@theme` 映射块 2. Tailwind v3 的 `theme.extend` 片段 ```js // scripts/generate-sd-tailwind-tokens.mjs const RAW_URL = 'https://raw.githubusercontent.com/liunnn1994/sd-design/main/packages/web-vue/components/style/theme/css-variables.scss'; const response = await fetch(RAW_URL); if (!response.ok) { throw new Error(`Failed to fetch token source: ${response.status}`); } const source = await response.text(); // 从 `#{theme.$sd-cssvars-prefix}-token-name:` 里提取 token-name const tokenMatches = [...source.matchAll(/\$sd-cssvars-prefix\}-([a-z0-9-]+):/g)]; const tokenNames = [...new Set(tokenMatches.map((match) => match[1]))].sort(); const isRgbToken = (name) => { return /^(primary|success|warning|danger|link|gray)-\d+$/.test(name); }; const toTailwindKey = (name) => `sd-${name}`; const v4ThemeBlock = [ '@theme {', ...tokenNames.map((name) => { const value = isRgbToken(name) ? `rgb(var(--${name}))` : `var(--${name})`; return ` --color-${toTailwindKey(name)}: ${value};`; }), '}', ].join('\n'); const v3ColorEntries = tokenNames .map((name) => { const value = isRgbToken(name) ? `'rgb(var(--${name}) / )'` : `'var(--${name})'`; return ` '${toTailwindKey(name)}': ${value},`; }) .join('\n'); const v3ExtendBlock = [ 'theme: {', ' extend: {', ' colors: {', v3ColorEntries, ' },', ' },', '},', ].join('\n'); await writeFile('tailwind.sd-theme.v4.css', `${v4ThemeBlock}\n`, 'utf8'); await writeFile('tailwind.sd-theme.v3.cjs', `${v3ExtendBlock}\n`, 'utf8'); console.log(`Generated ${tokenNames.length} tokens.`); console.log('Output: tailwind.sd-theme.v4.css, tailwind.sd-theme.v3.cjs'); ``` 执行方式: ```bash node scripts/generate-sd-tailwind-tokens.mjs ``` 产物接入方式: - v4: 将 `tailwind.sd-theme.v4.css` 合并到你的入口 CSS(`@import "tailwindcss"` 后) - v3: 将 `tailwind.sd-theme.v3.cjs` 内容合并到 `tailwind.config.js` ## 兼容性与降级策略 ### CSS Layer - 优点:从机制上解决 Preflight 与组件样式、业务原子类的优先级关系 - 风险:低版本浏览器支持较弱 - 降级:使用 PostCSS 的 cascade-layers 相关插件做构建降级 ### 逻辑属性与现代选择器 组件库样式中会使用现代 CSS 特性(如逻辑属性、低优先级选择器策略等)。若你有更低版本浏览器诉求,建议在项目构建侧统一做 PostCSS 降级,而不是在业务代码中逐点修补。 ## 入口顺序检查清单 发布前请逐项确认: 1. Layer 顺序声明文件在入口最前引入 2. Tailwind 入口与组件库样式都进入预期 layer 3. 业务 utilities 能覆盖组件默认间距/排版等规则 4. 按钮、输入框、卡片在 light/dark 下可读性正常 5. 局部主题切换不会影响文档站导航与外层文本 ## 常见故障排查 ### 现象 1:按钮背景透明 原因:Preflight 覆盖了组件按钮基础样式。 处理: - 优先启用 Layer 方案并校正顺序 - 临时方案可关闭 preflight ### 现象 2:原子类对组件无效 原因:utilities 优先级低于组件规则。 处理: - 确认 utilities 在更高 layer - 无 Layer 时启用 important 前缀策略 ### 现象 3:局部主题影响整站文案颜色 原因:局部演示把主题写到了 body 或写入了全局变量。 处理: - 使用 ThemeProvider 子树隔离 - 严禁 demo 直接改 body 主题属性 ## 推荐落地路径 1. 先接入 Layer(v4 或 v3 对应方案) 2. 再接入 ThemeProvider 局部主题演示 3. 最后做 Tailwind Token 映射 4. 用页面快照和交互回归验证 light/dark 与 utilities 覆盖链路 ## 相关文档 - [快速上手](/guides/start/) - [定制主题](/guides/theme/) - [主题编辑器](/guides/theme-editor/) - [样式迁移手册](/guides/style-migration/) --- ## 定制主题 Source: https://sd-design.js.org/guides/theme/ 使用 ConfigProvider 的 theme 对象在运行时覆盖 CSS variables,并统一输出可分享的主题 JSON。 SD Design 现在以 ConfigProvider 的 theme 对象作为主题入口。你不需要再把主题能力绑定到 Less modifyVars,而是直接在运行时传入 tokens、components 和 meta 三个层级。 ## 组件级 ThemeProvider 现在支持真正的组件级主题切换。你可以直接使用 `ThemeProvider` 包裹某个局部区域,让 `sd-theme` 和对应的 CSS variables 只在这个子树内生效。 ```vue ``` 如果你已经在用 `ConfigProvider`,也可以直接通过 `theme` 和 `theme-mode` 这两个配置项得到同样的局部主题容器能力。 注意:局部容器不会覆盖挂载到 `body` 的浮层节点(例如 Popover、Tooltip、Select 下拉)。这类场景需要全局主题能力(`global`)。 ## 主题对象结构 ```ts interface SDThemeConfig { tokens?: Record; components?: Record>; meta?: { name?: string; schemaVersion?: number; cssVarPrefix?: string; }; } ``` 推荐的约定: - tokens 存放全局颜色、圆角、语义中性色等可跨组件复用的变量 - components 存放组件级覆盖,用于表达某个组件相对全局 token 的偏移 - meta 用来标记 schemaVersion、导出名称和 CSS 变量前缀 ## 基本用法 ```vue ``` ## CSS variables 约定 Scss 迁移后的组件样式优先消费 CSS variables。当前已经稳定使用的变量主要集中在三类: - 颜色变量:如 primary1 到 primary7、colorNeutral2 到 colorNeutral10、colorBg2、colorBg5 - 语义浅色层:如 colorPrimaryLight1 到 colorPrimaryLight4、danger 和 success 的 light 层 - 圆角变量:如 borderRadiusSmall、borderRadiusMedium、borderRadiusLarge 你传入的 token key 会先被归一化,再注入成 CSS 变量。例如: - primary6 会变成 --primary-6 - colorNeutral10 会变成 --color-neutral-10 - borderRadiusMedium 会变成 --border-radius-medium ## 主题编辑器 如果想查看主题结构和 JSON 约定,参考 [主题编辑器说明](/guides/theme-editor/)。 ## 迁移建议 - 新项目直接使用 theme 对象,不再新增 Less modifyVars 覆盖 - 已有 Less 主题先抽取出主品牌色、中性色和圆角,映射到 tokens - 需要迁移步骤和风险说明时,查看 [样式迁移手册](/guides/style-migration/) --- ## 主题编辑器 Source: https://sd-design.js.org/guides/theme-editor/ 运行时 theme 对象约定与 JSON 结构说明。 SD Design 的主题协议已经统一为 ConfigProvider 的 theme 对象。以下是主题结构与导入导出约定: - 可以切换默认、暗色、紧凑、品牌色、赛博朋克等预设主题 - 可以直接编辑 meta、tokens、components,覆盖运行时可调参数 - 可以下载带 schemaVersion 的 JSON,也可以上传 JSON 进行兼容性校验 ## 适用场景 - 设计和研发一起确认组件在新品牌色下的可读性 - 迁移 Less 定制主题时,先用全局 token 对照出浮层与正文一致效果 - 给业务线输出可复用的主题 JSON,而不是单独维护一份散落的样式覆盖 ## JSON 约定 ```json { "meta": { "schemaVersion": 1, "cssVarPrefix": "--", "name": "Campaign Theme" }, "tokens": { "primary6": "230,57,122", "colorBg2": "#fff8fb", "borderRadiusMedium": "14px" }, "components": { "button": { "borderRadius": "14px" } } } ``` 上传时会执行三类校验: - schemaVersion 必须和当前文档站支持的版本一致 - 至少需要包含 tokens 或 components 其中之一 - token 值只能是字符串或数字,避免把嵌套对象误传进来 --- ## 虚拟列表迁移 Source: https://sd-design.js.org/guides/virtual-list-migration/ 虚拟列表能力迁移到 vue-virtual-scroller 后的参数、方法与兼容说明。 ## 背景 当前组件库中的虚拟列表能力,已经统一切换到 `vue-virtual-scroller`,并继续复用组件库内置的 `Scrollbar`,不再依赖系统滚动条。 这次迁移的目标是: - 对齐 `vue-virtual-scroller` 的核心 props 语义 - 继续通过组件库内置 `Scrollbar` 提供滚动容器 - 同时暴露底层 scroller 的常用方法 - 支持固定高度 `RecycleScroller` - 支持动态高度 `DynamicScroller` - `Table` 也接入共享 `VirtualList`,并补齐固定高度、估算高度与动态高度三类常见表格场景 ## 适用组件 当前文档中涉及的新语义主要适用于: - `List` - `Select` - `AutoComplete` - `Tree` - `TreeSelect` - `Cascader` - `Table` 其中 `Table` 会在内部把表格行包装进共享虚拟列表的标准渲染路径,并继续兼容固定列、勾选列、展开行与组件库 `Scrollbar` 的组合使用。 ## 新的 VirtualListProps 下面是当前对外可用、且应当优先使用的核心参数。 | 参数名 | 描述 | 类型 | 默认值 | | --- | --- | --- | :-: | | `items` | 列表数据。消费组件通常会在内部注入,业务侧一般不需要手动传 | `unknown[]` | `[]` | | `keyField` | 用于提取每项唯一键,支持字段名或函数 | `string \| ((item, index) => string \| number)` | `'key'` | | `direction` | 滚动方向 | `'vertical' \| 'horizontal'` | `'vertical'` | | `listTag` | 列表容器标签 | `string` | `'div'` | | `itemTag` | item 容器标签 | `string` | `'div'` | | `height` | 可视区域高度;下拉组件未显式传入时会优先取 `trigger-props.popupStyle` 中的高度配置 | `number \| string` | `-` | | `itemSize` | 固定高度模式的 item 高度。传入后会使用 `RecycleScroller` | `number \| string \| ((item, index) => number)` | `-` | | `minItemSize` | 动态高度模式下的最小 item 高度。未传 `itemSize` 时会使用 `DynamicScroller` | `number \| string` | `32` | | `gridItems` | 网格模式每行 item 数量 | `number` | `-` | | `itemSecondarySize` | 网格模式交叉轴尺寸 | `number` | `-` | | `sizeField` | 自定义尺寸字段名 | `string` | `-` | | `typeField` | 自定义类型字段名 | `string` | `-` | | `buffer` | 额外渲染缓冲区,单位与底层 scroller 保持一致 | `number` | `200` | | `prerender` | 首屏预渲染数量 | `number` | `-` | | `emitUpdate` | 是否启用 update 事件 | `boolean` | `false` | | `updateInterval` | 更新节流间隔 | `number` | `-` | | `skipHover` | 是否跳过 hover 监听 | `boolean` | `false` | | `listClass` | 列表容器 class | `ClassValue` | `-` | | `itemClass` | item 容器 class | `ClassValue` | `-` | | `scrollbar` | 是否启用组件库内置滚动条,或传入滚动条配置 | `boolean \| ScrollbarProps` | `true` | ## 模式选择 ### 固定高度 当所有 item 高度一致时,请传 `itemSize`: ```vue ``` 这会走 `RecycleScroller`。 ### 动态高度 当 item 高度可能变化时,不要传旧版固定高度参数,改为提供 `minItemSize`: ```vue ``` 这会走 `DynamicScroller`。 ## 组件级默认行为 本次迁移不是所有组件都在“未显式配置”时走同一套模式。为了让常见下拉和树场景开箱即用,当前组件库会按组件类型补默认值: | 组件 | 仅传 `height` / 仅传空对象时的默认行为 | 说明 | | --- | --- | --- | | `List` | 动态高度,默认 `minItemSize: 32` | 列表项经常承载多行文本、头像、操作区,默认保留动态高度能力 | | `Select` | 固定高度,默认 `itemSize: 36` | 下拉选项当前视觉高度固定为 `36px` | | `AutoComplete` | 固定高度,默认 `itemSize: 36` | 自动补全面板选项当前视觉高度固定为 `36px` | | `Cascader` | 固定高度,默认 `itemSize: 36` | 级联面板项当前视觉高度固定为 `36px` | | `Tree` | 固定高度,默认 `itemSize` 跟随 `size` | `mini / small / medium / large` 分别为 `24 / 28 / 32 / 36` | | `TreeSelect` | 固定高度,默认 `itemSize` 跟随内部 `Tree size` | 默认跟随树节点高度;如果你需要动态树节点高度,请显式传 `minItemSize` | | `Table` | 推荐显式传 `height`,并优先搭配 `estimatedSize: 42` | 行高完全一致时改用 `itemSize`;存在展开内容或更长文本时改用 `minItemSize` | 也就是说: - 固定高度下拉组件通常只需要开启虚拟列表并给出面板高度,`itemSize` 会自动补齐。 - `Tree` / `TreeSelect` 默认会按尺寸走固定高度模式,以避免小数据集和展开收起时出现错误的首项偏移。 - 如果你需要树节点在虚拟模式下保留动态高度与展开动画,请显式改传 `minItemSize`。 ## 推荐写法示例 ### 固定高度下拉 ```vue ``` ### 固定高度树 ```vue ``` 上面的写法会使用固定高度模式,`medium` 默认按 `32px` 行高处理。 ### 动态高度树 ```vue ``` 当你明确需要动态节点高度时,再显式切到 `DynamicScroller`。 ### 动态内容列表 ```vue ``` ## 废弃与替换映射 旧版虚拟列表 props 不再继续沿用,统一记录在这里,业务代码请迁移到新语义。 | 旧 props | 状态 | 新写法 | | -------------------- | ---- | --------------------------------------------- | | `fixedSize` | 废弃 | 使用 `itemSize` 表达固定高度模式 | | `estimatedSize` | 废弃 | 使用 `minItemSize` 表达动态高度模式的最小尺寸 | | `isStaticItemHeight` | 废弃 | 固定高度改为直接传 `itemSize` | | `threshold` | 废弃 | 不再提供基于数量阈值的切换逻辑 | | 旧内部 `data` 语义 | 废弃 | 统一为 `items`,由消费组件在内部适配 | 如果旧代码还依赖这些参数,应该在迁移时直接改写,不再继续透传旧命名。 ## 暴露方法 统一封装后,虚拟列表实例会对外暴露以下常用方法: | 方法名 | 描述 | | -------------------------------------- | ------------------------------------------------ | | `scrollToItem(index, options?)` | 滚动到指定索引 | | `scrollToPosition(position, options?)` | 滚动到指定滚动位置 | | `findItemIndex(offset)` | 根据偏移量查找 item 索引 | | `getItemOffset(index)` | 获取指定 item 偏移 | | `getItemSize(index)` | 获取指定 item 尺寸 | | `cacheSnapshot()` | 获取缓存快照 | | `restoreCache(snapshot)` | 恢复缓存快照 | | `scrollTo(options)` | 兼容方法,支持 `index`、`key`、`align`、`offset` | 部分底层方法会在对应模式下按需透出,例如 `DynamicScroller` 的动态尺寸相关能力。 ## 兼容说明 ### Tree 的 `scrollIntoView` `Tree` 目前仍通过封装层的兼容 `scrollTo` 方法来驱动节点滚动,因此老的调用方式可以继续工作。 ### Scrollbar 虽然底层渲染已经切换到 `vue-virtual-scroller`,但滚动容器仍然统一走组件库内置 `Scrollbar`。这意味着视觉样式、滚动条行为和主题能力仍然与组件库保持一致。 ### Table `Table` 现在也走共享 `VirtualList` 的标准渲染路径。对业务侧来说,最直接的迁移建议是: - 需要常规虚拟表格时,优先使用 `height + estimatedSize` - 所有行高一致时,直接改用 `itemSize` - 行高可能变化、或需要结合展开内容时,改用 `minItemSize` 文档中的 `Table` 虚拟列表示例同时覆盖了固定列、勾选列、展开行、组件库 `scrollbar` 和 `sticky-header` 的组合写法,可直接作为迁移参考。 ## 迁移建议 1. 先删除旧的 `fixedSize`、`estimatedSize`、`threshold` 等旧语义写法。 2. 固定高度场景改成 `itemSize`,动态高度场景改成 `minItemSize`。 3. 需要控制可视区域高度时继续使用 `height`,下拉组件也可以通过 `trigger-props.popupStyle.maxHeight` 提供默认高度。 4. 如果有自定义 key 提取逻辑,显式补上 `keyField`。 5. 回归验证滚动、定位、滚动到底、搜索面板、树展开和多选标签等高频交互。 ## 从 Arco Design 迁移 Arco Design Vue 使用者迁移到当前组件库时,虚拟列表相关写法建议直接对齐到本次 `vue-virtual-scroller` 语义,而不是继续沿用旧的阈值或估算尺寸写法。 ### 常见迁移映射 | Arco / 旧封装习惯 | 当前推荐写法 | 说明 | | --- | --- | --- | | `virtual-list-props="{ height: 200 }"` 用于下拉面板 | 保持 `height`,必要时补 `itemSize: 36` | `Select` / `AutoComplete` / `Cascader` 会默认走固定高度 | | `fixedSize` | `itemSize` | 固定高度统一改成 `itemSize` | | `estimatedSize` | `minItemSize` | 动态高度统一改成 `minItemSize` | | `threshold` | 删除 | 新实现不再基于数量阈值切换普通列表和虚拟列表 | | `Tree` 只传 `height` | `Tree` 仍可只传 `height` | 当前默认按组件 `size` 自动补固定高度 | | `Tree` 需要动态展开高度 | 显式传 `minItemSize` | 只有显式传 `minItemSize` 才进入动态高度模式 | ### Arco 风格迁移示例 ```vue ``` 如果你原来依赖树节点动态高度或展开动画,请改成: ```vue ``` ## 从 Naive UI 迁移 Naive UI 的迁移重点不在“阈值参数”,而在“开关 + 当前组件库的虚拟列表配置对象”。对于当前组件库来说,详细虚拟滚动配置统一进入 `virtual-list-props`,而不是分散在各组件的私有 props 上。 ### 常见迁移映射 | Naive UI / 兼容写法 | 当前推荐写法 | 说明 | | --- | --- | --- | | `virtual-scroll` 布尔开关 | `virtual-list-props` | 详细高度、缓冲区、动态模式都走 `virtual-list-props` | | `TreeSelect virtual-scroll` | `virtual-scroll` + `virtual-list-props` | `virtual-scroll` 只保留开关语义,详细配置仍走 `virtual-list-props` | | 固定高度选项面板 | `itemSize` | 下拉项固定高度统一用 `itemSize` | | 动态树节点高度 | `minItemSize` | 树类组件只有显式传 `minItemSize` 才进入动态模式 | | 旧数量阈值思路 | 删除 | 新实现不会因为数量少就切回普通 DOM 列表 | ### Naive 风格迁移示例 ```vue ``` 如果只是固定高度下拉,不需要手写动态模式: ```vue ``` 这种写法会使用当前组件库的默认固定高度配置。 --- ## LLMs.txt Source: https://sd-design.js.org/llms_txt/ 面向大语言模型的文档入口与推荐使用方式。 LLMs.txt 是一组面向大语言模型优化过的文档入口,适合在 AI 助手、代码代理或内部知识检索场景中直接引用。 它的目标不是替代正常的文档阅读体验,而是让模型更快定位 SD Design Vue 文档中的有效信息,减少无关页面抓取和上下文浪费。

给 AI 的文档入口

先给模型一个合适的入口,再决定是否继续补充全量文本或单组件 Markdown。这样更省上下文,也更容易得到稳定回答。

/llms/llms.txt

轻量索引,适合让模型快速理解文档结构并决定下一步阅读路径。

打开 llms.txt

/llms/llms-full.txt

完整聚合文本,适合整站总结、RAG 预处理或一次性建立全局上下文。

打开 llms-full.txt

组件 .md 入口

针对单个组件提问时,优先给对应 Markdown 页面,减少模型读取无关内容。

打开 /button.md
## 可用入口 当前文档站提供以下 3 类入口: - [/llms/llms.txt](/llms/llms.txt):轻量索引,列出主要页面和推荐阅读入口。 - [/llms/llms-full.txt](/llms/llms-full.txt):完整聚合文本,适合一次性提供整站上下文。 - [/llms/components/button.md](/llms/components/button.md):组件级 Markdown 文档,适合按需投喂单个组件信息。 ## 什么时候用哪个 如果你只是想让模型先了解文档结构,优先给它 llms.txt。 如果你希望模型在一次对话里理解更多全站内容,例如组件库能力边界、指南和组件说明,可以使用 llms-full.txt。 如果你的问题只和某一个组件相关,优先使用对应的组件 Markdown 页面,例如 Button、Select、Table。这样上下文更短,回答也通常更稳定。 ## 推荐用法 ### 1. 先给索引,再按需追文档 这是最稳妥的方式。先把 [/llms/llms.txt](/llms/llms.txt) 发给模型,让它知道有哪些文档入口,再根据问题继续补充单个组件文档或 llms-full.txt。 适合场景: - 让 AI 助手先理解 SD Design Vue 的文档结构 - 让代码代理决定下一步该读哪个组件页面 - 在知识库系统里做第一跳导航 ### 2. 问单个组件时直接给组件 Markdown 例如要问 Button 组件的能力、示例或 API,可以直接提供: - [/llms/components/button.md](/llms/components/button.md) 适合场景: - 生成某个组件的使用示例 - 对比组件能力或迁移写法 - 让模型只围绕一个组件回答,避免被全站信息干扰 ### 3. 做全局问答时使用完整文本 如果你正在做站内 AI 问答、离线索引、RAG 预处理或一次性分析整套文档,可以使用: - [/llms/llms-full.txt](/llms/llms-full.txt) 适合场景: - 给聊天机器人建立基础知识上下文 - 做全文检索切片 - 让模型总结整套组件库能力 ## 提示词示例 你可以直接把这些链接放进提示词或系统上下文里。 ```text 请先阅读 https://sd-design.js.org/llms/llms.txt, 如果问题涉及 Button,再继续阅读 https://sd-design.js.org/llms/components/button.md。 回答时优先依据文档内容,不要臆测不存在的 API。 ``` ```text 请基于 https://sd-design.js.org/llms/llms-full.txt 总结 SD Design Vue 的核心能力, 并给出适合新项目接入的学习顺序。 ``` ## 使用建议 - 优先给最小必要上下文,不要默认把全站文本一次性塞给模型。 - 针对组件问题,优先选择对应的 components/[slug].md。 - 如果模型需要做跨组件对比、迁移建议或全局总结,再补充 llms-full.txt。 - 回答要求严格时,明确要求模型“仅依据提供的文档链接回答”。 ## 给 AI 的最佳实践
1. 先给索引,不要一开始就塞完整文档。大多数问题只需要 llms.txt 加 1 到 2 个组件页。 2. 问题越具体,给的文档越应该窄。例如只问 Select 的远程搜索行为,就只补充对应组件 Markdown。 3. 做迁移、对比、全局总结时,再给 llms-full.txt,避免模型在小问题上消耗过多上下文。 4. 在提示词里明确约束回答来源,例如“仅根据提供的 SD Design Vue 文档链接回答”。 5. 如果你在做 RAG,优先把 llms-full.txt 用作基础切片,再用组件级 Markdown 做高精度补充召回。
### 推荐投喂顺序 1. 先提供 [/llms/llms.txt](/llms/llms.txt),让模型知道站内结构。 2. 如果问题落到具体组件,再补充对应的 [/llms/components/button.md](/llms/components/button.md) 这类组件页。 3. 只有在需要全站理解时,才追加 [/llms/llms-full.txt](/llms/llms-full.txt)。 ### RAG 与知识库建议 - 检索入口页时,把 llms.txt 当成目录索引,而不是最终答案正文。 - 建立组件知识切片时,优先按 components/[slug].md 维度存储,便于精准召回。 - 做高层综述、培训材料或新手引导时,再把 llms-full.txt 作为补充语料。 - 如果回答需要可追溯性,保留返回内容对应的原始文档 URL。 ## 适合接入的场景 - IDE 内的 AI 编码助手 - 文档站内嵌聊天助手 - 企业内部组件库知识库 - RAG、搜索增强问答、自动代码生成辅助流程 --- ## 固钉 Affix Source: https://sd-design.js.org/components/affix/ LLM Markdown: https://sd-design.js.org/llms/components/affix.md 将页面元素钉在可视范围。当内容区域比较长,需要滚动页面时,固钉可以将内容固定在屏幕上。常用于侧边菜单和按钮组合。 ### 基本用法 基本用法,不设置固定位置时,当页面滚动元素不可见时,元素固定在页面最顶部。 示例代码 文件: src/affix-basic.vue ```vue ``` ### 底部固定 当页面滚动或浏览器窗口改变时,元素向下滚动到距底部一定距离时固定。 示例代码 文件: src/affix-bottom.vue ```vue ``` ### 滚动容器 用 `target` 设置需要监听其滚动事件的元素,默认为 window。 `target` 指定为非 window 容器时,可能会出现 `target`外层元素滚动,固钉元素跑出滚动容器的问题。这个时候可以通过传入`targetContainer`传入`target`外层的滚动元素。`Affix` 会监听该元素的滚动事件来实时更新滚钉元素的位置。 当然您也可以在业务代码中自己监听target外层滚动元素的 `scroll` 事件,并调用 `updatePosition` 去更新固钉的位置。 示例代码 文件: src/affix-container.vue ```vue ``` ### 固定状态改变回调 当固定状态发生改变时,会触发事件。 示例代码 文件: src/affix-fix-change.vue ```vue ``` ### 顶部固定 当页面滚动或浏览器窗口改变时,元素向上滚动到距顶部一定距离时固定。 示例代码 文件: src/affix-top.vue ```vue ``` ## API ### `` Props | 参数名 | 描述 | 类型 | 默认值 | | --- | --- | --- | :-: | | offset-top | 距离窗口顶部达到指定偏移量后触发 | `number` | `0` | | offset-bottom | 距离窗口底部达到指定偏移量后触发 | `number` | `-` | | target | 滚动容器,默认是 `window` | `string \| HTMLElement \| Window` | `-` | | target-container | `target`的外层滚动元素,默认是 `window`。`Affix `将会监听该元素的滚动事件,并实时更新固钉的位置。主要是为了解决 `target` 属性指定为非 `window` 元素时,如果外层元素滚动,可能会导致固钉跑出容器问题 | `string \| HTMLElement \| Window` | `-` | ### `` Events | 事件名 | 描述 | 参数 | | ------ | ---------------------- | ---------------- | | change | 固定状态发生改变时触发 | fixed: `boolean` | ### `` Methods | 方法名 | 描述 | 参数 | 返回值 | | -------------- | -------- | ---- | ------ | | updatePosition | 更新位置 | - | - | --- ## 警告提示 Alert Source: https://sd-design.js.org/components/alert/ LLM Markdown: https://sd-design.js.org/llms/components/alert.md 向用户显示警告的信息时,通过警告提示,展现需要关注的信息。 ### 操作项 通过 `#action` 插槽自定义操作按钮 示例代码 文件: src/alert-action.vue ```vue ``` ### 顶部公告 通过设置 `banner`,可将警告提示作为顶部公告使用(去除边框和圆角)。 示例代码 文件: src/alert-banner.vue ```vue ``` ### 基本用法 展现需要关注的信息,适用于简短的警告提示。 示例代码 文件: src/alert-basic.vue ```vue ``` ### 可关闭 通过设置 `closable`,可开启关闭按钮。 示例代码 文件: src/alert-closable.vue ```vue ``` ### 自定义关闭元素 指定 `close-element` slot,自定义关闭元素。 示例代码 文件: src/alert-close-element.vue ```vue ``` ### 隐藏图标 通过设置 `:show-icon="false"` 来隐藏图标。 示例代码 文件: src/alert-icon.vue ```vue ``` ### 提示标题 通过设置 `title` 可以给警告提示添加标题。 示例代码 文件: src/alert-title.vue ```vue ``` ### 提示类型 警告提示有 `info`、`success`、`warning`、`error` 四种类型。2.41.0 版本新增 `normal` 类型,此类型下默认不展示图标。 示例代码 文件: src/alert-type.vue ```vue ``` ## API ### `` Props | 参数名 | 描述 | 类型 | 默认值 | | --- | --- | --- | :-: | | type | 警告提示的类型。2.41.0 新增 `normal` 类型 | `info \| success \| warning \| error \| normal` | `'info'` | | show-icon | 是否展示图标 | `boolean` | `true` | | closable | 是否展示关闭按钮 | `boolean` | `false` | | title | 警告提示的标题 | `string` | `-` | | banner | 是否作为顶部公告使用(去除边框和圆角) | `boolean` | `false` | | center | 内容是否居中显示 | `boolean` | `false` | ### `` Events | 事件名 | 描述 | 参数 | | ----------- | ------------------ | ---------------- | | close | 点击关闭按钮时触发 | ev: `MouseEvent` | | after-close | 关闭动画结束后触发 | - | ### `` Slots | 插槽名 | 描述 | 参数 | 版本 | | ------------- | :------: | ---- | :----- | | icon | 图标 | - | | | title | 标题 | - | | | action | 操作项 | - | | | close-element | 关闭元素 | - | 2.36.0 | --- ## 锚点 Anchor Source: https://sd-design.js.org/components/anchor/ LLM Markdown: https://sd-design.js.org/llms/components/anchor.md 通过锚点可快速找到信息内容在当前页面的位置。 ### 固钉位置 使用 `affix` 组件可以让锚点固定在页面之内。 示例代码 文件: src/anchor-affix.vue ```vue ``` ### 基本用法 锚点的基础用法 示例代码 文件: src/anchor-basic.vue ```vue ``` ### 锚点滚动偏移量 可以设置 `boundary` 来定制锚点滚动偏移量。 示例代码 文件: src/anchor-boundary.vue ```vue ``` ### 是否改变hash 可以设置点击锚点而不改变浏览器历史。 示例代码 文件: src/anchor-hash.vue ```vue ``` ### 无轴线模式 设置 `line-less` 时,可以使用无左侧轴线的锚点样式。 示例代码 文件: src/anchor-line-less.vue ```vue ``` ## API ### `` Props | 参数名 | 描述 | 类型 | 默认值 | | --- | --- | --- | :-: | | boundary | 滚动边界值,设置该值为数字后,将会在距离滚动容器 `boundary` 距离时停止滚动。 | `'start' \| 'end' \| 'center' \| 'nearest' \| number` | `'start'` | | line-less | 是否显示左侧轴线 | `boolean` | `false` | | scroll-container | 滚动容器 | `string \| HTMLElement \| Window` | `-` | | change-hash | 是否改变hash。设置为 `false` 时点击锚点不会改变页面的 hash | `boolean` | `true` | | smooth | 是否使用平滑滚动 | `boolean` | `true` | ### `` Events | 事件名 | 描述 | 参数 | | ------ | ------------------ | -------------------------------------------------- | | select | 用户点击链接时触发 | hash: `string \| undefined`
preHash: `string` | | change | 链接发生改变时触发 | hash: `string` | ### `` Props | 参数名 | 描述 | 类型 | 默认值 | | ------ | ------------------ | -------- | :----: | | title | 锚点链接的文本内容 | `string` | `-` | | href | 锚点链接的地址 | `string` | `-` | --- ## 自动补全 AutoComplete Source: https://sd-design.js.org/components/auto-complete/ LLM Markdown: https://sd-design.js.org/llms/components/auto-complete.md 输入框的自动补全功能。 ### 基本用法 自动补全的基础用法 示例代码 文件: src/auto-complete-basic.vue ```vue ``` ### 弹出框的页脚 自定义弹出框的页脚 示例代码 文件: src/auto-complete-footer.vue ```vue ``` ### 下拉菜单滚动 可以通过 `dropdown-scroll` 监听下拉菜单的滚动事件。或者通过 `dropdown-reach-bottom` 监听下拉菜单滚动到底部的事件。 示例代码 文件: src/auto-complete-scroll.vue ```vue ``` ### 区分大小写 使用 `strict` 属性来指明在匹配时严格区分大小写。 示例代码 文件: src/auto-complete-strict.vue ```vue ``` ### 虚拟列表 当前示例可以直接切换“默认固定高度”和“显式 `itemSize`”两种写法,适合对照迁移后推荐的最简配置。对于自动补全面板,通常不需要单独切到动态模式,除非选项内容会出现明显的多行高度变化。 通过 `virtual-list-props` 开启虚拟列表。`AutoComplete` 的下拉项当前默认按固定高度处理:如果你没有显式传 `itemSize` 或 `minItemSize`,组件会按 `36px` 选项高度补齐固定模式;如果要手动指定固定高度,请传 `itemSize`;只有显式传 `minItemSize` 时,才会切到动态高度模式。完整参数与迁移映射见 [虚拟列表迁移指南](/guides/virtual-list-migration/)。 示例代码 文件: src/auto-complete-virtual-list.vue ```vue ``` ## API ### `` Props | 参数名 | 描述 | 类型 | 默认值 | 版本 | | --- | --- | --- | :-: | :-- | | model-value **(v-model)** | 绑定值 | `string` | `-` | | | default-value | 默认值(非受控模式) | `string` | `''` | | | disabled | 是否禁用 | `boolean` | `false` | | | data | 用于自动提示的数据 | `(string \| number \| SelectOptionData \| SelectOptionGroup)[]` | `[]` | | | popup-container | 弹出框的挂载容器 | `string \| HTMLElement \| null \| undefined` | `-` | | | strict | 是否为严格校验模式 | `boolean` | `false` | | | filter-option | 自定义选项过滤方法 | `FilterOption` | `true` | | | trigger-props | trigger 组件属性 | `TriggerProps` | `-` | 2.14.0 | | allow-clear | 是否允许清空输入框 | `boolean` | `false` | 2.23.0 | | virtual-list-props | 传递虚拟列表属性,传入此参数以开启虚拟滚动。[迁移说明与完整参数](/guides/virtual-list-migration/) | `VirtualListProps` | `-` | 2.50.0 | ### `` Events | 事件名 | 描述 | 参数 | 版本 | | --------------------- | ------------------------ | --------------- | :----- | | change | 绑定值发生改变时触发 | value: `string` | | | search | 用户搜索时触发 | value: `string` | | | select | 选择选项时触发 | value: `string` | | | clear | 用户点击清除按钮时触发 | ev: `Event` | 2.23.0 | | dropdown-scroll | 下拉菜单发生滚动时触发 | ev: `Event` | 2.52.0 | | dropdown-reach-bottom | 下拉菜单滚动到底部时触发 | ev: `Event` | 2.52.0 | ### `` Methods | 方法名 | 描述 | 参数 | 返回值 | 版本 | | ------ | ---------------- | ---- | ------ | :----- | | focus | 使输入框获取焦点 | - | - | 2.40.0 | | blur | 使输入框失去焦点 | - | - | 2.40.0 | ### `` Slots | 插槽名 | 描述 | 参数 | 版本 | | ------ | :----------: | ------------------ | :----- | | option | 选项内容 | data: `OptionInfo` | 2.13.0 | | footer | 弹出框的页脚 | - | | --- ## 头像 Avatar Source: https://sd-design.js.org/components/avatar/ LLM Markdown: https://sd-design.js.org/llms/components/avatar.md 用作头像显示,可以为图片、图标或字符形式展示。 ### 基本用法 头像的基础使用。如果头像是文字的话,会自动调节字体大小,来适应头像框。 示例代码 文件: src/avatar-basic.vue ```vue ``` ### 自动调整字体大小 如果头像是文字的话,会自动调节字体大小,来适应头像框。 示例代码 文件: src/avatar-fit.vue ```vue ``` ### 头像组 使用 `Avatar.Group` 可以使用头像组功能,可通过 `size` 指定头像的大小。 示例代码 文件: src/avatar-group.vue ```vue ``` ### 交互按钮 可以通过 `trigger-icon` `trigger-type` 来定制交互按钮,类型有 `mask (遮罩)` 和 `button (按钮)` 两种。 示例代码 文件: src/avatar-icon.vue ```vue ``` ### 自定义头像路径 自定义头像图片路径 示例代码 文件: src/avatar-image-url.vue ```vue ``` ### 大小和形状 通过设置 `size` 字段,可以调节头像的大小,默认大小为 `40px`。设置 `shape` 字段,可以设置头像是圆形 (circle) 还是正方形 (square)。 示例代码 文件: src/avatar-size.vue ```vue ``` @import ./\_\_demo\_\_/basic.md @import ./\_\_demo\_\_/size.md @import ./\_\_demo\_\_/group.md @import ./\_\_demo\_\_/icon.md @import ./\_\_demo\_\_/fit.md @import ./\_\_demo\_\_/image-url.md ## API ### `` Props | 参数名 | 描述 | 类型 | 默认值 | 版本 | | --- | --- | --- | :-: | :-- | | shape | 头像的形状,有圆形(circle)和正方形(square)两种 | `'circle' \| 'square'` | `'circle'` | | | image-url | 自定义头像图片地址,如果传入该属性,会默认渲染img标签 | `string` | `-` | 2.40.0 | | size | 头像的尺寸大小,单位是 `px`。未填写时使用样式中的大小 `40px` | `number` | `-` | | | auto-fix-font-size | 是否自动根据头像尺寸调整字体大小 | `boolean` | `true` | | | trigger-type | 可点击的头像交互类型 | `'mask' \| 'button'` | `'button'` | | | trigger-icon-style | 交互图标的样式 | `CSSProperties` | `-` | | | object-fit | 图片在容器内的的适应类型 | `ObjectFit` | `-` | 2.52.0 | ### `` Events | 事件名 | 描述 | 参数 | | ------ | ------------ | ---------------- | | click | 点击回调 | ev: `MouseEvent` | | error | 图片加载错误 | - | | load | 图片加载成功 | - | ### `` Slots | 插槽名 | 描述 | 参数 | | ------------ | :------------------: | ---- | | trigger-icon | 可点击的头像交互图标 | - | ### `` Props | 参数名 | 描述 | 类型 | 默认值 | 版本 | | --- | --- | --- | :-: | :-- | | shape | 头像的形状,有圆形(circle)和正方形(square)两种 | `'circle' \| 'square'` | `'circle'` | | | size | 头像的尺寸大小,单位是 `px` | `number` | `-` | | | auto-fix-font-size | 是否自动根据头像尺寸调整字体大小 | `boolean` | `true` | | | max-count | 头像组最多显示的头像数量,多余头像将以 `+x` 的形式展示。 | `number` | `0` | | | z-index-ascend | 头像组内的头像 `z-index` 递增,默认是递减。 | `boolean` | `false` | | | max-style | 多余头像样式。 | `CSSProperties` | `-` | 2.7.0 | | max-popover-trigger-props | 多余头像气泡的 `TriggerProps` | `TriggerProps` | `-` | 2.7.0 | --- ## 返回顶部 BackTop Source: https://sd-design.js.org/components/back-top/ LLM Markdown: https://sd-design.js.org/llms/components/back-top.md 可一键返回顶部的按钮。 ### 基本用法 当容器滚动到一定高度的时候,在右下角会出现一个返回顶部的按钮。 示例代码 文件: src/back-top-basic.vue ```vue ``` ### 自定义按钮 可以自定义返回按钮。 示例代码 文件: src/back-top-custom.vue ```vue ``` ## API ### `` Props | 参数名 | 描述 | 类型 | 默认值 | | --- | --- | --- | :-: | | visible-height | 显示回到顶部按钮的触发滚动高度 | `number` | `200` | | target-container | 滚动事件的监听容器 | `string \| HTMLElement` | `-` | | easing | 滚动动画的缓动方式,可选值参考 [BTween](https://github.com/PengJiyuan/b-tween) | `string` | `'quartOut'` | | duration | 滚动动画的持续时间 | `number` | `200` | --- ## 徽标数 Badge Source: https://sd-design.js.org/components/badge/ LLM Markdown: https://sd-design.js.org/llms/components/badge.md 一般出现在图标或文字的右上角。提供及时、重要的信息提示。 ### 独立使用 `default slot` 为空时,将会独立展示徽标。 示例代码 文件: src/badge-alone.vue ```vue ``` ### 基本用法 基本用法。只需指定 `count`或者 `content slot`,即可显示徽标。 示例代码 文件: src/badge-basic.vue ```vue ``` ### 颜色 我们提供多种预设色彩的徽标样式。如果预设值不能满足你的需求,`color` 字段也可以设置自定义色值。 示例代码 文件: src/badge-color.vue ```vue ``` ### 小红点 设置 `dot`,即可只显示小红点而不显示数字。`count > 0` 时才显示。 示例代码 文件: src/badge-dot.vue ```vue ``` ### 最大值 设置 `max-count`,可以限制最大显示的徽标数值,超过将会加 `+` 后缀。`max-count` 默认为 `99`。 示例代码 文件: src/badge-max.vue ```vue ``` ### 状态点 设置 `status`,可以得到不同的状态点。`normal - 正常` `processing - 进行中` `success - 成功` `warning - 提醒` `danger - 危险`。 示例代码 文件: src/badge-status.vue ```vue ``` ### 文本内容 设置 `text`,可设置自定义提示内容。 示例代码 文件: src/badge-text.vue ```vue ``` ## API ### `` Props | 参数名 | 描述 | 类型 | 默认值 | | --- | --- | --- | :-: | | text | 自定义提示内容 | `string` | `-` | | dot | 显示为小红点 | `boolean` | `false` | | dot-style | 徽标的样式 | `object` | `-` | | max-count | 徽标最大显示数值,如果count超过这个数值会显示为maxCount | `number` | `99` | | offset | 设置徽标位置的偏移 | `number[]` | `[]` | | color | 内置的一些颜色 | `ColorType \| string` | `-` | | status | 徽标的状态类型 | `'normal' \| 'processing' \| 'success' \| 'warning' \| 'danger'` | `-` | | count | 徽标显示的数字 | `number` | `-` | --- ## 面包屑 Breadcrumb Source: https://sd-design.js.org/components/breadcrumb/ LLM Markdown: https://sd-design.js.org/llms/components/breadcrumb.md 面包屑是辅助导航模式,用于识别页面在层次结构内的位置,并根据需要向上返回。 ### 基本用法 面包屑的基本用法。 示例代码 文件: src/breadcrumb-basic.vue ```vue ``` ### 带有下拉菜单 通过 `droplist` 或者 `routes` 来指定下拉菜单。 示例代码 文件: src/breadcrumb-dropdown.vue ```vue ``` ### 显示省略 通过 `max-count` 来指定面包屑的最多渲染数量,超出的部分将显示为省略号。 示例代码 文件: src/breadcrumb-ellipsis.vue ```vue ``` ### 自定义图标 可以在内容中使用自定义图标。 示例代码 文件: src/breadcrumb-icon.vue ```vue ``` ### 参数化配置 通过 `routes` 来传递面包屑数据。若是要自定义面包屑的话,建议使用 `` 组件。默认使用 `a` 标签的 `href` 属性绑定路径,可通过 `item` 插槽自定义渲染。 示例代码 文件: src/breadcrumb-routes.vue ```vue ``` ### 自定义分隔符 通过 `separator` 属性或插槽自定义分隔符。面包屑子项也可通过 `separator` 属性或插槽自定义分隔符,且优先级高于父项。 示例代码 文件: src/breadcrumb-separator.vue ```vue ``` ### 自定义尺寸 通过指定样式来自定义面包屑的尺寸。 示例代码 文件: src/breadcrumb-size.vue ```vue ``` ## API ### `` Props | 参数名 | 描述 | 类型 | 默认值 | 版本 | | --- | --- | --- | :-: | :-- | | max-count | 最多展示的面包屑数量(0表示不限制) | `number` | `0` | | | routes | 设置路径 | `BreadcrumbRoute[]` | `-` | 2.36.0 | | separator | 分隔符文字 | `string\|number` | `-` | 2.36.0 | | custom-url | 自定义链接地址 | `(paths: string[]) => string` | `-` | 2.36.0 | ### `` Slots | 插槽名 | 描述 | 参数 | 版本 | | --- | :-: | --- | :-- | | more-icon | 自定义更多图标 | - | 2.36.0 | | item-render | routes 设置时生效,自定义渲染面包屑 | route: `BreadcrumbRoute`
routes: `BreadcrumbRoute[]`
paths: `string[]` | 2.36.0 | | separator | 自定义分隔符 | - | | ### `` Props | 参数名 | 描述 | 类型 | 默认值 | 版本 | | -------------- | ------------ | ----------------------------- | :----: | :----- | | separator | 分隔符文字 | `string\|number` | `-` | 2.36.0 | | droplist | 下拉菜单内容 | `BreadcrumbRoute['children']` | `-` | 2.36.0 | | dropdown-props | 下拉菜单属性 | `DropDownProps` | `-` | 2.36.0 | ### `` Slots | 插槽名 | 描述 | 参数 | 版本 | | --------- | :------------: | ---- | :----- | | droplist | 自定义下拉菜单 | - | 2.36.0 | | separator | 自定义分隔符 | - | 2.36.0 | ### BreadcrumbRoute | 参数名 | 描述 | 类型 | 默认值 | | -------- | -------------------------- | ------------------------------------------- | :----: | | label | 面包屑名称 | `string` | `-` | | path | 跳转路径 (`a`标签的`href`) | `string` | `-` | | children | 下拉菜单展示项 | `{ label: string; path: string; }[]` | `-` | ## Tips 同名的自定义插槽优先级是高于属性的 --- ## 按钮 Button Source: https://sd-design.js.org/components/button/ LLM Markdown: https://sd-design.js.org/llms/components/button.md 按钮是一种命令组件,可发起一个即时操作。 ### 基本用法 按钮分为 `primary` - **主要按钮**、`secondary` - **次要按钮(默认)**、`dashed` - **虚线按钮**、`outline` - **线形按钮**、`text` - **文本按钮**五种类型。 示例代码 文件: src/button-basic.vue ```vue ``` ### 禁用状态 按钮的禁用状态。 示例代码 文件: src/button-disabled.vue ```vue ``` ### 组合按钮 通过 `` 组件使按钮以组合方式出现。可用在同级多项操作中。 示例代码 文件: src/button-group.vue ```vue ``` ### 图标按钮 按钮可以嵌入图标。在只设置图标时,按钮的宽高相等。 示例代码 文件: src/button-icon.vue ```vue ``` ### 加载中状态 通过设置 `loading` 可以让按钮处于加载中状态。处于加载中状态的按钮不会触发点击事件。 示例代码 文件: src/button-loading.vue ```vue ``` ### 长按钮 通过设置 `long` 属性,使按钮的宽度跟随容器的宽度。 示例代码 文件: src/button-long.vue ```vue ``` ### 按钮形状 按钮分为 `square` - **长方形(默认)**、`circle` - **圆形**、`round` - **全圆角**三种形状。 示例代码 文件: src/button-shape.vue ```vue ``` ### 按钮尺寸 按钮分为 `mini`、`small`、`medium`、`large` 四种尺寸。高度分别为:`24px`、`28px`、`32px`、`36px`。推荐(默认)尺寸为 `medium`。可在不同场景及不同业务需求选择适合尺寸。 示例代码 文件: src/button-size.vue ```vue ``` ### 按钮状态 按钮的状态分为 `normal` - **正常(默认)**、`success` - **成功**、`warning` - **警告**、`danger` - **危险**四种,可以与按钮类型同时使用。 示例代码 文件: src/button-status.vue ```vue ``` ## API ### `