@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/cascader/show-all-levels-composition-api.vue

@@ -4,7 +4,202 @@
 
 <script setup>
 import { Cascader as TinyCascader } from '@opentiny/vue'
-import { reactive } from 'vue'
+import { ref } from 'vue'
 
-const options = reactive([])
+const value = ref(['zhinan', 'anzhuang', 'anzhuangcli'])
+
+const options = ref([
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'anzhuang',
+        label: '安装',
+        children: [
+          {
+            value: 'xiangmudengji',
+            label: '项目登记'
+          },
+          {
+            value: 'huanjingzhunbei',
+            label: '环境准备'
+          },
+          {
+            value: 'anzhuangcli',
+            label: '安装 CLI'
+          },
+          {
+            value: 'chuangjianxiangmu',
+            label: '创建项目'
+          }
+        ]
+      },
+      {
+        value: 'kaifa',
+        label: '开发',
+        children: [
+          {
+            value: 'yinruzujian',
+            label: '引入组件'
+          },
+          {
+            value: 'monishuju',
+            label: '模拟数据'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'zujian',
+    label: '组件',
+    children: [
+      {
+        value: 'basic',
+        label: '框架风格',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout 布局'
+          },
+          {
+            value: 'color',
+            label: 'Color 色彩'
+          },
+          {
+            value: 'font',
+            label: 'Font 字体'
+          },
+          {
+            value: 'icon',
+            label: 'Icon 图标'
+          }
+        ]
+      },
+      {
+        value: 'form',
+        label: '表单组件',
+        children: [
+          {
+            value: 'radio',
+            label: 'Radio 单选框'
+          },
+          {
+            value: 'checkbox',
+            label: 'Checkbox 多选框'
+          },
+          {
+            value: 'input',
+            label: 'Input 输入框'
+          },
+          {
+            value: 'number',
+            label: 'Numeric 计数器'
+          },
+          {
+            value: 'select',
+            label: 'Select 选择器'
+          },
+          {
+            value: 'cascader',
+            label: 'Cascader 级联选择器'
+          },
+          {
+            value: 'switch',
+            label: 'Switch 开关'
+          },
+          {
+            value: 'slider',
+            label: 'Slider 滑块'
+          },
+          {
+            value: 'time-picker',
+            label: 'TimePicker 时间选择器'
+          },
+          {
+            value: 'date-picker',
+            label: 'DatePicker 日期选择器'
+          },
+          {
+            value: 'form',
+            label: 'Form 表单'
+          }
+        ]
+      },
+      {
+        value: 'data',
+        label: '数据组件',
+        children: [
+          {
+            value: 'tree',
+            label: 'Tree 树形控件'
+          },
+          {
+            value: 'pager',
+            label: 'Pager 分页'
+          }
+        ]
+      },
+      {
+        value: 'notice',
+        label: '提示组件',
+        children: [
+          {
+            value: 'alert',
+            label: 'Alert 警告'
+          },
+          {
+            value: 'loading',
+            label: 'Loading 加载'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: '导航组件',
+        children: [
+          {
+            value: 'menu',
+            label: 'NavMenu 导航菜单'
+          },
+          {
+            value: 'tabs',
+            label: 'Tabs 标签页'
+          },
+          {
+            value: 'breadcrumb',
+            label: 'Breadcrumb 面包屑'
+          },
+          {
+            value: 'steps',
+            label: 'Steps 步骤条'
+          }
+        ]
+      },
+      {
+        value: 'others',
+        label: '其他组件',
+        children: [
+          {
+            value: 'rate',
+            label: 'Rate 评分'
+          },
+          {
+            value: 'tag',
+            label: 'Tag 标签'
+          },
+          {
+            value: 'usercontact',
+            label: 'UserContact 联系人'
+          },
+          {
+            value: 'slidebar',
+            label: 'SlideBar 滚动块'
+          }
+        ]
+      }
+    ]
+  }
+])
 </script>

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

@@ -112,16 +112,24 @@ export default {
       'desc': {
         'zh-CN': `
           <p>
-            当选中某一级时，动态加载该级下的选项。通过 <code>props</code> 属性中的 <code>lazy</code> 开启动态加载，并通过 <code>lazyload</code> 来设置加载数据源的方法。</br>
-            <code>lazyload</code> 方法有两个参数，第一个参数 node 为当前点击的节点，第二个 resolve 为数据加载完成的回调(必须调用)。</br>
-            为了更准确的显示节点的状态，默认地可以使用<code>leaf</code>字段对节点数据添加是否为叶子节点的标志位，否则会简单地以有无子节点来判断是否为叶子节点。
+            <div>当选中某一级时，动态加载该级下的选项。</dvi>
+            <div>通过 <code>props</code> 属性中的 <code>lazy</code> 开启动态加载，并通过 <code>lazyload</code> 来设置加载数据源的方法。</div>
+            <div><code>lazyload</code> 方法有两个参数，第一个参数 node 为当前点击的节点，第二个 resolve 为数据加载完成的回调(必须调用)。</div>
+            <p>
+              <div>为了更准确的显示节点的状态，默认地（默认指没有设置<code>props.leaf</code>）可以使用<code>leaf</code>字段。</div>
+              <div>表明此节点是否为叶子节点，否则会简单地以有无子节点来判断是否为叶子节点。</div>
+            </p>
           </p>
         `,
         'en-US': `
           <p>
-            When a level is selected, the options under the level are dynamically loaded. Enable dynamic loading with <code>lazy</code> in the <code>props</code> property, and set the method of loading the data source with <code>lazyload</code>. </br>
-            The <code>lazyload</code> method takes two parameters, the first parameter node is the currently clicked node, and the second parameter resolve is the callback when the data load is complete (which must be called). </br>
-            In order to display the status of the node more accurately, the <code>leaf</code> field can be used by default to add the flag bit of whether the node is a leaf node. Otherwise, it will simply judge whether the node is a leaf node by whether there are child nodes.
+            <div> When a level is selected, dynamically loads the options under that level. </dvi>
+            <div> enables dynamic loading with <code>lazy</code> in the <code>props</code> property, and sets the method of loading the data source with <code>lazyload</code>. </div>
+            <div>The<code>lazyload</code> method takes two arguments, node for the current clicked node, and resolve for the callback (which must be called) when the data is loaded. </div>
+            <p>
+            <div> In order to more accurately display the state of the node, the <code>leaf</code> field can be used by default (the default means that <code>props.leaf</code> is not set). </div>
+            <div> indicates whether this node is a leaf, otherwise it is simply determined by the presence or absence of child nodes. </div>
+            </p>
           </p>
         `
       },
@@ -142,10 +150,16 @@ export default {
       'demoId': 'props-children',
       'name': { 'zh-CN': '指定选项', 'en-US': 'Specify Options' },
       'desc': {
-        'zh-CN':
-          '<div class="tip custom-block"><p class="custom-block-title">Props</p>\n<p>通过 <code>children</code> 指定选项的子选项，默认为 children 。\n通过 <code>value</code> 指定指定选项的 value 值，默认为 value 。\n通过 <code>label</code> 指定选项标签,默认为 label 。</p>\n</div>\n',
-        'en-US':
-          '<div class="tip custom-block"><p class="custom-block-title">Props</p>\n<p> uses <code>children</code> to specify the sub-option of the option. The default value is children. \n Use <code>value</code> to specify the value of a specified option. The default value is value. \nUse <code>label</code> to specify the option label. The default value is label. </p>\n</div>\n'
+        'zh-CN': `<p>
+          <div>通过 <code>props.children</code> 指定选项的子选项，默认为 'children' 。</div>
+          <div>通过 <code>props.value</code> 指定指定选项的 value 值，默认为 'value' 。</div>
+          <div>通过 <code>props.label</code> 指定选项标签,默认为 'label' 。</div>
+        <p/>`,
+        'en-US': `<p>
+          <div> specifies the suboptions of the option via <code>props.children</code>, which defaults to 'children'. </div>
+          <div> Specifies the value of the given option via <code>props.value</code>, which defaults to 'value'. </div>
+          <div> Specifies the option label via <code>props.label</code>, which defaults to 'label'. </div>
+        <p/>`
       },
       'codeFiles': ['props-children.vue']
     },
@@ -317,7 +331,7 @@ export default {
           'name': 'collapse-tags',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '多选模式下是否折叠Tag', 'en-US': 'Whether to collapse tags in multi-choice mode' },
+          'desc': { 'zh-CN': '多选模式下是否折叠 Tag', 'en-US': 'Whether to collapse tags in multi-choice mode' },
           'demoId': 'collapse-tags'
         },
         {
@@ -477,13 +491,13 @@ export default {
       ]
     },
     {
-      'name': 'ICascaderPanelConfig',
+      'name': 'ICascaderPanelConfig ',
       'type': 'interface',
       'props': [
         {
           'name': 'expandTrigger',
           'type': `'click' | 'hover'`,
-          'defaultValue': 'click',
+          'defaultValue': `'click'`,
           'desc': {
             'zh-CN': '次级菜单的展开方式',
             'en-US': 'The expansion mode of the secondary menu'

package/demos/pc/app/cascader-panel/basic-usage-composition-api.vue

@@ -1,11 +1,13 @@
 <template>
-  <tiny-cascader-panel class="cascader-panel-demo" :options="optionsCascader"></tiny-cascader-panel>
+  <tiny-cascader-panel class="cascader-panel-demo" :options="optionsCascader" v-model="value"></tiny-cascader-panel>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { CascaderPanel as TinyCascaderPanel } from '@opentiny/vue'
 
+const value = ref('')
+
 const optionsCascader = ref([
   {
     value: 'zhinan',

package/demos/pc/app/cascader-panel/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader-panel class="cascader-panel-demo" :options="optionsCascader"></tiny-cascader-panel>
+  <tiny-cascader-panel class="cascader-panel-demo" :options="optionsCascader" v-model="value"></tiny-cascader-panel>
 </template>
 
 <script>
@@ -11,6 +11,7 @@ export default {
   },
   data() {
     return {
+      value: '',
       optionsCascader: [
         {
           value: 'zhinan',

package/demos/pc/app/cascader-panel/cascader-panel-props-composition-api.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="cascader-panel-demo-props">
-    <div>选中值：<span>{{ value }}</span></div>
+    <div>
+      选中值：<span>{{ value }}</span>
+    </div>
     <tiny-cascader-panel
       v-model="value"
       :options="optionsCascader"

package/demos/pc/app/cascader-panel/cascader-panel-props.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="cascader-panel-demo-props">
-    <div>选中值：<span>{{ value }}</span></div>
+    <div>
+      选中值：<span>{{ value }}</span>
+    </div>
     <tiny-cascader-panel
       v-model="value"
       :options="optionsCascader"

package/demos/pc/app/cascader-panel/change-composition-api.vue

@@ -3,7 +3,7 @@
     <tiny-button @click="clearCheckedNodes">清除选中节点</tiny-button>
     <tiny-cascader-panel
       v-model="value"
-      ref="CascaderPanel"
+      ref="cascaderPanelRef"
       :options="optionsCascader"
       @change="change"
       @expand-change="expandChange"
@@ -233,7 +233,6 @@ function change(value) {
 function expandChange(value) {
   Modal.message({ message: `节点展开：${value}`, status: 'info' })
 }
-
 </script>
 
 <style scoped>

package/demos/pc/app/cascader-panel/change.vue

@@ -243,7 +243,7 @@ export default {
 </script>
 
 <style scoped>
-.cascader-panel-demo-event > :not(:last-child){
+.cascader-panel-demo-event > :not(:last-child) {
   margin-bottom: 12px;
 }
 </style>

package/demos/pc/app/cascader-panel/webdoc/cascader-panel.js

@@ -33,10 +33,10 @@ export default {
       'name': { 'zh-CN': 'Props 选项', 'en-US': 'Props Options' },
       'desc': {
         'zh-CN': `<p>
-              <div>通过 <code>children</code> 指定子级选项，默认值为 children。</div>
+              <div>通过 <code>children</code> 指定子级选项，默认值为 'children'。</div>
               <div>通过 <code>emitPath</code> 是否返回由该节点所在的各级菜单的值所组成的数组。</div>
-              <div>通过 <code>label</code> 指定显示选项 label 值，默认为 label。</div>
-              <div>通过 <code>value</code> 指定值选项 value 值，默认为 value。</div>
+              <div>通过 <code>label</code> 指定显示选项 label 值，默认为 'label'。</div>
+              <div>通过 <code>value</code> 指定值选项 value 值，默认为 'value'。</div>
             </p>`,
         'en-US': `<p>
             <div> specifies the child options through <code>children</code>, which defaults to children. </div>
@@ -167,13 +167,13 @@ export default {
       ]
     },
     {
-      'name': 'ICascaderPanelConfig',
+      'name': 'ICascaderPanelConfig ',
       'type': 'interface',
       'props': [
         {
           'name': 'expandTrigger',
           'type': `'click' | 'hover'`,
-          'defaultValue': 'click',
+          'defaultValue': `'click'`,
           'desc': {
             'zh-CN': '次级菜单的展开方式',
             'en-US': 'The expansion mode of the secondary menu'

package/demos/pc/app/color-picker/webdoc/color-picker.js

@@ -5,33 +5,47 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过引用组件标签，<code>v-model</code>绑定数据即可。',
+        'en-US': 'By referencing component tags,<code>v model</code>bind data.'
+      },
       'codeFiles': ['base.vue']
     },
     {
       'demoId': 'size',
       'name': { 'zh-CN': '尺寸设置', 'en-US': 'Size Setting' },
-      'desc': { 'zh-CN': '通过 size 属性设置large 、medium 、small 、mini 四种不同大小尺寸。不设置时为默认尺寸。', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN':
+          '通过<code>size</code>属性设置<code>large</code><code>medium</code><code>small</code><code>mini</code>四种不同大小尺寸。不设置时为默认尺寸。',
+        'en-US':
+          'Set the size attribute to four different sizes: <code>large</code>, <code>medium</code>, <code>small</code>, and <code>mini</code>. Default size when not set'
+      },
       'codeFiles': ['size.vue']
     },
     {
       'demoId': 'event',
-      'name': { 'zh-CN': '事件触发', 'en-US': 'event' },
-      'desc': { 'zh-CN': '点击确认是将会触发confirm事件, 取消时触发cancel事件', 'en-US': 'When click confirm will trigger confirm event. When click outside or cancel will trigger cancel event' },
+      'name': { 'zh-CN': '事件触发', 'en-US': 'eventing' },
+      'desc': {
+        'zh-CN': '通过点击确认时触发<code>confirm</code>事件, 取消时触发<code>cancel</code>事件。',
+        'en-US':
+          'When click confirm will trigger <code>confirm</code>event. When click outside or cancel will trigger <code>cancel</code> event.'
+      },
       'codeFiles': ['event.vue']
     },
     {
       'demoId': 'enable-alpha',
       'name': { 'zh-CN': 'Alpha', 'en-US': 'Alpha' },
-      'desc': { 'zh-CN': 'Alpha选择', 'en-US': 'Alpha select.' },
+      'desc': { 'zh-CN': '<code>Alpha</code>选择。', 'en-US': '<code>Alpha</code>select.' },
       'codeFiles': ['alpha.vue']
     },
     {
       'demoId': 'history',
       'name': { 'zh-CN': '历史记录', 'en-US': 'history' },
       'desc': {
-        'zh-CN': '当history不为undefined时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到history. 用户行为会更改历史记录, 外部可以更改历史记录',
-        'en-US': 'When history is not undefined, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the history User behavior can change history, and external users can also change history'
+        'zh-CN':
+          '当<code>history</code>不为<code>undefined</code>时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到<code>history</code>. 用户行为会更改历史记录, 外部可以更改历史记录。',
+        'en-US':
+          'When <code>history</code> is not <code>undefined</code>, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the <code>history</code> User behavior can change history, and external users can also change history.'
       },
       'codeFiles': ['history.vue']
     },
@@ -39,11 +53,12 @@ export default {
       'demoId': 'predefine',
       'name': {
         'zh-CN': '预定义颜色',
-        'en-US': 'predefine color'
+        'en-US': 'Predefine color'
       },
       'desc': {
-        'zh-CN': '提供给一些定义颜色, 用户行为不会更改预定义颜色, 但外部可以更改',
-        'en-US': 'Provide some defined colors, user behavior will not change the predefined colors, but can be changed externally'
+        'zh-CN': '通过<code>predefine</code>预定义颜色值，用户行为不会更改预定义颜色, 但外部可以更改。',
+        'en-US':
+          'By<code>predefine</code>predefined color values, user behavior does not change the predefined colors, but they can be changed externally.'
       },
       'codeFiles': ['predefine.vue']
     },
@@ -51,8 +66,10 @@ export default {
       'demoId': 'default-visible',
       'name': { 'zh-CN': '默认显示', 'en-US': 'default-visible' },
       'desc': {
-        'zh-CN': '当visible为true时, 将会默认显示color-select. visible是响应式的, 所以你可以强制控制color-select的状态。当visible切换的时候, 会触发cancel事件',
-        'en-US': 'If visible is true the <code>color-select</code> will show. The visible prop is reactive so you can force change <code>color-select</code> show or not. When change visible will trigger cancel event'
+        'zh-CN':
+          '当<code>visible</code>为<code>true</code>时, 将会默认显示<code>color-select</code>。 <code>visible</code>是响应式的, 所以你可以强制控制<code>color-select</code>的状态。当<code>visible</code>切换的时候, 会触发<code>cancel</code>事件。',
+        'en-US':
+          'If <code>visible</code> is true the <code>color-select</code> will show. The visible prop is reactive so you can force change <code>color-select</code> show or not. When change <code>visible</code> will trigger <code>cancel</code> event.'
       },
       'codeFiles': ['default-visible.vue']
     },
@@ -60,21 +77,21 @@ export default {
       'demoId': 'dynamic-color-change',
       'name': { 'zh-CN': '颜色动态切换', 'en-US': 'dynamic-color-change' },
       'desc': {
-        'zh-CN': '可以动态切换color属性, 以满足各种需求',
-        'en-US': 'Can dynamically switch color attributes to meet various needs'
+        'zh-CN': '通过动态切换<code>color</code>属性, 以满足各种需求。',
+        'en-US': 'Can dynamically switch <code>color</code> attributes to meet various needs.'
       },
       'codeFiles': ['dynamic-color-change.vue']
-    },
+    }
   ],
   apis: [
     {
       'name': 'color-picker',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue',
           'type': 'string',
-          'defaultValue': 'transparent',
+          'defaultValue': `'transparent'`,
           desc: {
             'zh-CN': '默认颜色',
             'en-US': 'default color'
@@ -97,7 +114,8 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '定义color-picker尺寸;该属性的可选值为 large / medium / small / mini',
-            'en-US': 'Define color-picker dimensions; The optional values for this attribute are large/medium/small/mini'
+            'en-US':
+              'Define color-picker dimensions; The optional values for this attribute are large/medium/small/mini'
           },
           demoId: 'size'
         },

package/demos/pc/app/color-select-panel/webdoc/color-select-panel.js

@@ -5,48 +5,61 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>visible</code>设置显示色彩选择面板。',
+        'en-US': 'Set the display color selection panel through<code>visible</code>.'
+      },
       'codeFiles': ['base.vue']
     },
     {
       'demoId': 'alpha',
-      'name': {'zh-CN': '透明度', 'en-US': 'Alpha'},
-      'desc': {'zh-CN': '透明度选择', 'en-US': 'Alpha select.'},
+      'name': { 'zh-CN': '透明度', 'en-US': 'Alpha' },
+      'desc': {
+        'zh-CN': '通过<code>alpha</code>设置透明度选择。',
+        'en-US': 'Set transparency selection through<code>alpha</code>.'
+      },
       'codeFiles': ['alpha.vue']
     },
     {
       'demoId': 'event',
       'name': { 'zh-CN': '事件触发', 'en-US': 'event' },
-      'desc': { 'zh-CN': '点击确认是将会触发confirm事件, 取消时触发cancel事件', 'en-US': 'When click confirm will trigger confirm event. When click outside or cancel will trigger cancel event' },
+      'desc': {
+        'zh-CN': '通过点击确认时触发<code>confirm</code>事件, 取消时触发<code>cancel</code>事件。',
+        'en-US':
+          'When click confirm will trigger confirm event. When click outside or cancel will trigger cancel event.'
+      },
       'codeFiles': ['event.vue']
     },
     {
       'demoId': 'history',
       'name': { 'zh-CN': '历史记录', 'en-US': 'history' },
       'desc': {
-        'zh-CN': '当history不为undefined时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到history. 用户行为会更改历史记录, 外部可以更改历史记录',
-        'en-US': 'When history is not undefined, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the history User behavior can change history, and external users can also change history'
+        'zh-CN':
+          '当<code>history</code>不为<code>undefined</code>时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到<code>history</code>用户行为会更改历史记录, 外部可以更改历史记录。',
+        'en-US':
+          'When <code>history</code> is not <code>undefined</code>, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the <code>history</code> User behavior can change history, and external users can also change history.'
       },
       'codeFiles': ['history.vue']
     },
     {
       'demoId': 'predefine',
-      'name': { 
+      'name': {
         'zh-CN': '预定义颜色',
-        'en-US': 'predefine color' 
+        'en-US': 'predefine color'
       },
-      'desc': { 
-        'zh-CN': '提供给一些定义颜色, 用户行为不会更改预定义颜色, 但外部可以更改',
-        'en-US': 'Provide some defined colors, user behavior will not change the predefined colors, but can be changed externally' 
+      'desc': {
+        'zh-CN': '通过<code>predefine</code>预定义颜色值，用户行为不会更改预定义颜色, 但外部可以更改。',
+        'en-US':
+          'By<code>predefine</code>predefined color values, user behavior does not change the predefined colors, but they can be changed externally.'
       },
       'codeFiles': ['predefine.vue']
-    },
+    }
   ],
   apis: [
     {
       'name': 'color select panel',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           name: 'modelValue',
           type: 'String',
@@ -64,7 +77,7 @@ export default {
           desc: {
             'zh-CN': '是否默认显示color select panel',
             'en-US': 'Is color select panel displayed by default'
-          },
+          }
         },
         {
           name: 'alpha',
@@ -80,8 +93,8 @@ export default {
           name: 'history',
           type: 'string[] | undefined',
           defaultValue: 'undefined',
-          desc:{
-            'zh-CN': '时候启用历史记录,',
+          desc: {
+            'zh-CN': '时候启用历史记录',
             'en-US': 'enable history or not'
           },
           demoId: 'history'
@@ -90,8 +103,8 @@ export default {
           name: 'predefine',
           type: 'string[] | undefined',
           defaultValue: 'undefined',
-          desc:{
-            'zh-CN': '时候启用历史记录,',
+          desc: {
+            'zh-CN': '时候启用历史记录',
             'en-US': 'enable predefine or not'
           },
           demoId: 'predefine'
@@ -122,7 +135,7 @@ export default {
           name: 'color-update',
           type: '(color:Color) => void',
           defaultValue: '',
-          desc:{
+          desc: {
             'zh-cn': '当颜色更新的时候会触发该事件，包括：点击预定义颜色、点击历史记录',
             'en-US': 'when click predefine color or history, will trigger color-update event'
           }

package/demos/pc/app/config-provider/basic.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('测试自定义事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('config-provider#base')
+  await page.locator('.tiny-config-provider > .tiny-alert > .tiny-svg').nth(1).click()
+  await page.waitForTimeout(500)
+  await expect(page.locator('.tiny-modal > .tiny-modal__box').nth(1)).toHaveText('触发自定方法')
+})