@opentiny/vue-docs 2.2.7 → 2.2.9

package/demos/pc/app/numeric/webdoc/numeric.js

@@ -6,7 +6,7 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '通过设置<code>v-model</code>属性绑定输入值。',
+        'zh-CN': '可通过<code>v-model</code>属性设置绑定输入值。',
         'en-US': 'Bind input value through <code>v-model</code> attribute'
       },
       'codeFiles': ['basic-usage.vue']
@@ -16,9 +16,9 @@ export default {
       'name': { 'zh-CN': '最值与数值循环', 'en-US': 'Extremum and loop' },
       'desc': {
         'zh-CN':
-          '<p>通过设置<code>:max</code>属性计数器允许的最大值，设置<code>:min</code>属性计数器允许的最小值，设置<code>circulate</code>属性当计数器的数值为最大值，继续计数，是否从最小值开始计数。</p>\n',
+          '<p>可通过<code>max</code>属性设置计数器允许的最大值，<code>min</code>属性设置计数器允许的最小值，<code>circulate</code>属性设置当计数器的数值为最大值，继续计数，是否从最小值开始计数。</p>\n',
         'en-US':
-          '<p>By setting the maximum value allowed by the<code>:max</code>attribute counter, setting the minimum value allowed by the<code>:min</code>attribute counter, and setting the<code>cycle</code>attribute, when the counter value reaches the maximum value, continue counting, whether to start counting from the minimum value.</p>\n'
+          '<p>By setting the maximum value allowed by the<code>max</code>attribute counter, setting the minimum value allowed by the<code>min</code>attribute counter, and setting the<code>cycle</code>attribute, when the counter value reaches the maximum value, continue counting, whether to start counting from the minimum value.</p>\n'
       },
       'codeFiles': ['max-min.vue']
     },
@@ -26,9 +26,9 @@ export default {
       'demoId': 'about-step',
       'name': { 'zh-CN': '步长', 'en-US': 'Step' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>:step</code>属性为计数器的加减数值。</p>\n',
+        'zh-CN': '<p>可通过<code>step</code>属性设置计数器的加减数值。</p>\n',
         'en-US':
-          '<p>Set the addition and subtraction values of the counter through the<code>:step</code>attribute.</p>\n'
+          '<p>Set the addition and subtraction values of the counter through the<code>step</code>attribute.</p>\n'
       },
       'codeFiles': ['about-step.vue']
     },
@@ -36,8 +36,8 @@ export default {
       'demoId': 'precision',
       'name': { 'zh-CN': '数值精度', 'en-US': 'Numeric precision' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>:precision</code>属性为计数器的精度值。</p>\n',
-        'en-US': '<p>Set the precision value of the counter through the<code>:precision</code>attribute.</p>\n'
+        'zh-CN': '<p>可通过<code>precision</code>属性设置计数器的精度值。</p>\n',
+        'en-US': '<p>Set the precision value of the counter through the<code>precision</code>attribute.</p>\n'
       },
       'codeFiles': ['precision.vue']
     },
@@ -45,7 +45,7 @@ export default {
       'demoId': 'dynamic-disabled',
       'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>:disabled</code>是否禁用计数器。</p>',
+        'zh-CN': '<p>可通过<code>disabled</code>属性设置是否禁用计数器。</p>',
         'en-US': 'Disable the counter by setting <code>disabled</code>.'
       },
       'codeFiles': ['dynamic-disabled.vue']
@@ -55,9 +55,9 @@ export default {
       'name': { 'zh-CN': '可清空', 'en-US': 'Clearable' },
       'desc': {
         'zh-CN':
-          '通过设置<code>:allow-empty</code>属性计数器内容的可清空特性，默认为 <code>false</code>，表示不可清空。',
+          '可通过<code>allow-empty</code>属性设置计数器内容的可清空特性，默认为 <code>false</code>，表示不可清空。',
         'en-US':
-          '<p>You can use the <code>:allow-empty</code> property to set the clearability of counter contents. The default value is <code>false</code>, indicating that the data cannot be cleared. </p>\n'
+          '<p>You can use the <code>allow-empty</code> property to set the clearability of counter contents. The default value is <code>false</code>, indicating that the data cannot be cleared. </p>\n'
       },
       'codeFiles': ['allow-empty.vue']
     },
@@ -66,9 +66,9 @@ export default {
       'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
       'desc': {
         'zh-CN':
-          '<p>通过设置<code>:size</code> 属性为计数器尺寸，可选值有<code>medium</code><code>small</code><code>mini</code>。</p>\n',
+          '<p>可通过<code>size</code> 属性设置计数器尺寸，可选值有<code>medium</code><code>small</code><code>mini</code>。</p>\n',
         'en-US':
-          '<p>You can set the counter size through the<code>:size</code>attribute.The value can be <code>medium</code><code>small</code><code>mini</code>. </p>\n'
+          '<p>You can set the counter size through the<code>size</code>attribute.The value can be <code>medium</code><code>small</code><code>mini</code>. </p>\n'
       },
       'codeFiles': ['numeric-size.vue']
     },
@@ -77,9 +77,9 @@ export default {
       'name': { 'zh-CN': '加减按钮', 'en-US': 'Control Button' },
       'desc': {
         'zh-CN':
-          '<p>通过设置<code>:controls</code> 属性计数器是否显示加减按钮，设置<code>:controls-position</code> 属性加减按钮显示的位置。加减按钮默认分列两侧显示。</p>\n',
+          '<p>可通过<code>controls</code> 属性设置计数器是否显示加减按钮，<code>controls-position</code> 属性设置加减按钮显示的位置。加减按钮默认分列两侧显示。</p>\n',
         'en-US':
-          '<p>By setting whether the<code>: controls</code>attribute counter displays add/subtract buttons, set the position where the<code>: controls position</code>attribute add/subtract buttons are displayed. The addition and subtraction buttons are displayed on both sides of the column by default.</p>\n'
+          '<p>By setting whether the<code>controls</code>attribute counter displays add/subtract buttons, set the position where the<code>controls position</code>attribute add/subtract buttons are displayed. The addition and subtraction buttons are displayed on both sides of the column by default.</p>\n'
       },
       'codeFiles': ['controls.vue']
     },
@@ -87,9 +87,9 @@ export default {
       'demoId': 'mouse-wheel',
       'name': { 'zh-CN': '鼠标滚轮滚动改变值', 'en-US': 'Mouse wheel scrolling change value' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>:mouse-wheel</code>属性控制鼠标滚动滑轮时是否改变数值。</p>\n',
+        'zh-CN': '<p>可通过<code>mouse-wheel</code>属性设置控制鼠标滚动滑轮的数值。</p>\n',
         'en-US':
-          '<p>You can use the <code>:mouseWheel</code> attribute to control whether the scroll wheel can change the value. </p>\n'
+          '<p>You can use the <code>mouse-wheel</code> attribute to control whether the scroll wheel can change the value. </p>\n'
       },
       'codeFiles': ['mouse-wheel.vue']
     },
@@ -97,9 +97,9 @@ export default {
       'demoId': 'unit',
       'name': { 'zh-CN': '单位', 'en-US': 'Unit' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>:unit</code>属性为计数器的单位，设置单位后，加减按钮将不可用。</p>\n',
+        'zh-CN': '<p>可通过<code>unit</code>属性设置计数器的单位，设置单位后，加减按钮将不可用。</p>\n',
         'en-US':
-          '<p>Set the unit of the counter by using the <code>:unit</code>property. After setting the unit, the increase and decrease buttons will be disabled.</p>\n'
+          '<p>Set the unit of the counter by using the <code>unit</code>property. After setting the unit, the increase and decrease buttons will be disabled.</p>\n'
       },
       'codeFiles': ['unit.vue']
     },
@@ -107,7 +107,7 @@ export default {
       'demoId': 'change-event',
       'name': { 'zh-CN': '值改变事件', 'en-US': 'Value change event' },
       'desc': {
-        'zh-CN': '<p> 通过设置<code>@change</code>监听数值改变事件。</p>\n',
+        'zh-CN': '<p> 可通过<code>@change</code>设置监听数值改变事件。</p>\n',
         'en-US': 'The <code>@change</code> event is triggered when the value of the text box is changed. </p>\n'
       },
       'codeFiles': ['change-event.vue']
@@ -116,7 +116,7 @@ export default {
       'demoId': 'focus-event',
       'name': { 'zh-CN': '聚焦事件', 'en-US': 'Focus Event' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>@focus</code>监听输入框获得焦点事件。</p>\n',
+        'zh-CN': '<p>可通过<code>@focus</code>设置监听输入框获得焦点事件。</p>\n',
         'en-US': 'The <code>@focus</code> event is triggered when the text box is focused. </p>\n'
       },
       'codeFiles': ['focus-event.vue']
@@ -125,7 +125,7 @@ export default {
       'demoId': 'blur-event',
       'name': { 'zh-CN': '失焦事件', 'en-US': 'Out of Focus Event' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>@blur</code>监听输入框失去焦点事件。</p>\n',
+        'zh-CN': '<p>可通过<code>@blur</code>设置监听输入框失去焦点事件。</p>\n',
         'en-US': '<p>The<code>@blur</code>event is triggered when the text box loses focus. </p>\n'
       },
       'codeFiles': ['blur-event.vue']
@@ -192,7 +192,7 @@ export default {
           'typeAnchorName': 'INumericFormat',
           'defaultValue': '--',
           'desc': {
-            'zh-CN': "数字格式化置项，具体配置参考<a href='#INumericFormat'>属性说明</a>",
+            'zh-CN': '数字格式化置项',
             'en-US':
               "For the specific configuration of the digital formatting entry, refer to the <a href='#INumericFormat'>property description</a>"
           },
@@ -367,7 +367,7 @@ interface INumericFormat {
   groupSeparator: ',', // 整数部分分组分隔符
   decimalSeparator: '.', // 小数点符号
   fractionGroupSize: 0, // 小数部分分组间隔
-  fractionGroupSeparator: ' ', // 小数分组分隔符
+  fractionGroupSeparator: '', // 小数分组分隔符
   suffix: '@' // 后置标识
 }
       `

package/demos/pc/app/pager/before-page-change-composition-api.vue

@@ -18,7 +18,7 @@ const currentPage = ref(5)
 
 function onBeforePageChange(param) {
   const { callback, rollback } = param
-  Modal.confirm('您确定要放弃当前页的修改吗？').then((res) => {
+  Modal.confirm('您确定要继续变更操作吗？').then((res) => {
     if (res === 'confirm') {
       callback && callback()
     } else {

package/demos/pc/app/pager/before-page-change.vue

@@ -25,7 +25,7 @@ export default {
   methods: {
     onBeforePageChange(param) {
       const { callback, rollback } = param
-      Modal.confirm('您确定要放弃当前页的修改吗？').then((res) => {
+      Modal.confirm('您确定要继续变更操作吗？').then((res) => {
         if (res === 'confirm') {
           callback && callback()
         } else {

package/demos/pc/app/pager/custom-layout-composition-api.vue

@@ -1,10 +1,12 @@
 <template>
-  <tiny-pager layout="total, sizes, prev, pager, next, slot, jumper" :total="1000">
-    <template #default>
-      <span>默认插槽</span>
-    </template>
-  </tiny-pager>
-  <tiny-pager layout="sizes, prev, current, next, total" :total="1000"></tiny-pager>
+  <div>
+    <tiny-pager layout="total, sizes, prev, pager, next, slot, jumper" :total="1000">
+      <template #default>
+        <span>默认插槽</span>
+      </template>
+    </tiny-pager>
+    <tiny-pager layout="sizes, prev, current, next, total" :total="1000"></tiny-pager>
+  </div>
 </template>
 
 <script setup>

package/demos/pc/app/pager/custom-layout.vue

@@ -1,10 +1,12 @@
 <template>
-  <tiny-pager layout="total, sizes, prev, pager, next, slot, jumper" :total="1000">
-    <template #default>
-      <span>默认插槽</span>
-    </template>
-  </tiny-pager>
-  <tiny-pager layout="sizes, prev, current, next, total" :total="1000"></tiny-pager>
+  <div>
+    <tiny-pager layout="total, sizes, prev, pager, next, slot, jumper" :total="1000">
+      <template #default>
+        <span>默认插槽</span>
+      </template>
+    </tiny-pager>
+    <tiny-pager layout="sizes, prev, current, next, total" :total="1000"></tiny-pager>
+  </div>
 </template>
 
 <script>

package/demos/pc/app/pager/custom-total-composition-api.vue

@@ -1,22 +1,24 @@
 <template>
-  <tiny-pager
-    :current-page="currentPage"
-    @update:current-page="currentPage = $event"
-    :page-size="100"
-    layout="total, sizes, prev, pager, next"
-    :total="5000000"
-    :custom-total="true"
-  >
-  </tiny-pager>
-  <tiny-pager
-    :current-page="currentPage"
-    @update:current-page="currentPage = $event"
-    :page-size="100"
-    layout="total, sizes, prev, pager, next"
-    :total="5000000"
-    :custom-total="'条数超出百万'"
-  >
-  </tiny-pager>
+  <div>
+    <tiny-pager
+      :current-page="currentPage"
+      @update:current-page="currentPage = $event"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next"
+      :total="5000000"
+      :custom-total="true"
+    >
+    </tiny-pager>
+    <tiny-pager
+      :current-page="currentPage"
+      @update:current-page="currentPage = $event"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next"
+      :total="5000000"
+      custom-total="条数超出百万"
+    >
+    </tiny-pager>
+  </div>
 </template>
 
 <script setup>

package/demos/pc/app/pager/custom-total.vue

@@ -1,22 +1,24 @@
 <template>
-  <tiny-pager
-    :current-page="currentPage"
-    @update:current-page="currentPage = $event"
-    :page-size="100"
-    layout="total, sizes, prev, pager, next"
-    :total="5000000"
-    :custom-total="true"
-  >
-  </tiny-pager>
-  <tiny-pager
-    :current-page="currentPage"
-    @update:current-page="currentPage = $event"
-    :page-size="100"
-    layout="total, sizes, prev, pager, next"
-    :total="5000000"
-    :custom-total="'条数超出百万'"
-  >
-  </tiny-pager>
+  <div>
+    <tiny-pager
+      :current-page="currentPage"
+      @update:current-page="currentPage = $event"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next"
+      :total="5000000"
+      :custom-total="true"
+    >
+    </tiny-pager>
+    <tiny-pager
+      :current-page="currentPage"
+      @update:current-page="currentPage = $event"
+      :page-size="100"
+      layout="total, sizes, prev, pager, next"
+      :total="5000000"
+      custom-total="条数超出百万"
+    >
+    </tiny-pager>
+  </div>
 </template>
 
 <script>

package/demos/pc/app/pager/hide-on-single-page-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     是否隐藏：<tiny-switch v-model="isHide"></tiny-switch>
-    <tiny-pager :hide-on-single-page="isHide" layout="prev, pager, next" :total="1"></tiny-pager>
+    <tiny-pager :hide-on-single-page="isHide" :total="1"></tiny-pager>
   </div>
 </template>
 

package/demos/pc/app/pager/hide-on-single-page.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('只有一页时隐藏分页', async ({ page }) => {
+test('单页时隐藏', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('pager#hide-on-single-page')
 

package/demos/pc/app/pager/hide-on-single-page.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     是否隐藏：<tiny-switch v-model="isHide"></tiny-switch>
-    <tiny-pager :hide-on-single-page="isHide" layout="prev, pager, next" :total="1"></tiny-pager>
+    <tiny-pager :hide-on-single-page="isHide" :total="1"></tiny-pager>
   </div>
 </template>
 

package/demos/pc/app/pager/pager-event-composition-api.vue

@@ -29,30 +29,35 @@ function debounce(fn, delay = 50) {
 
 function handleCurrentChange(val) {
   Modal.message({
-    message: `current-change 事件，当前页: ${val}`
+    message: `current-change 事件，当前页: ${val}`,
+    status: 'info'
   })
 }
 
 function handleSizeChange(val) {
   Modal.message({
-    message: `size-change 事件，每页条目数: ${val}`
+    message: `size-change 事件，每页条目数: ${val}`,
+    status: 'info'
   })
 }
 
 function prevClick(val) {
   Modal.message({
-    message: `prev-click 事件，当前页: ${val}`
+    message: `prev-click 事件，当前页: ${val}`,
+    status: 'info'
   })
 }
 
 function nextClick(val) {
   Modal.message({
-    message: `next-click 事件，当前页: ${val}`
+    message: `next-click 事件，当前页: ${val}`,
+    status: 'info'
   })
 }
 const fetchData = debounce(() => {
   Modal.message({
-    message: '模拟后台拉取数据'
+    message: '模拟后台拉取数据',
+    status: 'info'
   })
 })
 </script>

package/demos/pc/app/pager/pager-event.vue

@@ -34,27 +34,32 @@ export default {
   methods: {
     handleCurrentChange(val) {
       Modal.message({
-        message: `current-change 事件，当前页: ${val}`
+        message: `current-change 事件，当前页: ${val}`,
+        status: 'info'
       })
     },
     handleSizeChange(val) {
       Modal.message({
-        message: `size-change 事件，每页条目数: ${val}`
+        message: `size-change 事件，每页条目数: ${val}`,
+        status: 'info'
       })
     },
     prevClick(val) {
       Modal.message({
-        message: `prev-click 事件，当前页: ${val}`
+        message: `prev-click 事件，当前页: ${val}`,
+        status: 'info'
       })
     },
     nextClick(val) {
       Modal.message({
-        message: `next-click 事件，当前页: ${val}`
+        message: `next-click 事件，当前页: ${val}`,
+        status: 'info'
       })
     },
     fetchData: debounce(() => {
       Modal.message({
-        message: '模拟后台拉取数据'
+        message: '模拟后台拉取数据',
+        status: 'info'
       })
     })
   }

package/demos/pc/app/pager/webdoc/pager.js

@@ -131,9 +131,9 @@ export default {
     },
     {
       'demoId': 'hide-on-single-page',
-      'name': { 'zh-CN': '只有一页时隐藏分页', 'en-US': 'Grid Table Pagination' },
+      'name': { 'zh-CN': '单页时隐藏', 'en-US': 'Grid Table Pagination' },
       'desc': {
-        'zh-CN': '<p>当 <code>hide-on-single-page</code> 为 <code>true</code> 时，只有一页时会隐藏分页。</p>\n',
+        'zh-CN': '<p>通过 <code>hide-on-single-page</code> 设置当仅有一页时是否隐藏分页组件。</p>\n',
         'en-US': '<p>When there is only one page, the pagination will be hidden.</p>\n'
       },
       'codeFiles': ['hide-on-single-page.vue']
@@ -164,7 +164,7 @@ export default {
       'name': { 'zh-CN': '分页变更前置处理', 'en-US': 'Pre processing of pagination changes' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>is-before-page-change</code> 开启前置处理特性，翻页或者改变页大小时会触发 <code>before-page-change</code> 事件。事件函数类型为 <a href="#IBeforeChangeEvent">IBeforeChangeEvent</a> ，调用传参中的 <code>callback</code> 继续变更，调用 <code>rollback</code> 中止变更。</p>\n',
+          '<p>通过 <code>is-before-page-change</code> 开启前置处理特性，翻页或者改变页大小时会触发 <code>before-page-change</code> 事件。调用传参中的 <code>callback</code> 继续变更，调用 <code>rollback</code> 中止变更。</p>\n',
         'en-US':
           '<p>By enabling the pre processing feature through <code>is before page change</code> , the <code>before page change</code> event is triggered when flipping or changing page size. The event function type is <a="#IBeforeChangeEvent">IBeforeChangeEvent</a> , call <code>callback</code> in the passed parameters to continue the change, and call <code>rollback</code> to abort the change.</p>\n'
       },

package/demos/pc/app/pop-upload/webdoc/pop-upload.js

@@ -14,7 +14,7 @@ export default {
     },
     {
       'demoId': 'custom-request-headers',
-      'name': { 'zh-CN': '请求头部配置', 'en-US': 'Request header configuration' },
+      'name': { 'zh-CN': '定义请求头部', 'en-US': 'Custom request header' },
       'desc': {
         'zh-CN':
           '通过 <code>with-credentials</code> 开启支持发送 cookie 凭证信息，<code>headers</code> 自定义上传请求头信息。',
@@ -258,7 +258,7 @@ export default {
         {
           'name': 'upload-button-text',
           'type': 'string',
-          'defaultValue': "'选择文件'",
+          'defaultValue': `'选择文件'`,
           'desc': {
             'zh-CN': '打开弹出框的按钮的文本配置属性',
             'en-US': 'Text configuration attribute of the button for opening a dialog box'
@@ -278,7 +278,7 @@ export default {
         {
           'name': 'upload-name',
           'type': 'string',
-          'defaultValue': "'file'",
+          'defaultValue': `'file'`,
           'desc': { 'zh-CN': '上传的文件字段名', 'en-US': 'Field name of the uploaded file' },
           'demoId': 'basic-usage'
         },

package/demos/pc/app/popconfirm/webdoc/popconfirm.js

@@ -156,7 +156,7 @@ export default {
         },
         {
           'name': 'type',
-          'type': "'info' | 'success' | 'warning' | 'error' | VueComponent",
+          'type': "'info' | 'success' | 'warning' | 'error' | Component",
           'defaultValue': '--',
           'desc': {
             'zh-CN': '提示图标类型，可以传入自定义图标',

package/demos/pc/app/progress/custom-color-composition-api.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="add"> 点击增加改变颜色 </tiny-button>
-    <tiny-progress :percentage="value" :color="customColor"></tiny-progress>
-    <tiny-progress :percentage="value" :color="customColorMethod"></tiny-progress>
-    <tiny-progress :percentage="value" :color="customColors"></tiny-progress>
+    <tiny-button @click="add" class="mb10"> 点击增加改变颜色 </tiny-button>
+    <tiny-progress :percentage="value" :color="customColor" :stroke-width="24"></tiny-progress>
+    <br />
+    <tiny-progress :percentage="value" :color="customColorMethod" :stroke-width="24"></tiny-progress>
+    <br />
+    <tiny-progress :percentage="value" :color="customColors" :stroke-width="24"></tiny-progress>
   </div>
 </template>
 
@@ -11,7 +13,7 @@
 import { ref } from 'vue'
 import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 
-const value = ref(50)
+const value = ref(20)
 const customColor = ref('#409eff')
 // 在什么进度显示什么样的颜色
 const customColors = ref([
@@ -23,6 +25,9 @@ const customColors = ref([
 ])
 
 function add() {
+  if (value.value + 20 > 100) {
+    return
+  }
   value.value += 20
 }
 

package/demos/pc/app/progress/custom-color.spec.ts

@@ -10,10 +10,23 @@ test('根据长度改变颜色', async ({ page }) => {
   const progress3 = progress.nth(2).locator('div.tiny-progress-bar__inner')
   const button = page.getByRole('button', { name: '点击增加改变颜色' })
 
+  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
+  await expect(progress2).toHaveCSS('background-color', 'rgb(144, 147, 153)')
+  await expect(progress3).toHaveCSS('background-color', 'rgb(230, 162, 60)')
+  await button.click()
   await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
   await expect(progress2).toHaveCSS('background-color', 'rgb(230, 162, 60)')
   await expect(progress3).toHaveCSS('background-color', 'rgb(92, 184, 122)')
   await button.click()
-  await expect(progress2).toHaveCSS('background-color', 'rgb(103, 194, 58)')
+  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
+  await expect(progress2).toHaveCSS('background-color', 'rgb(230, 162, 60)')
   await expect(progress3).toHaveCSS('background-color', 'rgb(25, 137, 250)')
+  await button.click()
+  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
+  await expect(progress2).toHaveCSS('background-color', 'rgb(103, 194, 58)')
+  await expect(progress3).toHaveCSS('background-color', 'rgb(111, 122, 211)')
+  await button.click()
+  await expect(progress1).toHaveCSS('background-color', 'rgb(64, 158, 255)')
+  await expect(progress2).toHaveCSS('background-color', 'rgb(103, 194, 58)')
+  await expect(progress3).toHaveCSS('background-color', 'rgb(111, 122, 211)')
 })

package/demos/pc/app/progress/custom-color.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="add"> 点击增加改变颜色 </tiny-button>
-    <tiny-progress :percentage="value" :color="customColor"></tiny-progress>
-    <tiny-progress :percentage="value" :color="customColorMethod"></tiny-progress>
-    <tiny-progress :percentage="value" :color="customColors"></tiny-progress>
+    <tiny-button @click="add" class="mb10"> 点击增加改变颜色 </tiny-button>
+    <tiny-progress :percentage="value" :color="customColor" :stroke-width="24"></tiny-progress>
+    <br />
+    <tiny-progress :percentage="value" :color="customColorMethod" :stroke-width="24"></tiny-progress>
+    <br />
+    <tiny-progress :percentage="value" :color="customColors" :stroke-width="24"></tiny-progress>
   </div>
 </template>
 
@@ -17,7 +19,7 @@ export default {
   },
   data() {
     return {
-      value: 50,
+      value: 20,
       customColor: '#409eff',
       // 在什么进度显示什么样的颜色
       customColors: [
@@ -31,6 +33,9 @@ export default {
   },
   methods: {
     add() {
+      if (this.value + 20 > 100) {
+        return
+      }
       this.value += 20
     },
     // 在什么进度显示什么样的颜色