diff --git a/packages/devui-vue/devui/progress/__tests__/progress.spec.ts b/packages/devui-vue/devui/progress/__tests__/progress.spec.ts
index 2ade6e88ef..bbba5df871 100644
--- a/packages/devui-vue/devui/progress/__tests__/progress.spec.ts
+++ b/packages/devui-vue/devui/progress/__tests__/progress.spec.ts
@@ -1,53 +1,73 @@
import { mount } from '@vue/test-utils';
-import Progress from '../progress';
+import Progress from '../src/progress';
-describe('d-progress', () => {
- it('height', () => {
- const wrapper = mount(Progress, {
- props: { height: '20px' },
+describe('progress', () => {
+ describe('progress basic', () => {
+ const TestComponent = {
+ components: {
+ 'd-progress': Progress,
+ },
+ template: `
+
+
+
+ `,
+ }
+ const wrapper = mount(TestComponent)
+ it('Progress demo has created successfully', async () => {
+ expect(wrapper).toBeTruthy()
+ })
+ })
+
+ describe('read only', () => {
+ it('percentage should be rendered correctly', () => {
+ const wrapper = mount(Progress, {
+ props: { percentage: 20 },
+ });
+ expect(wrapper.props().percentage).toBe(20);
});
- expect(wrapper.props().height).toBe('20px');
- });
- it('percentage', () => {
- const wrapper = mount(Progress, {
- props: { percentage: 20 },
+ it('percentageText should be rendered correctly', () => {
+ const wrapper = mount(Progress, {
+ props: { percentageText: '30%' },
+ });
+ expect(wrapper.props().percentageText).toBe('30%');
});
- expect(wrapper.props().percentage).toBe(20);
- });
- it('percentageText', () => {
- const wrapper = mount(Progress, {
- props: { percentageText: '30%' },
+ it('barbgcolor should be rendered correctly', () => {
+ const wrapper = mount(Progress, {
+ props: { barBgColor: '#5170ff' },
+ });
+ expect(wrapper.props().barBgColor).toBe('#5170ff');
});
- expect(wrapper.props().percentageText).toBe('30%');
- });
- it('barbgcolor', () => {
- const wrapper = mount(Progress, {
- props: { barbgcolor: '#5170ff' },
+ it('height should be rendered correctly', () => {
+ const wrapper = mount(Progress, {
+ props: { height: '20px' },
+ });
+ expect(wrapper.props().height).toBe('20px');
});
- expect(wrapper.props().barbgcolor).toBe('#5170ff');
- });
- it('isCircle', () => {
- const wrapper = mount(Progress, {
- props: { isCircle: false },
+ it('isCircle should be rendered correctly', () => {
+ const wrapper = mount(Progress, {
+ props: { isCircle: false },
+ });
+ expect(wrapper.props().isCircle).toBe(false);
});
- expect(wrapper.props().isCircle).toBe(false);
- });
- it('strokeWidth', () => {
- const wrapper = mount(Progress, {
- props: { strokeWidth: 6 },
+ it('strokeWidth should be rendered correctly', () => {
+ const wrapper = mount(Progress, {
+ props: { strokeWidth: 6 },
+ });
+ expect(wrapper.props().strokeWidth).toBe(6);
});
- expect(wrapper.props().strokeWidth).toBe(6);
- });
- it('showContent', () => {
- const wrapper = mount(Progress, {
- props: { showContent: true },
+ it('showContent should be rendered correctly', () => {
+ const wrapper = mount(Progress, {
+ props: { showContent: true },
+ });
+ expect(wrapper.props().showContent).toBe(true);
});
- expect(wrapper.props().showContent).toBe(true);
- });
+ })
});
+
diff --git a/packages/devui-vue/devui/progress/index.ts b/packages/devui-vue/devui/progress/index.ts
index 420816c02b..700912363d 100644
--- a/packages/devui-vue/devui/progress/index.ts
+++ b/packages/devui-vue/devui/progress/index.ts
@@ -1,5 +1,5 @@
import type { App } from 'vue'
-import Progress from './src/progress'
+import { Progress } from './src/progress'
Progress.install = function(app: App) {
app.component(Progress.name, Progress)
diff --git a/packages/devui-vue/docs/components/progress/index.md b/packages/devui-vue/docs/components/progress/index.md
index 893a00372b..d4184bbf80 100644
--- a/packages/devui-vue/docs/components/progress/index.md
+++ b/packages/devui-vue/docs/components/progress/index.md
@@ -8,19 +8,19 @@
3. 当需要显示一个操作完成的百分比或已完成的步骤/总步骤时。
### 基本用法
+基本的进度和文字配置。
-
-::: demo 基本的进度和文字配置。
+::: demo
```vue
-
+
+```
+:::
+
+### Circle Usage
+Basic progress and text configuration.
+
+::: demo
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+:::
+
+### API
+#### d-progress parameter
+| Parameter | Type | Default | Description | Jump to Demo |
+| :---: | :---: | :---: | :---: | :---: |
+| percentage | `number` | 0 | Optional. The maximum value of the progress bar is 100. | [Basic Usage](#basic-usage) |
+| percentageText | `string` | -- | Optional. Text description of the current value of the progress bar, for example, '30%'\|'4/5' | [Basic Usage](#basic-usage) |
+| barBgColor | `string` | #5170ff | Optional. Color of the progress bar. The default value is sky blue. | [Basic Usage](#basic-usage) |
+| height | `string` | 20px | Optional. The default value is 20px. | [Basic Usage](#basic-usage) |
+| isCircle | `boolean` | false | Optional. Whether the progress bar is displayed in a circle. | [Circle Usage](#circle-usage) |
+| strokeWidth | `number` | 6 | Optional. Sets the width of the progress bar. The unit is the percentage of the progress bar to the width of the canvas. | [Circle Usage](#circle-usage) |
+| showContent | `boolean` | true | Optional. Sets whether to display content in the circle progress bar. | [Circle Usage](#circle-usage) |