docs(site): [cascader, cascader-panel] Optimize document (#873)

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

@@ -1,9 +1,8 @@
 <template>
-  <div class="cascader-panel-demo">
+  <div class="cascader-panel-demo-props">
     <div>选中值：<span>{{ value }}</span></div>
     <tiny-cascader-panel
       v-model="value"
-      class="cascader-panel-demo"
       :options="optionsCascader"
       :props="{
         children: 'children',
@@ -219,7 +218,7 @@ const optionsCascader = ref([
 </script>
 
 <style scoped>
-.cascader-panel-demo > :not(:last-child) {
-  margin-bottom: 20px;
+.cascader-panel-demo-props > :not(:last-child) {
+  margin-bottom: 12px;
 }
 </style>

examples/sites/demos/pc/app/cascader-panel/cascader-panel-props.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="cascader-panel-demo">
+  <div class="cascader-panel-demo-props">
     <div>选中值：<span>{{ value }}</span></div>
     <tiny-cascader-panel
       v-model="value"
-      class="cascader-panel-demo"
       :options="optionsCascader"
       :props="{
         children: 'children',
@@ -227,7 +226,7 @@ export default {
 </script>
 
 <style scoped>
-.cascader-panel-demo > :not(:last-child) {
-  margin-bottom: 20px;
+.cascader-panel-demo-props > :not(:last-child) {
+  margin-bottom: 12px;
 }
 </style>

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

@@ -1,10 +1,9 @@
 <template>
-  <div>
+  <div class="cascader-panel-demo-event">
     <tiny-button @click="clearCheckedNodes">清除选中节点</tiny-button>
     <tiny-cascader-panel
       v-model="value"
-      ref="CascaderPanelRef"
-      class="cascader-panel-demo"
+      ref="CascaderPanel"
       :options="optionsCascader"
       @change="change"
       @expand-change="expandChange"
@@ -211,14 +210,14 @@ const optionsCascader = ref([
     ]
   }
 ])
-const CascaderPanelRef = ref()
+const cascaderPanelRef = ref()
 
 function clearCheckedNodes() {
-  CascaderPanelRef.value.clearCheckedNodes()
+  cascaderPanelRef.value.clearCheckedNodes()
 }
 
 function change(value) {
-  const checkVal = CascaderPanelRef.value.getCheckedNodes()
+  const checkVal = cascaderPanelRef.value.getCheckedNodes()
   let mess = ''
 
   if (checkVal.length) {
@@ -238,7 +237,7 @@ function expandChange(value) {
 </script>
 
 <style scoped>
-.cascader-panel-demo {
-  min-height: 200px;
+.cascader-panel-demo-event > :not(:last-child) {
+  margin-bottom: 12px;
 }
 </style>

examples/sites/demos/pc/app/cascader-panel/change.vue

@@ -1,10 +1,9 @@
 <template>
-  <div>
+  <div class="cascader-panel-demo-event">
     <tiny-button @click="clearCheckedNodes">清除选中节点</tiny-button>
     <tiny-cascader-panel
       v-model="value"
-      ref="CascaderPanel"
-      class="cascader-panel-demo"
+      ref="cascaderPanel"
       :options="optionsCascader"
       @change="change"
       @expand-change="expandChange"
@@ -221,13 +220,13 @@ export default {
   },
   methods: {
     clearCheckedNodes() {
-      this.$refs.CascaderPanel.clearCheckedNodes()
+      this.$refs.cascaderPanel.clearCheckedNodes()
     },
     expandChange(value) {
       Modal.message({ message: `节点展开：${value}`, status: 'info' })
     },
     change(value) {
-      const checkVal = this.$refs.CascaderPanel.getCheckedNodes()
+      const checkVal = this.$refs.cascaderPanel.getCheckedNodes()
       let mess = ''
 
       if (checkVal.length) {
@@ -244,7 +243,7 @@ export default {
 </script>
 
 <style scoped>
-.cascader-panel-demo {
-  min-height: 200px;
+.cascader-panel-demo-event > :not(:last-child){
+  margin-bottom: 12px;
 }
 </style>

examples/sites/demos/pc/app/cascader-panel/webdoc/cascader-panel.js

@@ -13,25 +13,18 @@ export default {
       },
       'codeFiles': ['basic-usage.vue']
     },
-    {
-      'demoId': 'change',
-      'name': { 'zh-CN': '事件与方法', 'en-US': 'Selected node changes' },
-      'desc': {
-        'zh-CN':
-          '<p>通过 <code>change</code> 点击节点后触发的事件，回调参数为 选中节点的值\n通过 <code>clearCheckedNodes</code> 清除选中的节点。\n通过 <code>getCheckedNodes</code> 获取选中的节点。</p>\n',
-        'en-US':
-          '<p>The event is triggered after a node is clicked through <code>change</code>. The callback parameter is the value of the selected node.\nYou can clear the selected node through <code>clearCheckedNodes</code>. \n Obtain the selected node through <code>getCheckedNodes</code>. </p>\n'
-      },
-      'codeFiles': ['change.vue']
-    },
     {
       'demoId': 'custom-option-content',
       'name': { 'zh-CN': '自定义节点内容', 'en-US': 'Custom Node Content' },
       'desc': {
-        'zh-CN':
-          '<p>可以通过 <code>scoped slot</code> 对级联面板的备选项的节点内容进行自定义，<code>scoped slot</code> 会传入两个字段 <code>node</code> 和 <code>data</code>，分别表示当前节点的 Node 对象和数据。</p>\n',
-        'en-US':
-          '<p>You can use <code>scoped slot</code> to customize the node content of the options of the cascading panel. <code>scoped slot</code> transfers two fields: <code>node</code> and <code>data</code>, indicating the node object and data of the current node, respectively. </p>\n'
+        'zh-CN': `<p>
+            <div>可以通过 <code>scoped slot</code> 对级联面板的备选项的节点内容进行自定义。</div>
+            <div><code>scoped slot</code> 会传入两个字段 <code>node</code> 和 <code>data</code>，分别表示当前节点的 Node 对象和数据。</div>
+          </p>`,
+        'en-US': `<p>
+          The <div> can customize the node contents of the cascade panel's alternatives through the <code>scoped slot</code>. </div>
+          <div><code>scoped slot</code> passes in two fields, <code>node</code> and <code>data</code>, representing the Node object and data of the current node, respectively. </div>
+        </p>`
       },
       'codeFiles': ['custom-option-content.vue']
     },
@@ -39,12 +32,37 @@ export default {
       'demoId': 'cascader-panel-props',
       'name': { 'zh-CN': 'Props 选项', 'en-US': 'Props Options' },
       'desc': {
-        'zh-CN':
-          '<div class="tip custom-block"><p class="custom-block-title">Props</p>\n<p>通过 <code>children</code> 指定子级选项，默认值为 children。\n通过 <code>emitPath</code> 是否返回由该节点所在的各级菜单的值所组成的数组。\n通过 <code>label</code> 指定显示选项 label 值，默认为 label。\n通过 <code>value</code> 指定值选项 value 值，默认为 value</p>\n</div>\n',
-        'en-US':
-          '<div class="tip custom-block"><p class="custom-block-title">Props</p>\n<p> specifies child options with <code>children</code>. The default value is children. \n Indicates whether to return an array consisting of the values of the menus where the node is located through <code>emitPath</code>. \n Use <code>label</code> to specify the label value of the display option. The default value is label. \n Use <code>value</code> to specify the value of the value option. The default value is value</p>\n</div>\n'
+        'zh-CN': `<p>
+              <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>
+            </p>`,
+        'en-US': `<p>
+            <div> specifies the child options through <code>children</code>, which defaults to children. </div>
+            <div> Whether to return an array of values from the menu levels where the node resides via <code>emitPath</code>. </div>
+            <div> specifies the display option label value by <code>label</code>, which defaults to label. </div>
+            <div> Specifies the value option value by <code>value</code>, which defaults to value. </div>
+          </p>`
       },
       'codeFiles': ['cascader-panel-props.vue']
+    },
+    {
+      'demoId': 'change',
+      'name': { 'zh-CN': '事件与方法', 'en-US': 'Selected node changes' },
+      'desc': {
+        'zh-CN': `<p>
+            <div>通过 <code>change</code> 点击节点后触发的事件，回调参数为"选中节点的值"。</div>
+            <div>通过 <code>clearCheckedNodes</code> 清除选中的节点。</div>
+            <div>通过 <code>getCheckedNodes</code> 获取选中的节点。</dic>
+          </p>`,
+        'en-US': `<p>
+            <div> The event triggered by clicking the node through <code>change</code>, with the callback parameter "Select the value of the node". </div>
+            <div> Clear the selected nodes with <code>clearCheckedNodes</code>. </div>
+            <div> Get the selected nodes from <code>getCheckedNodes</code>. </dic>
+          </p>`
+      },
+      'codeFiles': ['change.vue']
     }
   ],
   apis: [
@@ -55,9 +73,12 @@ export default {
         {
           'name': 'modelValue / v-model',
           'type': 'ICascaderPanelNodePropValue',
-          'typeAnchorName': 'ICascaderPanelNodeValue',
+          'typeAnchorName': 'ICascaderPanelNodePropValue',
           'defaultValue': '',
-          'desc': { 'zh-CN': '选中项绑定值', 'en-US': 'Bound value of the selected item' },
+          'desc': {
+            'zh-CN': `选中项绑定值, 其类型由 props.multiple、props.emitPath 共同决定`,
+            'en-US': `Select an item binding value whose type is determined by both props.multiple and props.emitPath`
+          },
           'demoId': 'basic-usage'
         },
         {
@@ -87,6 +108,7 @@ export default {
         {
           'name': 'change',
           'type': '(value: ICascaderPanelNodePropValue) => void',
+          'typeAnchorName': 'ICascaderPanelNodePropValue',
           'defaultValue': '',
           'desc': {
             'zh-CN': '当选中节点变化时触发; 回调参数为 选中节点的值',
@@ -98,9 +120,10 @@ export default {
         {
           'name': 'expand-change',
           'type': '(value: ICascaderPanelNodeValue[]) => void',
+          'typeAnchorName': 'ICascaderPanelNodeValue',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '当展开节点发生变化时触发; 回调参数为 各父级选项值组成的数组 (Array类型)',
+            'zh-CN': '当展开节点发生变化时触发; 回调参数为 各父级选项值组成的数组 (Array 类型)',
             'en-US':
               'This event is triggered when the expanded node changes. arg: The callback parameter is an array (Array type) consisting of parent option values.'
           },
@@ -113,7 +136,8 @@ export default {
           'type': '',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '自定义备选项的节点内容，参数为 { node: ICascaderPanelNode, data: ICascaderPanelData }，分别为当前节点的 Node 对象和数据',
+            'zh-CN':
+              '自定义备选项的节点内容，参数为 { node: ICascaderPanelNode, data: ICascaderPanelData }，分别为当前节点的 Node 对象和数据',
             'en-US':
               'User-defined candidate node content. The parameter is {node, data}, which indicates the node object and data of the current node.'
           },
@@ -124,6 +148,7 @@ export default {
         {
           'name': 'getCheckedNodes',
           'type': '(leafOnly: boolean = false) => ICascaderPanelNode[]',
+          'typeAnchorName': 'ICascaderPanelNode',
           'defaultValue': '',
           'desc': {
             'zh-CN': '获取选中的节点;参数为 (leafOnly) 是否只是获取子节点，默认值为 false',
@@ -143,7 +168,7 @@ export default {
       'casprops: ICascaderPanelConfig': [
         {
           'name': 'expandTrigger',
-          'type': '"click" | "hover"',
+          'type': `'click' | 'hover'`,
           'defaultValue': 'click',
           'desc': {
             'zh-CN': '次级菜单的展开方式',
@@ -194,7 +219,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              '加载动态数据的方法，仅在 lazy 为 true 时有效;参数说明： node为当前点击的节点，resolve为数据加载完成的回调(必须调用)',
+              '加载动态数据的方法，仅在 lazy 为 true 时有效;参数说明： node 为当前点击的节点，resolve 为数据加载完成的回调(必须调用)',
             'en-US':
               'Method for loading dynamic data. This parameter is valid only when lazy is set to true. Parameter description: node indicates the currently clicked node. resolve indicates the callback after data loading is complete (mandatory).'
           }

examples/sites/demos/pc/app/cascader/check-strictly-composition-api.vue

@@ -1,7 +1,9 @@
 <template>
-  <div>
-    <tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
-    value:{{ value }}
+  <div class="demo-tiny-cascader-check-strictly">
+    <div>value: {{ value }}</div>
+    <div>
+      <tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
+    </div>
   </div>
 </template>
 
@@ -205,3 +207,9 @@ const options = ref([
   }
 ])
 </script>
+
+<style scoped>
+.demo-tiny-cascader-check-strictly > :not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

examples/sites/demos/pc/app/cascader/check-strictly.vue

@@ -1,7 +1,9 @@
 <template>
-  <div>
-    <tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
-    value:{{ value }}
+  <div class="demo-tiny-cascader-check-strictly">
+    <div>value: {{ value }}</div>
+    <div>
+      <tiny-cascader :options="options" :props="{ checkStrictly: true }" v-model="value"></tiny-cascader>
+    </div>
   </div>
 </template>
 
@@ -213,3 +215,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-tiny-cascader-check-strictly > :not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

examples/sites/demos/pc/app/cascader/clearable-composition-api.vue

@@ -1,13 +1,5 @@
 <template>
-  <tiny-cascader
-    v-model="value"
-    :options="options"
-    clearable
-    separator="+"
-    size="medium"
-    popper-class="custom-class"
-    :popper-append-to-body="false"
-  ></tiny-cascader>
+  <tiny-cascader v-model="value" :options="options" clearable separator="+"></tiny-cascader>
 </template>
 
 <script setup>

examples/sites/demos/pc/app/cascader/clearable.spec.ts

@@ -8,6 +8,4 @@ test('可清空', async ({ page }) => {
   await page.locator('.tiny-input__suffix-inner > .tiny-svg').click()
   const textClear = await page.getByRole('textbox', { name: '请选择' }).inputValue()
   await expect(textClear).toEqual('')
-  const medium = page.locator('.tiny-cascader--medium')
-  await expect(medium).toBeVisible()
 })

examples/sites/demos/pc/app/cascader/clearable.vue

@@ -1,13 +1,5 @@
 <template>
-  <tiny-cascader
-    v-model="value"
-    :options="options"
-    clearable
-    separator="+"
-    size="medium"
-    popper-class="custom-class"
-    :popper-append-to-body="false"
-  ></tiny-cascader>
+  <tiny-cascader v-model="value" :options="options" clearable separator="+"></tiny-cascader>
 </template>
 
 <script>

examples/sites/demos/pc/app/cascader/collapse-tags-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader v-model="value" :options="options" :props="props" collapse-tags clearable></tiny-cascader>
+  <tiny-cascader v-model="value" :options="options" :props="props" collapse-tags></tiny-cascader>
 </template>
 
 <script setup>

examples/sites/demos/pc/app/cascader/collapse-tags.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader v-model="value" :options="options" :props="props" collapse-tags clearable></tiny-cascader>
+  <tiny-cascader v-model="value" :options="options" :props="props" collapse-tags></tiny-cascader>
 </template>
 
 <script>

examples/sites/demos/pc/app/cascader/disabled-items-composition-api.vue

@@ -1,7 +1,9 @@
 <template>
-  <tiny-cascader :options="optionsDis"></tiny-cascader>
+  <div class="cascader-demo-disabled">
+    <tiny-cascader :options="optionsDis"></tiny-cascader>
+    <tiny-cascader :options="optionsDis" disabled></tiny-cascader>
+  </div>
 </template>
-
 <script setup>
 import { ref } from 'vue'
 import { Cascader as TinyCascader } from '@opentiny/vue'
@@ -202,3 +204,9 @@ const optionsDis = ref([
   }
 ])
 </script>
+
+<style scoped>
+.cascader-demo-disabled > :not(:last-child){
+  margin-right: 12px;
+}
+</style>

examples/sites/demos/pc/app/cascader/disabled-items.spec.ts

@@ -3,9 +3,11 @@ import { test, expect } from '@playwright/test'
 test('禁用选项', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('cascader#disabled-items')
-  await page.getByRole('textbox', { name: '请选择' }).click()
-  const cascader = page.locator(
-    '.tiny-cascader-menu > .tiny-cascader-menu__wrap > .tiny-cascader-menu__list > .is-disabled'
-  )
-  await expect(cascader).toBeVisible()
+  await page.locator('.tiny-cascader').getByPlaceholder('请选择').nth(1).click()
+  const cascader1 = page.getByRole('menuitem', { name: '指南' })
+  await expect(cascader1).toHaveClass(/is-disabled/)
+
+  await page.getByPlaceholder('请选择').nth(1).click()
+  const cascader2 = page.locator('.tiny-cascader.is-disabled .tiny-input')
+  await expect(cascader2).toHaveClass(/is-disabled/)
 })

examples/sites/demos/pc/app/cascader/disabled-items.vue

@@ -1,5 +1,8 @@
 <template>
-  <tiny-cascader :options="optionsDis"></tiny-cascader>
+  <div class="cascader-demo-disabled">
+    <tiny-cascader :options="optionsDis"></tiny-cascader>
+    <tiny-cascader :options="optionsDis" disabled></tiny-cascader>
+  </div>
 </template>
 
 <script>
@@ -210,3 +213,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.cascader-demo-disabled > :not(:last-child){
+  margin-right: 12px;
+}
+</style>

examples/sites/demos/pc/app/cascader/events-composition-api.vue

@@ -1,10 +1,9 @@
 <template>
-  <div>
-    value:{{ value }}
+  <div class="demo-tiny-cascader-event">
+    <div>value: {{ value }}</div>
     <tiny-cascader
       v-model="value"
-      ref="cascaderRef"
-      filterable
+      ref="cascader"
       :options="options"
       @change="handleChange"
       @blur="handleblur"
@@ -247,3 +246,9 @@ function handleChange(value) {
   })
 }
 </script>
+
+<style scoped>
+.demo-tiny-cascader-event > :not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

examples/sites/demos/pc/app/cascader/events.vue

@@ -1,10 +1,9 @@
 <template>
-  <div>
-    value:{{ value }}
+  <div class="demo-tiny-cascader-event">
+    <div>value: {{ value }}</div>
     <tiny-cascader
       v-model="value"
       ref="cascader"
-      filterable
       :options="options"
       @change="handleChange"
       @blur="handleblur"
@@ -251,3 +250,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-tiny-cascader-event > :not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

examples/sites/demos/pc/app/cascader/size-composition-api.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="tiny-demo-cascader-size">
+    <tiny-cascader v-model="value" :options="options" size="mini"></tiny-cascader>
+    <tiny-cascader v-model="value" :options="options" size="small"></tiny-cascader>
+    <tiny-cascader v-model="value" :options="options" size="medium"></tiny-cascader>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Cascader as TinyCascader } from '@opentiny/vue'
+
+const value = ref(['zhinan', 'anzhuang', 'xiangmudengji'])
+const options = ref([
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'anzhuang',
+        label: '安装',
+        children: [
+          {
+            value: 'xiangmudengji',
+            label: '项目登记'
+          },
+          {
+            value: 'huanjingzhunbei',
+            label: '环境准备'
+          },
+          {
+            value: 'anzhuangcli',
+            label: '安装 CLI'
+          },
+          {
+            value: 'chuangjianxiangmu',
+            label: '创建项目'
+          }
+        ]
+      }
+    ]
+  }
+])
+</script>
+
+<style scoped>
+.tiny-demo-cascader-size {
+  display: flex;
+  gap: 12px;
+}
+</style>

examples/sites/demos/pc/app/cascader/size.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('size', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('cascader#size')
+
+  await expect(page.locator('.tiny-cascader.tiny-cascader--mini input')).toHaveCSS('height', '24px')
+
+  await expect(page.locator('.tiny-cascader.tiny-cascader--small input')).toHaveCSS('height', '32px')
+
+  await expect(page.locator('.tiny-cascader.tiny-cascader--medium input')).toHaveCSS('height', '40px')
+
+})

examples/sites/demos/pc/app/cascader/size.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="tiny-demo-cascader-size">
+    <tiny-cascader v-model="value" :options="options" size="mini"></tiny-cascader>
+    <tiny-cascader v-model="value" :options="options" size="small"></tiny-cascader>
+    <tiny-cascader v-model="value" :options="options" size="medium"></tiny-cascader>
+  </div>
+</template>
+
+<script>
+import { Cascader } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCascader: Cascader
+  },
+  data() {
+    return {
+      value: ['zhinan', 'anzhuang', 'xiangmudengji'],
+      options: [
+        {
+          value: 'zhinan',
+          label: '指南',
+          children: [
+            {
+              value: 'anzhuang',
+              label: '安装',
+              children: [
+                {
+                  value: 'xiangmudengji',
+                  label: '项目登记'
+                },
+                {
+                  value: 'huanjingzhunbei',
+                  label: '环境准备'
+                },
+                {
+                  value: 'anzhuangcli',
+                  label: '安装 CLI'
+                },
+                {
+                  value: 'chuangjianxiangmu',
+                  label: '创建项目'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-demo-cascader-size {
+  display: flex;
+  gap: 12px;
+}
+</style>

examples/sites/demos/pc/app/cascader/webdoc/cascader.js

@@ -27,10 +27,14 @@ export default {
       'demoId': 'disabled-items',
       'name': { 'zh-CN': '禁用选项', 'en-US': 'Disable Options' },
       'desc': {
-        'zh-CN': 
-          `<p>通过在数据源中设置 <code>disabled</code> 字段来声明该选项是禁用的，在默认情况下，Cascader 会检查数据中每一项的 <code>disabled</code> 字段是否为 <code>true</code></p>`,
-        'en-US':
-          '<p>Declare that the option is disabled by setting the <code>disabled</code> field in the data source; by default, Cascader checks to see if the <code>disabled</code> field is <code>true</code> for each item in the data. </p>'
+        'zh-CN': `<p>
+            <div>通过在数据源<code>option</code>中设置 <code>disabled</code> 字段来声明该选项是禁用的，在默认情况下，Cascader 会检查数据中每一项的 <code>disabled</code> 字段是否为 <code>true</code>。</div>
+            <div>也可以通过直接设置 <code>disabled</code> 可以禁用组件。</div>
+          </p>`,
+        'en-US': `<p>
+            <div>Declare that the option is disabled by setting the <code>disabled</code> field in the data source; by default, Cascader checks to see if the <code>disabled</code> field is <code>true</code> for each item in the data. </div>
+            <div> Components can also be disabled by setting <code>disabled</code> directly.</div>
+          </p>`
       },
       'codeFiles': ['disabled-items.vue']
     },
@@ -53,13 +57,13 @@ export default {
       'codeFiles': ['clearable.vue']
     },
     {
-      'demoId': 'clearable2',
+      'demoId': 'size',
       'name': { 'zh-CN': '尺寸', 'en-US': 'Dimension' },
       'desc': {
         'zh-CN': '<p>通过 <code>size</code> 属性设置尺寸。</p>\n',
         'en-US': '<p>Sets the size through the <code>size</code> attribute. </p>\n'
       },
-      'codeFiles': ['clearable.vue']
+      'codeFiles': ['size.vue']
     },
     {
       'demoId': 'default-multiple',
@@ -75,9 +79,9 @@ export default {
       'name': { 'zh-CN': '折叠展示 Tag', 'en-US': 'Fold Tag' },
       'desc': {
         'zh-CN':
-          '<p>在开启多选模式后，默认情况下会展示所有已选中的选项的 Tag，可以使用 <code>collapse-tags</code> 来折叠 Tag 。\n通过 <code>disabled</code> 设置组件是否禁用，默认值为 false 。</p>\n',
+          '<p>在开启多选模式后，默认情况下会展示所有已选中的选项的 Tag，可以使用 <code>collapse-tags</code> 来折叠 Tag 。</p>',
         'en-US':
-          '<p>After the multi-selection mode is enabled, tags of all selected options are displayed by default. You can use <code>collapse-tags</code> to collapse tags. \n Use <code>disabled</code> to set whether to disable the component. The default value is false. </p>\n'
+          '<p>After the multi-selection mode is enabled, tags of all selected options are displayed by default. You can use <code>collapse-tags</code> to collapse tags. </p>'
       },
       'codeFiles': ['collapse-tags.vue']
     },
@@ -106,7 +110,7 @@ export default {
       'demoId': 'auto-load',
       'name': { 'zh-CN': '动态加载', 'en-US': 'Dynamic loading' },
       'desc': {
-        'zh-CN':`
+        'zh-CN': `
           <p>
             当选中某一级时，动态加载该级下的选项。通过 <code>props</code> 属性中的 <code>lazy</code> 开启动态加载，并通过 <code>lazyload</code> 来设置加载数据源的方法。</br>
             <code>lazyload</code> 方法有两个参数，第一个参数 node 为当前点击的节点，第二个 resolve 为数据加载完成的回调(必须调用)。</br>
@@ -149,16 +153,14 @@ export default {
       'demoId': 'filterable',
       'name': { 'zh-CN': '可搜索', 'en-US': 'Searchable' },
       'desc': {
-        'zh-CN':
-          `<p>
+        'zh-CN': `<p>
             将 <code>filterable</code> 赋值为 <code>true</code> 即可打开搜索功能，默认会匹配节点的 <code>label</code> 或所有父节点的 <code>label</code> (由 <code>show-all-levels</code> 决定)中包含输入值的选项。</br>
-            使用<code>empty</code> 插槽设置无匹配选项时显示的内容，使用<code>debounce</code>设置搜索延迟
+            使用<code>empty</code> 插槽设置无匹配选项时显示的内容，使用<code>debounce</code>设置搜索延迟。
           </p>`,
-        'en-US':
-          `<p>
+        'en-US': `<p>
             Set <code>filterable</code> to <code>true</code> to turn on the search function, By default, the <code>label</code> of the node or the <code>label</code> of all parent nodes (as determined by <code>show-all-levels</code>) will match the option containing the input value. </br>
-            Use the <code>empty</code> slot to set what will be displayed if there is no matching option, and use <code>debounce</code> to set the search delay
-          </p>`,
+            Use the <code>empty</code> slot to set what will be displayed if there is no matching option, and use <code>debounce</code> to set the search delay.
+          </p>`
       },
       'codeFiles': ['filterable.vue']
     },
@@ -197,19 +199,17 @@ export default {
       'demoId': 'events',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN':
-          `<p>
+        'zh-CN': `<p>
             Cascader 级联选择器的事件有：<code>change</code>、<code>expand-change</code>、<code>blur</code>、<code>focus</code>、<code>visible-change</code>。
-            使用 <code>props.emitPath</code> 能设置节点的返回类型。
+            <div>使用 <code>props.emitPath</code> 能设置节点的返回类型。</div>
           </p>`,
-        'en-US':
-          `<p>
+        'en-US': `<p>
             Cascader cascade selector events include: <code>change</code>, <code>expand-change</code>, <code>blur</code>, <code>focus</code>, < code>visible-change</code>. 
             Use <code>props.emitPath</code> to set the return type of the node.
           </p>`
       },
       'codeFiles': ['events.vue']
-    },
+    }
   ],
   apis: [
     {
@@ -221,7 +221,11 @@ export default {
           'type': 'ICascaderPanelNodePropValue',
           'typeAnchorName': 'ICascaderPanelNodeValue',
           'defaultValue': '',
-          'desc': { 'zh-CN': '选中项绑定值, 其类型由props.multiple、props.emitPath共同决定', 'en-US': 'Binding value of the selected item, its type is determined by props.multiple, props.emitPath together.' },
+          'desc': {
+            'zh-CN': '选中项绑定值, 其类型由 props.multiple、props.emitPath 共同决定',
+            'en-US':
+              'Binding value of the selected item, its type is determined by props.multiple, props.emitPath together.'
+          },
           'demoId': 'clearable'
         },
         {
@@ -270,18 +274,18 @@ export default {
         },
         {
           'name': 'size',
-          'type': '"medium" | "small" | "mini"',
+          'type': `'medium' | 'small' | 'mini'`,
           'defaultValue': '',
           'desc': {
             'zh-CN': '尺寸',
             'en-US': 'Dimension;'
           },
-          'demoId': 'clearable2'
+          'demoId': 'size'
         },
         {
           'name': 'placeholder',
           'type': 'string',
-          'defaultValue': '请选择',
+          'defaultValue': `'请选择'`,
           'desc': { 'zh-CN': '输入框占位文本', 'en-US': 'Placeholder text in the text box' },
           'demoId': 'filterable'
         },
@@ -319,7 +323,7 @@ export default {
         {
           'name': 'separator',
           'type': 'string',
-          'defaultValue': '/',
+          'defaultValue': `'/'`,
           'desc': { 'zh-CN': '选项分隔符', 'en-US': 'Option separator' },
           'demoId': 'clearable1'
         },
@@ -333,6 +337,7 @@ export default {
         {
           'name': 'filter-method',
           'type': '(node: ICascaderPanelNode, keyword: string) => boolean',
+          'typeAnchorName': 'ICascaderPanelNode',
           'defaultValue': '',
           'desc': {
             'zh-CN':
@@ -375,17 +380,18 @@ export default {
         {
           'name': 'change',
           'type': '(value: ICascaderPanelNodePropValue) => void',
+          'typeAnchorName': 'ICascaderPanelNodePropValue',
           'defaultValue': '',
           'desc': {
             'zh-CN': '当选中节点变化时触发',
-            'en-US':
-              'This event is triggered when the selected node changes.'
+            'en-US': 'This event is triggered when the selected node changes.'
           },
           'demoId': 'events'
         },
         {
           'name': 'expand-change',
           'type': '(value: ICascaderPanelNodeValue[]) => void',
+          'typeAnchorName': 'ICascaderPanelNodeValue',
           'defaultValue': '',
           'desc': {
             'zh-CN': '当展开节点发生变化时触发',
@@ -400,8 +406,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '当失去焦点时触发',
-            'en-US':
-              'This event is triggered when the focus is lost.'
+            'en-US': 'This event is triggered when the focus is lost.'
           },
           'demoId': 'events'
         },
@@ -411,8 +416,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '当获得焦点时触发',
-            'en-US':
-              'This event is triggered when the focus is obtained.'
+            'en-US': 'This event is triggered when the focus is obtained.'
           },
           'demoId': 'events'
         },
@@ -422,19 +426,18 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '下拉框出现/隐藏时触发',
-            'en-US':
-              'This event is triggered when the drop-down list box is displayed or hidden.'
+            'en-US': 'This event is triggered when the drop-down list box is displayed or hidden.'
           },
           'demoId': 'events'
         },
         {
           'name': 'remove-tag',
           'type': '(removeValue: ICascaderPanelNodeValue[]) => void',
+          'typeAnchorName': 'ICascaderPanelNodeValue',
           'defaultValue': '',
           'desc': {
             'zh-CN': '在多选模式下，移除Tag时触发',
-            'en-US':
-              'In multi-choice mode, this event is triggered when a tag is removed.'
+            'en-US': 'In multi-choice mode, this event is triggered when a tag is removed.'
           },
           'demoId': 'default-multiple'
         }
@@ -452,7 +455,8 @@ export default {
           'type': '',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '自定义备选项的节点内容，参数为 { node: ICascaderPanelNode, data: ICascaderPanelData }，分别为当前节点的 Node 对象和数据',
+            'zh-CN':
+              '自定义备选项的节点内容，参数为 { node: ICascaderPanelNode, data: ICascaderPanelData }，分别为当前节点的 Node 对象和数据',
             'en-US':
               'User-defined candidate node content. The parameter is {node, data}, which indicates the node object and data of the current node.'
           }
@@ -462,11 +466,11 @@ export default {
         {
           'name': 'getCheckedNodes',
           'type': '(leafOnly: boolean = false) => ICascaderPanelNode[]',
+          'typeAnchorName': 'ICascaderPanelNode',
           'defaultValue': '',
           'desc': {
             'zh-CN': '获取选中的节点',
-            'en-US':
-              'Obtain the selected node'
+            'en-US': 'Obtain the selected node'
           },
           'demoId': 'events'
         }
@@ -474,7 +478,7 @@ export default {
       'casprops: ICascaderPanelConfig': [
         {
           'name': 'expandTrigger',
-          'type': '"click" | "hover"',
+          'type': `'click' | 'hover'`,
           'defaultValue': 'click',
           'desc': {
             'zh-CN': '次级菜单的展开方式',