diff --git a/packages/arco-vue-docs/docs/start.en-US.md b/packages/arco-vue-docs/docs/start.en-US.md index c664c534a..a9aafb593 100644 --- a/packages/arco-vue-docs/docs/start.en-US.md +++ b/packages/arco-vue-docs/docs/start.en-US.md @@ -68,31 +68,20 @@ export default defineConfig({ Note: This method does not process the components manually imported by the user in the script, such as the Message component. The user still needs to manually import the style file corresponding to the component, such as `@arco-design/web-vue/es/message/style/css.js` . -## On-demand Import +## On-demand loading and component library themes (Arco plugin) -You can also use manual import to load components on demand. The component library already supports Tree Shaking by default. It can be used with [vite-plugin-style-import](https://github.com/vbenjs/vite-plugin-style-import) to automatically load component styles. +In addition, you can also use the Vite plugin provided by Arco for on-demand loading and component library style configuration, [@arco-plugins/vite-vue](https://github.com/arco-design/arco-plugins/tree/main/ packages/plugin-vite-vue) plugin will automatically load component styles. ```ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' -import { createStyleImportPlugin } from 'vite-plugin-style-import' +import { vitePluginForArco } from '@arco-plugins/vite-vue' export default defineConfig({ plugins: [ vue(), - createStyleImportPlugin({ - libs: [ - { - libraryName: '@arco-design/web-vue', - esModule: true, - resolveStyle: (name) => { - // css - return `@arco-design/web-vue/es/${name}/style/css.js` - // less - return `@arco-design/web-vue/es/${name}/style/index.js` - }, - } - ] + vitePluginForArco({ + style: 'css' }) ] }) diff --git a/packages/arco-vue-docs/docs/start.zh-CN.md b/packages/arco-vue-docs/docs/start.zh-CN.md index 93ce03503..c25e5fa69 100644 --- a/packages/arco-vue-docs/docs/start.zh-CN.md +++ b/packages/arco-vue-docs/docs/start.zh-CN.md @@ -66,31 +66,20 @@ export default defineConfig({ 注意：这种方法并不会处理用户在 script 中手动导入的组件，比如 Message 组件，用户仍需要手动导入组件对应的样式文件，例如 `@arco-design/web-vue/es/message/style/css.js`。 -## 按需加载 +## 按需加载与组件库主题（Arco 插件） -也可以使用手动导入的方式按需加载组件，组件库已经默认支持 Tree Shaking。可以配合 [vite-plugin-style-import](https://github.com/vbenjs/vite-plugin-style-import) 插件自动加载组件样式。 +另外也可以使用 Arco 提供的 Vite 插件进行按需加载和组件库样式配置，[@arco-plugins/vite-vue](https://github.com/arco-design/arco-plugins/tree/main/packages/plugin-vite-vue) 插件会自动加载组件样式。 ```ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' -import { createStyleImportPlugin } from 'vite-plugin-style-import' +import { vitePluginForArco } from '@arco-plugins/vite-vue' export default defineConfig({ plugins: [ vue(), - createStyleImportPlugin({ - libs: [ - { - libraryName: '@arco-design/web-vue', - esModule: true, - resolveStyle: (name) => { - // css - return `@arco-design/web-vue/es/${name}/style/css.js` - // less - return `@arco-design/web-vue/es/${name}/style/index.js` - }, - } - ] + vitePluginForArco({ + style: 'css' }) ] }) diff --git a/packages/web-vue/components/statistic/style/index.less b/packages/web-vue/components/statistic/style/index.less index eaaf3ab33..89db45cc1 100644 --- a/packages/web-vue/components/statistic/style/index.less +++ b/packages/web-vue/components/statistic/style/index.less @@ -9,8 +9,8 @@ &-title { margin-bottom: @statistic-margin-title-bottom; - font-size: @statistic-font-title-size; color: @statistic-color-title-text; + font-size: @statistic-font-title-size; } &-content { @@ -21,7 +21,7 @@ white-space: nowrap; &-integer { - font-size: @statistic-font-int-size; + font-size: inherit; white-space: nowrap; } diff --git a/packages/web-vue/components/statistic/style/token.less b/packages/web-vue/components/statistic/style/token.less index cdc829a33..d05e5d326 100644 --- a/packages/web-vue/components/statistic/style/token.less +++ b/packages/web-vue/components/statistic/style/token.less @@ -5,7 +5,7 @@ @statistic-margin-extra-top: @spacing-4; @statistic-font-value-size: @font-size-body-3; @statistic-font-int-size: 26px; -@statistic-font-decimal-size: @statistic-font-int-size; +@statistic-font-decimal-size: inherit; @statistic-font-value-weight: @font-weight-500; @statistic-color-value-text: var(~'@{arco-cssvars-prefix}-color-text-1'); @statistic-color-text: var(~'@{arco-cssvars-prefix}-color-text-2'); diff --git a/packages/web-vue/components/table/TEMPLATE.md b/packages/web-vue/components/table/TEMPLATE.md index 4b3594ed2..8087d040e 100644 --- a/packages/web-vue/components/table/TEMPLATE.md +++ b/packages/web-vue/components/table/TEMPLATE.md @@ -126,7 +126,14 @@ table 组件提供了内部元素的自定义插槽，这些插槽不同于普 ``` + +### 2. 关于数据中的 `row-key` 设置 + +表格默认会通过数据中设置的 `key` 字段来唯一定位行数据，在提供数据时请确保行数据中都设置了 `key` 字段。这个字段在开启选择器等功能时为必要字段，如果想要更换默认的字段名，可以修改 `row-key` 进行设置。 + --- + + ## en-US The table component provides custom slots for internal elements, which are different from normal slots and have certain restrictions on what the user can pass in. Because the slot of vue does not provide a way to send out children and render them in the slot, we have done some special processing for the element slot in the table, and will append the original children to the content passed in by the user to ensure that children Normal rendering of the element. @@ -166,4 +173,9 @@ example 2： ``` + +### 2. About the `row-key` setting in the data + +By default, the table will uniquely locate the row data through the `key` field set in the data. When providing data, please ensure that the `key` field is set in the row data. This field is a necessary field when enabling functions such as selectors. If you want to change the default field name, you can modify `row-key` to set it. + ---