Skip to content

Commit

Permalink
fix(statistic): fix value style problem (#2600)
Browse files Browse the repository at this point in the history
  • Loading branch information
flsion authored Jul 28, 2023
1 parent 9d2ba37 commit 78ddc1b
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 35 deletions.
21 changes: 5 additions & 16 deletions packages/arco-vue-docs/docs/start.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})
]
})
Expand Down
21 changes: 5 additions & 16 deletions packages/arco-vue-docs/docs/start.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})
]
})
Expand Down
4 changes: 2 additions & 2 deletions packages/web-vue/components/statistic/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -21,7 +21,7 @@
white-space: nowrap;

&-integer {
font-size: @statistic-font-int-size;
font-size: inherit;
white-space: nowrap;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/web-vue/components/statistic/style/token.less
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
12 changes: 12 additions & 0 deletions packages/web-vue/components/table/TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,14 @@ table 组件提供了内部元素的自定义插槽,这些插槽不同于普
</td>
</template>
```

### 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.
Expand Down Expand Up @@ -166,4 +173,9 @@ example 2:
</td>
</template>
```

### 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.

---

0 comments on commit 78ddc1b

Please sign in to comment.