ソースを参照

feat: 级联组件修复

suzigang 3 年 前
コミット
1a1f013e1f

+ 0 - 2
src/config.json

@@ -760,7 +760,6 @@
         {
           "version": "3.0.0",
           "name": "InfiniteLoading",
-          "taro": true,
           "tarodoc": true,
           "type": "component",
           "cName": "滚动加载",
@@ -828,7 +827,6 @@
         {
           "version": "3.0.0",
           "name": "Audio",
-          "taro": true,
           "tarodoc": true,
           "type": "component",
           "cName": "音频播放器",

+ 111 - 167
src/packages/__VUE/cascader/doc.en-US.md

@@ -20,96 +20,84 @@ Pass in the `options` list.
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="Select address">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="Please select an address"
-      type="text"
-    />
-    <nut-cascader
-      title="Select address"
-      v-model:visible="state.visible"
-      v-model="state.value"
-      @change="events.change"
-      @path-change="events.pathChange"
-      :options="state.options"
-    ></nut-cascader>
-  </nut-form-item>
- </nut-form>
+  <nut-cell title="select address" :desc="demo1.value.toString() || 'please select address'" @click="demo1.visible = true"> </nut-cell>
+  <nut-cascader
+    title="select address"
+    v-model:visible="demo1.visible"
+    v-model="demo1.value"
+    @change="events.change"
+    @pathChange="events.pathChange"
+    :options="demo1.options"
+  ></nut-cascader>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
-  setup() {
-    // 基础用法
-    const state = reactive({
-      visible: false,
-      // value: ['湖南'],
-      value: [],
-      options: [
-        {
-          value: '浙江',
-          text: '浙江',
-          children: [
-            {
-              value: '杭州',
-              text: '杭州',
-              disabled: true,
-              children: [
-                { value: '西湖区', text: '西湖区' },
-                { value: '余杭区', text: '余杭区' }
-              ]
-            },
-            {
-              value: '温州',
-              text: '温州',
-              children: [
-                { value: '鹿城区', text: '鹿城区' },
-                { value: '瓯海区', text: '瓯海区' }
-              ]
-            }
-          ]
-        },
-        {
-          value: '湖南',
-          text: '湖南',
-          disabled: true
-        },
-        {
-          value: '福建',
-          text: '福建',
-          children: [
-            {
-              value: '福州',
-              text: '福州',
-              children: [
-                { value: '鼓楼区', text: '鼓楼区' },
-                { value: '台江区', text: '台江区' }
-              ]
-            }
-          ]
-        }
-      ]
-    });
-    const events = {
-      change(...args: any) {
-        console.log('change', ...args);
+setup() {
+  // 基础用法
+  const demo1 = reactive({
+    visible: false,
+    value: ['湖南'],
+    options: [
+      {
+        value: '浙江',
+        text: '浙江',
+        children: [
+          {
+            value: '杭州',
+            text: '杭州',
+            disabled: true,
+            children: [
+              { value: '西湖区', text: '西湖区' },
+              { value: '余杭区', text: '余杭区' }
+            ]
+          },
+          {
+            value: '温州',
+            text: '温州',
+            children: [
+              { value: '鹿城区', text: '鹿城区' },
+              { value: '瓯海区', text: '瓯海区' }
+            ]
+          }
+        ]
       },
-      pathChange(...args: any) {
-        console.log('pathChange', ...args);
+      {
+        value: '湖南',
+        text: '湖南',
+        disabled: true
+      },
+      {
+        value: '福建',
+        text: '福建',
+        children: [
+          {
+            value: '福州',
+            text: '福州',
+            children: [
+              { value: '鼓楼区', text: '鼓楼区' },
+              { value: '台江区', text: '台江区' }
+            ]
+          }
+        ]
       }
-    };
-
-    return {
-      state,
-      events
+    ]
+  });
+  const events = {
+    change(...args: any) {
+      console.log('change', ...args);
+    },
+    pathChange(...args: any) {
+      console.log('pathChange', ...args);
     }
+  };
+
+  return {
+    demo1,
+    events
   }
 }
+}
 </script>
 ```
 :::
@@ -120,36 +108,25 @@ use `textKey`、`valueKey`、`childrenKey`Specify the property name.
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="Select address">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="Please select an address"
-      type="text"
-    />
+    <nut-cell title="select address" :desc="demo2.value.toString() || 'please select address'" @click="demo2.visible = true"> </nut-cell>
     <nut-cascader
-      title="Select address"
-      v-model:visible="state.visible"
-      v-model="state.value"
-      text-key="text"
+      title="select address"
+      v-model:visible="demo2.visible"
+      v-model="demo2.value"
+      labelKey="text"
       @change="events.change"
-      @path-change="events.pathChange"
-      value-key="text"
-      children-key="items"
-      :options="state.options"
+      @pathChange="events.pathChange"
+      valueKey="text"
+      childrenKey="items"
+      :options="demo2.options"
     ></nut-cascader>
-  </nut-form-item>
- </nut-form>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
     // 自定义属性名称
-    const state = reactive({
+    const demo2 = reactive({
       visible: false,
       value: ['福建', '福州', '台江区'],
       options: [
@@ -187,7 +164,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo2, events };
   }
 }
 </script>
@@ -200,33 +177,22 @@ Use `lazy` to identify whether data needs to be obtained dynamically. At this ti
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="Select address">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="Please select an address"
-      type="text"
-    />
+    <nut-cell title="select address" :desc="demo3.value.toString() || 'please select address'" @click="demo3.visible = true"> </nut-cell>
     <nut-cascader
-      title="Select address"
-      v-model:visible="state.visible"
-      v-model="state.value"
+      title="select address"
+      v-model:visible="demo3.visible"
+      v-model="demo3.value"
       @change="events.change"
-      @path-change="events.pathChange"
+      @pathChange="events.pathChange"
       lazy
-      :lazy-load="state.lazyLoad"
+      :lazyLoad="demo3.lazyLoad"
     ></nut-cascader>
-  </nut-form-item>
- </nut-form>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
-    const state = reactive({
+    const demo3 = reactive({
       visible: false,
       value: ['A0', 'A12', 'A23', 'A32'],
       lazyLoad(node: any, resolve: (children: any) => void) {
@@ -250,7 +216,7 @@ export default {
               { value: value3, text: value3, leaf: level >= 6 }
             ]);
           }
-        }, 300);
+        }, 3000);
       }
     });
     const events = {
@@ -262,7 +228,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo3, events };
   }
 }
 </script>
@@ -274,34 +240,23 @@ export default {
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="Select address">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="Please select an address"
-      type="text"
-    />
-    <nut-cascader
-      title="Select address"
-      v-model:visible="state.visible"
-      v-model="state.value"
-      @change="events.change"
-      @path-change="events.pathChange"
-      :options="state.options"
-      lazy
-      :lazy-load="state.lazyLoad"
-    ></nut-cascader>
-  </nut-form-item>
- </nut-form>
+  <nut-cell title="select address" :desc="demo4.value.toString() || 'please select address'" @click="demo4.visible = true"> </nut-cell>
+  <nut-cascader
+    title="select address"
+    v-model:visible="demo4.visible"
+    v-model="demo4.value"
+    @change="events.change"
+    @pathChange="events.pathChange"
+    :options="demo4.options"
+    lazy
+    :lazyLoad="demo4.lazyLoad"
+  ></nut-cascader>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
-    const state = reactive({
+    const demo4 = reactive({
       visible: false,
       value: [],
       options: [
@@ -338,7 +293,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo4, events };
   }
 }
 </script>
@@ -353,33 +308,22 @@ If your data is a flat structure that can be converted into a tree structure, yo
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="Select address" @click="state.visible = true">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="Please select an address"
-      type="text"
-    />
+    <nut-cell title="select address" :desc="demo5.value.toString() || 'please select address'" @click="demo5.visible = true"> </nut-cell>
     <nut-cascader
-      title="Select address"
-      v-model:visible="state.visible"
-      v-model="state.value"
+      title="select address"
+      v-model:visible="demo5.visible"
+      v-model="demo5.value"
       @change="events.change"
-      @path-change="events.pathChange"
-      :options="state.options"
-      :convertConfig="state.convertConfig"
+      @pathChange="events.pathChange"
+      :options="demo5.options"
+      :convertConfig="demo5.convertConfig"
     ></nut-cascader>
-  </nut-form-item>
- </nut-form>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
-    const state = reactive({
+    const demo5 = reactive({
       visible: false,
       value: ['广东省', '广州市'],
       convertConfig: {
@@ -405,7 +349,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo5, events };
   }
 }
 </script>

+ 108 - 163
src/packages/__VUE/cascader/doc.md

@@ -20,95 +20,84 @@ app.use(Cascader);
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="选择地址">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="请选择地址"
-      type="text"
-    />
-    <nut-cascader
-      title="地址选择"
-      v-model:visible="state.visible"
-      v-model="state.value"
-      @change="events.change"
-      @path-change="events.pathChange"
-      :options="state.options"
-    ></nut-cascader>
-  </nut-form-item>
- </nut-form>
+  <nut-cell title="选择地址" :desc="demo1.value.toString() || '请选择地址'" @click="demo1.visible = true"> </nut-cell>
+  <nut-cascader
+    title="地址选择"
+    v-model:visible="demo1.visible"
+    v-model="demo1.value"
+    @change="events.change"
+    @pathChange="events.pathChange"
+    :options="demo1.options"
+  ></nut-cascader>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
-  setup() {
-    // 基础用法
-    const state = reactive({
-      visible: false,
-      value: [],
-      options: [
-        {
-          value: '浙江',
-          text: '浙江',
-          children: [
-            {
-              value: '杭州',
-              text: '杭州',
-              disabled: true,
-              children: [
-                { value: '西湖区', text: '西湖区' },
-                { value: '余杭区', text: '余杭区' }
-              ]
-            },
-            {
-              value: '温州',
-              text: '温州',
-              children: [
-                { value: '鹿城区', text: '鹿城区' },
-                { value: '瓯海区', text: '瓯海区' }
-              ]
-            }
-          ]
-        },
-        {
-          value: '湖南',
-          text: '湖南',
-          disabled: true
-        },
-        {
-          value: '福建',
-          text: '福建',
-          children: [
-            {
-              value: '福州',
-              text: '福州',
-              children: [
-                { value: '鼓楼区', text: '鼓楼区' },
-                { value: '台江区', text: '台江区' }
-              ]
-            }
-          ]
-        }
-      ]
-    });
-    const events = {
-      change(...args: any) {
-        console.log('change', ...args);
+setup() {
+  // 基础用法
+  const demo1 = reactive({
+    visible: false,
+    value: ['湖南'],
+    options: [
+      {
+        value: '浙江',
+        text: '浙江',
+        children: [
+          {
+            value: '杭州',
+            text: '杭州',
+            disabled: true,
+            children: [
+              { value: '西湖区', text: '西湖区' },
+              { value: '余杭区', text: '余杭区' }
+            ]
+          },
+          {
+            value: '温州',
+            text: '温州',
+            children: [
+              { value: '鹿城区', text: '鹿城区' },
+              { value: '瓯海区', text: '瓯海区' }
+            ]
+          }
+        ]
       },
-      pathChange(...args: any) {
-        console.log('pathChange', ...args);
+      {
+        value: '湖南',
+        text: '湖南',
+        disabled: true
+      },
+      {
+        value: '福建',
+        text: '福建',
+        children: [
+          {
+            value: '福州',
+            text: '福州',
+            children: [
+              { value: '鼓楼区', text: '鼓楼区' },
+              { value: '台江区', text: '台江区' }
+            ]
+          }
+        ]
       }
-    };
-
-    return {
-      state,
-      events
+    ]
+  });
+  const events = {
+    change(...args: any) {
+      console.log('change', ...args);
+    },
+    pathChange(...args: any) {
+      console.log('pathChange', ...args);
     }
+  };
+
+  return {
+    demo1,
+    events
   }
 }
+}
 </script>
 ```
 :::
@@ -119,36 +108,25 @@ export default {
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="选择地址">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="请选择地址"
-      type="text"
-    />
+    <nut-cell title="选择地址" :desc="demo2.value.toString() || '请选择地址'" @click="demo2.visible = true"> </nut-cell>
     <nut-cascader
       title="地址选择"
-      v-model:visible="state.visible"
-      v-model="state.value"
-      text-key="text"
+      v-model:visible="demo2.visible"
+      v-model="demo2.value"
+      labelKey="text"
       @change="events.change"
-      @path-change="events.pathChange"
-      value-key="text"
-      children-key="items"
-      :options="state.options"
+      @pathChange="events.pathChange"
+      valueKey="text"
+      childrenKey="items"
+      :options="demo2.options"
     ></nut-cascader>
-  </nut-form-item>
- </nut-form>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
     // 自定义属性名称
-    const state = reactive({
+    const demo2 = reactive({
       visible: false,
       value: ['福建', '福州', '台江区'],
       options: [
@@ -186,7 +164,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo2, events };
   }
 }
 </script>
@@ -199,33 +177,22 @@ export default {
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="选择地址">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="请选择地址"
-      type="text"
-    />
+    <nut-cell title="选择地址" :desc="demo3.value.toString() || '请选择地址'" @click="demo3.visible = true"> </nut-cell>
     <nut-cascader
       title="地址选择"
-      v-model:visible="state.visible"
-      v-model="state.value"
+      v-model:visible="demo3.visible"
+      v-model="demo3.value"
       @change="events.change"
-      @path-change="events.pathChange"
+      @pathChange="events.pathChange"
       lazy
-      :lazy-load="state.lazyLoad"
+      :lazyLoad="demo3.lazyLoad"
     ></nut-cascader>
-  </nut-form-item>
- </nut-form>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
-    const state = reactive({
+    const demo3 = reactive({
       visible: false,
       value: ['A0', 'A12', 'A23', 'A32'],
       lazyLoad(node: any, resolve: (children: any) => void) {
@@ -249,7 +216,7 @@ export default {
               { value: value3, text: value3, leaf: level >= 6 }
             ]);
           }
-        }, 300);
+        }, 3000);
       }
     });
     const events = {
@@ -261,7 +228,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo3, events };
   }
 }
 </script>
@@ -273,34 +240,23 @@ export default {
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="选择地址">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="请选择地址"
-      type="text"
-    />
-    <nut-cascader
-      title="地址选择"
-      v-model:visible="state.visible"
-      v-model="state.value"
-      @change="events.change"
-      @path-change="events.pathChange"
-      :options="state.options"
-      lazy
-      :lazy-load="state.lazyLoad"
-    ></nut-cascader>
-  </nut-form-item>
- </nut-form>
+  <nut-cell title="选择地址" :desc="demo4.value.toString() || '请选择地址'" @click="demo4.visible = true"> </nut-cell>
+  <nut-cascader
+    title="地址选择"
+    v-model:visible="demo4.visible"
+    v-model="demo4.value"
+    @change="events.change"
+    @pathChange="events.pathChange"
+    :options="demo4.options"
+    lazy
+    :lazyLoad="demo4.lazyLoad"
+  ></nut-cascader>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
-    const state = reactive({
+    const demo4 = reactive({
       visible: false,
       value: [],
       options: [
@@ -337,7 +293,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo4, events };
   }
 }
 </script>
@@ -352,33 +308,22 @@ export default {
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="选择地址" @click="state.visible = true">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="请选择地址"
-      type="text"
-    />
+    <nut-cell title="选择地址" :desc="demo5.value.toString() || '请选择地址'" @click="demo5.visible = true"> </nut-cell>
     <nut-cascader
       title="地址选择"
-      v-model:visible="state.visible"
-      v-model="state.value"
+      v-model:visible="demo5.visible"
+      v-model="demo5.value"
       @change="events.change"
-      @path-change="events.pathChange"
-      :options="state.options"
-      :convertConfig="state.convertConfig"
+      @pathChange="events.pathChange"
+      :options="demo5.options"
+      :convertConfig="demo5.convertConfig"
     ></nut-cascader>
-  </nut-form-item>
- </nut-form>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
-    const state = reactive({
+    const demo5 = reactive({
       visible: false,
       value: ['广东省', '广州市'],
       convertConfig: {
@@ -404,7 +349,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo5, events };
   }
 }
 </script>

+ 47 - 103
src/packages/__VUE/cascader/doc.taro.md

@@ -20,36 +20,24 @@ app.use(Cascader);
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="选择地址">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="请选择地址"
-      type="text"
-    />
+    <nut-cell title="选择地址" :desc="demo1.value.toString() || '请选择地址'" @click="demo1.visible = true"> </nut-cell>
     <nut-cascader
       title="地址选择"
-      v-model:visible="state.visible"
-      v-model="state.value"
+      v-model:visible="demo1.visible"
+      v-model="demo1.value"
       @change="events.change"
-      @path-change="events.pathChange"
-      :options="state.options"
+      @pathChange="events.pathChange"
+      :options="demo1.options"
     ></nut-cascader>
-  </nut-form-item>
- </nut-form>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
     // 基础用法
-    const state = reactive({
+    const demo1 = reactive({
       visible: false,
-      // value: ['湖南'],
-      value: [],
+      value: ['湖南'],
       options: [
         {
           value: '浙江',
@@ -105,7 +93,7 @@ export default {
     };
 
     return {
-      state,
+      demo1,
       events
     }
   }
@@ -120,36 +108,25 @@ export default {
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="选择地址">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="请选择地址"
-      type="text"
-    />
+  <nut-cell title="选择地址" :desc="demo2.value.toString() || '请选择地址'" @click="demo2.visible = true"> </nut-cell>
     <nut-cascader
       title="地址选择"
-      v-model:visible="state.visible"
-      v-model="state.value"
-      text-key="text"
+      v-model:visible="demo2.visible"
+      v-model="demo2.value"
+      labelKey="text"
       @change="events.change"
-      @path-change="events.pathChange"
-      value-key="text"
-      children-key="items"
-      :options="state.options"
+      @pathChange="events.pathChange"
+      valueKey="text"
+      childrenKey="items"
+      :options="demo2.options"
     ></nut-cascader>
-  </nut-form-item>
- </nut-form>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
     // 自定义属性名称
-    const state = reactive({
+    const demo2 = reactive({
       visible: false,
       value: ['福建', '福州', '台江区'],
       options: [
@@ -187,7 +164,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo2, events };
   }
 }
 </script>
@@ -200,33 +177,22 @@ export default {
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="选择地址">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="请选择地址"
-      type="text"
-    />
+    <nut-cell title="选择地址" :desc="demo3.value.toString() || '请选择地址'" @click="demo3.visible = true"> </nut-cell>
     <nut-cascader
       title="地址选择"
-      v-model:visible="state.visible"
-      v-model="state.value"
+      v-model:visible="demo3.visible"
+      v-model="demo3.value"
       @change="events.change"
-      @path-change="events.pathChange"
+      @pathChange="events.pathChange"
       lazy
-      :lazy-load="state.lazyLoad"
+      :lazyLoad="demo3.lazyLoad"
     ></nut-cascader>
-  </nut-form-item>
- </nut-form>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
-    const state = reactive({
+    const demo3 = reactive({
       visible: false,
       value: ['A0', 'A12', 'A23', 'A32'],
       lazyLoad(node: any, resolve: (children: any) => void) {
@@ -250,7 +216,7 @@ export default {
               { value: value3, text: value3, leaf: level >= 6 }
             ]);
           }
-        }, 300);
+        }, 3000);
       }
     });
     const events = {
@@ -262,7 +228,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo3, events };
   }
 }
 </script>
@@ -274,34 +240,23 @@ export default {
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="选择地址">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="请选择地址"
-      type="text"
-    />
-    <nut-cascader
-      title="地址选择"
-      v-model:visible="state.visible"
-      v-model="state.value"
-      @change="events.change"
-      @path-change="events.pathChange"
-      :options="state.options"
-      lazy
-      :lazy-load="state.lazyLoad"
-    ></nut-cascader>
-  </nut-form-item>
- </nut-form>
+  <nut-cell title="选择地址" :desc="demo4.value.toString() || '请选择地址'" @click="demo4.visible = true"> </nut-cell>
+  <nut-cascader
+    title="地址选择"
+    v-model:visible="demo4.visible"
+    v-model="demo4.value"
+    @change="events.change"
+    @pathChange="events.pathChange"
+    :options="demo4.options"
+    lazy
+    :lazyLoad="demo4.lazyLoad"
+  ></nut-cascader>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
-    const state = reactive({
+    const demo4 = reactive({
       visible: false,
       value: [],
       options: [
@@ -338,7 +293,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo4, events };
   }
 }
 </script>
@@ -353,33 +308,22 @@ export default {
 :::demo
 ```html
 <template>
- <nut-form>
-  <nut-form-item label="选择地址" @click="state.visible = true">
-    <input
-      class="nut-input-text"
-      @click="state.visible = true"
-      :value="state.value"
-      readonly
-      placeholder="请选择地址"
-      type="text"
-    />
+    <nut-cell title="选择地址" :desc="demo5.value.toString() || '请选择地址'" @click="demo5.visible = true"> </nut-cell>
     <nut-cascader
       title="地址选择"
-      v-model:visible="state.visible"
-      v-model="state.value"
+      v-model:visible="demo5.visible"
+      v-model="demo5.value"
       @change="events.change"
-      @path-change="events.pathChange"
-      :options="state.options"
-      :convertConfig="state.convertConfig"
+      @pathChange="events.pathChange"
+      :options="demo5.options"
+      :convertConfig="demo5.convertConfig"
     ></nut-cascader>
-  </nut-form-item>
- </nut-form>
 </template>
 <script lang="ts">
 import { reactive } from 'vue';
 export default {
   setup() {
-    const state = reactive({
+    const demo5 = reactive({
       visible: false,
       value: ['广东省', '广州市'],
       convertConfig: {
@@ -405,7 +349,7 @@ export default {
       },
     };
 
-    return { state, events };
+    return { demo5, events };
   }
 }
 </script>

+ 1 - 1
src/packages/__VUE/cascader/index.taro.vue

@@ -5,7 +5,7 @@
       position="bottom"
       pop-class="nut-cascader__popup"
       round
-      :closeable="!closeable"
+      :closeable="closeable"
       :close-icon="closeIcon"
       :destroy-on-close="false"
       :close-icon-position="closeIconPosition"

+ 1 - 1
src/packages/__VUE/cascader/index.vue

@@ -5,7 +5,7 @@
       position="bottom"
       pop-class="nut-cascader__popup"
       round
-      :closeable="!closeable"
+      :closeable="closeable"
       :destroy-on-close="false"
       :close-icon-position="closeIconPosition"
     >

+ 1 - 1
src/packages/__VUE/tabs/index.taro.vue

@@ -145,7 +145,7 @@ export default create({
       if (titles.value.length == 0) {
         console.error('[NutUI] <Tabs> 当前未找到 TabPane 组件元素 , 请检查 .');
       } else if (index == -1) {
-        console.error('[NutUI] <Tabs> 请检查 v-model 值是否为 paneKey ,如 paneKey 未设置,请采用下标控制 .');
+        // console.error('[NutUI] <Tabs> 请检查 v-model 值是否为 paneKey ,如 paneKey 未设置,请采用下标控制 .');
       } else {
         currentIndex.value = index;
       }

+ 1 - 1
src/packages/__VUE/tabs/index.vue

@@ -173,7 +173,7 @@ export default create({
       if (titles.value.length == 0) {
         console.error('[NutUI] <Tabs> 当前未找到 TabPane 组件元素 , 请检查 .');
       } else if (index == -1) {
-        console.error('[NutUI] <Tabs> 请检查 v-model 值是否为 paneKey ,如 paneKey 未设置,请采用下标控制 .');
+        // console.error('[NutUI] <Tabs> 请检查 v-model 值是否为 paneKey ,如 paneKey 未设置,请采用下标控制 .');
       } else {
         currentIndex.value = index;
       }