docs(cascader): [cascader, cascader-panel] Improve documentation (#1065)

examples/sites/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',

examples/sites/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',

examples/sites/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"

examples/sites/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"

examples/sites/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>

examples/sites/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>

examples/sites/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>label</code> 指定显示选项 label 值，默认为 'label'。</div>
-              <div>通过 <code>value</code> 指定值选项 value 值，默认为 value。</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'

examples/sites/demos/pc/app/cascader/auto-load-checkStrictly-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader :props="propsAuto"></tiny-cascader>
+  <tiny-cascader v-model="value" :props="propsAuto"></tiny-cascader>
 </template>
 
 <script setup>
@@ -7,6 +7,7 @@ import { ref } from 'vue'
 import { Cascader as TinyCascader } from '@opentiny/vue'
 
 let id = 0
+const value = ref('')
 const propsAuto = ref({
   lazy: true,
   checkStrictly: true,

examples/sites/demos/pc/app/cascader/auto-load-checkStrictly.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader :props="propsAuto"></tiny-cascader>
+  <tiny-cascader v-model="value" :props="propsAuto"></tiny-cascader>
 </template>
 
 <script>
@@ -12,6 +12,7 @@ export default {
   data() {
     let id = 0
     return {
+      value: '',
       propsAuto: {
         lazy: true,
         checkStrictly: true,

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader :props="propsAuto"></tiny-cascader>
+  <tiny-cascader v-model="value" :props="propsAuto"></tiny-cascader>
 </template>
 
 <script setup>
@@ -7,6 +7,8 @@ import { ref } from 'vue'
 import { Cascader as TinyCascader } from '@opentiny/vue'
 
 let id = 0
+const value = ref('')
+
 const propsAuto = ref({
   lazy: true,
   lazyLoad(node, resolve) {

examples/sites/demos/pc/app/cascader/auto-load.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-cascader :props="propsAuto"></tiny-cascader>
+  <tiny-cascader v-model="value" :props="propsAuto"></tiny-cascader>
 </template>
 
 <script>
@@ -12,6 +12,7 @@ export default {
   data() {
     let id = 0
     return {
+      value: '',
       propsAuto: {
         lazy: true,
         lazyLoad(node, resolve) {

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

@@ -3,7 +3,7 @@
     <div>value: {{ value }}</div>
     <tiny-cascader
       v-model="value"
-      ref="cascader"
+      ref="cascaderRef"
       :options="options"
       @change="handleChange"
       @blur="handleblur"

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

@@ -4,7 +4,200 @@
 
 <script setup>
 import { Cascader as TinyCascader } from '@opentiny/vue'
-import { reactive } from 'vue'
+import { ref } from 'vue'
 
-const options = reactive([])
+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>

examples/sites/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>

examples/sites/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>
+            <div>当选中某一级时，动态加载该级下的选项。</dvi>
-            <code>lazyload</code> 方法有两个参数，第一个参数 node 为当前点击的节点，第二个 resolve 为数据加载完成的回调(必须调用)。</br>
+            <div>通过 <code>props</code> 属性中的 <code>lazy</code> 开启动态加载，并通过 <code>lazyload</code> 来设置加载数据源的方法。</div>
-            为了更准确的显示节点的状态，默认地可以使用<code>leaf</code>字段对节点数据添加是否为叶子节点的标志位，否则会简单地以有无子节点来判断是否为叶子节点。
+            <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>
+            <div> When a level is selected, dynamically loads the options under that level. </dvi>
-            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>
+            <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>
-            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>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':
+        'zh-CN': `<p>
-          '<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',
+          <div>通过 <code>props.children</code> 指定选项的子选项，默认为 'children' 。</div>
-        'en-US':
+          <div>通过 <code>props.value</code> 指定指定选项的 value 值，默认为 'value' 。</div>
-          '<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'
+          <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']
     },
@@ -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'