diff --git a/examples/sites/demos/pc/app/collapse/webdoc/collapse.js b/examples/sites/demos/pc/app/collapse/webdoc/collapse.js
index c16c92ced..1de827a92 100644
--- a/examples/sites/demos/pc/app/collapse/webdoc/collapse.js
+++ b/examples/sites/demos/pc/app/collapse/webdoc/collapse.js
@@ -6,8 +6,10 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>配置 <code>name</code> 属性作为每个 <code>collapse-item</code> 的唯一标志符，配置 <code>v-model</code> 设置当前激活的面板。默认情况下可以同时展开多个面板，这个例子默认展开了第一和第三个面板。</p>',
-        'en-US': '<p>For details, see the following example.<br/>Configure the <code>name</code> attribute as the unique identifier for each collapse-item.</p>'
+        'zh-CN':
+          '<p>配置 <code>name</code> 属性作为每个 <code>collapse-item</code> 的唯一标志符，配置 <code>v-model</code> 设置当前激活的面板。默认情况下可以同时展开多个面板，这个例子默认展开了第一和第三个面板。</p>',
+        'en-US':
+          '<p>For details, see the following example.<br/>Configure the <code>name</code> attribute as the unique identifier for each collapse-item.</p>'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -15,8 +17,10 @@ export default {
       'demoId': 'accordion',
       'name': { 'zh-CN': '手风琴效果', 'en-US': 'Accordion Effect' },
       'desc': {
-        'zh-CN': '<p>配置 <code>accordion</code> 属性为 <code>true</code>  后，折叠面板将展示手风琴效果，一次只允许展开一个面板。</p>',
-        'en-US': '<p>After <code>accordion</code> is set to true, the collapsed panel displays the accordion effect. <br/>Configure <code>v-model</code> to set the currently active panel. (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.) </p>'
+        'zh-CN':
+          '<p>配置 <code>accordion</code> 属性为 <code>true</code>  后，折叠面板将展示手风琴效果，一次只允许展开一个面板。</p>',
+        'en-US':
+          '<p>After <code>accordion</code> is set to true, the collapsed panel displays the accordion effect. <br/>Configure <code>v-model</code> to set the currently active panel. (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.) </p>'
       },
       'codeFiles': ['accordion.vue']
     },
@@ -24,8 +28,10 @@ export default {
       'demoId': 'disable',
       'name': { 'zh-CN': '禁用状态', 'en-US': 'Disabled' },
       'desc': {
-        'zh-CN': '<p>在 <code>collapse-item</code> 元素上配置 <code>disabled</code> 属性为 true 后，将禁用指定的折叠面板项。</p>',
-        'en-US': '<p>When the <code>disabled</code> attribute is set to true on the <code>collapse-item</code> element, the specified collapse panel item is disabled. </p>'
+        'zh-CN':
+          '<p>在 <code>collapse-item</code> 元素上配置 <code>disabled</code> 属性为 true 后，将禁用指定的折叠面板项。</p>',
+        'en-US':
+          '<p>When the <code>disabled</code> attribute is set to true on the <code>collapse-item</code> element, the specified collapse panel item is disabled. </p>'
       },
       'codeFiles': ['disable.vue']
     },
@@ -33,8 +39,10 @@ export default {
       'demoId': 'title',
       'name': { 'zh-CN': '面板标题', 'en-US': 'Custom Panel Title' },
       'desc': {
-        'zh-CN': '<p>在 <code>collapse-item</code> 元素上配置 <code>title</code> 属性可以指定每个折叠面板项的标题。也可以通过 <code>title</code> 插槽的方式自定义面板标题，比如在标题后增加图标。<br/>在 <code>collapse-item</code> 元素上配置 <code>title-right</code> 属性可以指定每个折叠面板项标题的右侧内容。也可以通过 <code>title-right</code> 插槽的方式自定义面板标题右侧内容，比如在标题右侧增加图标。</p>',
-        'en-US': '<p>Configure the <code>title</code> attribute on the <code>collapse-item</code> element to specify the title of each collapse panel item. However, you can also customize the panel title by using the <code>title</code> slot, for example, adding an icon before the title. <br/>Configure the <code>title-right</code> attribute on the <code>collapse-item</code> element to specify the right side of each collapse panel item title. However, you can also customize the content on the right of the panel title by using the <code>title-right</code> slot, for example, adding an icon to the right of the title.</p>'
+        'zh-CN':
+          '<p>在 <code>collapse-item</code> 元素上配置 <code>title</code> 属性可以指定每个折叠面板项的标题。也可以通过 <code>title</code> 插槽的方式自定义面板标题，比如在标题后增加图标。<br/>在 <code>collapse-item</code> 元素上配置 <code>title-right</code> 属性可以指定每个折叠面板项标题的右侧内容。也可以通过 <code>title-right</code> 插槽的方式自定义面板标题右侧内容，比如在标题右侧增加图标。</p>',
+        'en-US':
+          '<p>Configure the <code>title</code> attribute on the <code>collapse-item</code> element to specify the title of each collapse panel item. However, you can also customize the panel title by using the <code>title</code> slot, for example, adding an icon before the title. <br/>Configure the <code>title-right</code> attribute on the <code>collapse-item</code> element to specify the right side of each collapse panel item title. However, you can also customize the content on the right of the panel title by using the <code>title-right</code> slot, for example, adding an icon to the right of the title.</p>'
       },
       'codeFiles': ['title.vue']
     },
@@ -42,8 +50,10 @@ export default {
       'demoId': 'icon',
       'name': { 'zh-CN': '展开/折叠图标', 'en-US': 'Customize the expansion and collapse icon' },
       'desc': {
-        'zh-CN': '<p>在 <code>collapse-item</code> 元素上可以通过 <code>icon</code> 插槽的方式自定义展开折叠 icon 图标。</p>',
-        'en-US': '<p>On the <code>collapse-item</code> element, you can customize the folding icon icon by using the <code>icon</code> slot. </p>'
+        'zh-CN':
+          '<p>在 <code>collapse-item</code> 元素上可以通过 <code>icon</code> 插槽的方式自定义展开折叠 icon 图标。</p>',
+        'en-US':
+          '<p>On the <code>collapse-item</code> element, you can customize the folding icon icon by using the <code>icon</code> slot. </p>'
       },
       'codeFiles': ['icon.vue']
     },
@@ -52,7 +62,8 @@ export default {
       'name': { 'zh-CN': '阻止切换', 'en-US': 'Prevent the event of closing the folding panel' },
       'desc': {
         'zh-CN': '<p>设置 before-close 属性，如果返回 false，将阻止面板的切换。</p>',
-        'en-US': '<p>:before-close event before closing the folding panel. In the method, return true/false indicates whether the folding panel can be closed.</p>'
+        'en-US':
+          '<p>:before-close event before closing the folding panel. In the method, return true/false indicates whether the folding panel can be closed.</p>'
       },
       'codeFiles': ['before-close.vue']
     },
@@ -92,7 +103,7 @@ export default {
         },
         {
           'name': 'before-close',
-          'type': '(item: object, activeNames: string | number | Array) => boolean',
+          'type': '(item: Component, activeNames: string | number | Array) => boolean',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '阻止折叠面板切换',
@@ -106,7 +117,8 @@ export default {
           'defaultValue': '--',
           'desc': {
             'zh-CN': '当前激活的面板。如果是手风琴模式，绑定值类型需要为 string | number，否则为 Array',
-            'en-US': 'Currently activated panel (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.)'
+            'en-US':
+              'Currently activated panel (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.)'
           },
           'demoId': 'basic-usage'
         }
@@ -130,7 +142,8 @@ export default {
           'defaultValue': '--',
           'desc': {
             'zh-CN': '当前激活面板改变时触发。如果是手风琴模式，参数 activeNames 类型为 string | number，否则为 Array',
-            'en-US': 'Triggered when the current active panel changes. (In accordion mode, the type of activeNames is string. Otherwise, the type of activeNames is array.)'
+            'en-US':
+              'Triggered when the current active panel changes. (In accordion mode, the type of activeNames is string. Otherwise, the type of activeNames is array.)'
           },
           'demoId': 'events'
         }
@@ -156,7 +169,7 @@ export default {
           'defaultValue': '--',
           'desc': {
             'zh-CN': '唯一标志符',
-            'en-US': 'Unique identifier' 
+            'en-US': 'Unique identifier'
           },
           'demoId': 'basic-usage'
         },