@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/dentry/cascader/index.md

@@ -0,0 +1,1080 @@
+---
+order: 5
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/dentry/pages/cascader/index'
+group:
+    title: 数据录入
+    order: 5
+---
+
+# Cascader 级联选择 <Badge>2.0.0</Badge>
+
+
+级联选择器，用于多层级数据的选择，典型场景为省市区选择。
+
+## 引入
+
+```tsx
+import { Cascader } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础用法
+
+传入`options`列表
+
+
+```tsx
+import { Cascader, Cell } from '@mijadesign/mjui-react-taro'
+import { ArrowRight } from '@nutui/icons-react-taro'
+import React, { useState } from 'react'
+
+const Demo1 = () => {
+  const [isVisibleDemo1, setIsVisibleDemo1] = useState(false)
+  const [value1, setValue1] = useState([])
+  const change1 = (value: any, path: any) => {
+    console.log('onChange', value, path)
+    setValue1(value)
+  }
+
+  const formatCascaderItem = (res: any, render: boolean) => {
+    return {
+      ...res,
+      render: (_: any, record: any) => {
+        if (render) {
+          return (
+            <div className="cascaderItemContent">
+              <div className="prefix">{record?.prefixChar}</div>
+              <div>{record?.text}</div>
+            </div>
+          )
+        }
+      },
+    }
+  }
+
+  const formatOptions = (options: any[], render: boolean): any[] => {
+    return options.map((item) => {
+      const newItem = formatCascaderItem(item, render)
+      if (item.children && item.level < 2) {
+        newItem.children = formatOptions(item.children, render)
+      }
+      return newItem
+    })
+  }
+
+  const onLoad = async (node: any, resolve: any) => {
+    const level = node?.root ? 0 : node.level + 1
+    resolve(optionsDemo1?.map((item: any) => formatCascaderItem(item, level < 2)))
+  }
+
+  const [optionsDemo1] = useState(() =>
+    formatOptions(
+      [
+        {
+          value: '浙江',
+          text: '浙江',
+          prefixChar: 'Z',
+          level: 1,
+          children: [
+            {
+              value: '杭州',
+              text: '杭州',
+              disabled: true,
+              prefixChar: 'H',
+              level: 2,
+              children: [
+                { value: '西湖区', text: '西湖区', disabled: true, level: 3 },
+                { value: '余杭区', text: '余杭区', level: 3 },
+              ],
+            },
+            {
+              value: '温州',
+              text: '温州',
+              prefixChar: 'W',
+              level: 2,
+              children: [
+                { value: '鹿城区', text: '鹿城区', level: 3 },
+                { value: '瓯海区', text: '瓯海区', level: 3 },
+              ],
+            },
+          ],
+        },
+        {
+          value: '湖南',
+          text: '湖南',
+          level: 1,
+          prefixChar: 'H',
+          disabled: true,
+          children: [
+            {
+              value: '长沙',
+              text: '长沙',
+              level: 2,
+              prefixChar: 'C',
+              disabled: true,
+              children: [
+                { value: '西湖区', text: '西湖区', level: 3 },
+                { value: '余杭区', text: '余杭区', level: 3 },
+              ],
+            },
+            {
+              value: '温州',
+              text: '温州',
+              prefixChar: 'W',
+              level: 2,
+              children: [
+                { value: '鹿城区', text: '鹿城区', level: 3 },
+                { value: '瓯海区', text: '瓯海区', level: 3 },
+              ],
+            },
+          ],
+        },
+        {
+          value: '福建',
+          text: '福建',
+          level: 1,
+          prefixChar: 'F',
+          children: [
+            {
+              value: '福州',
+              text: '福州',
+              level: 2,
+              prefixChar: 'F',
+              children: [
+                { value: '鼓楼区', text: '鼓楼区', level: 3 },
+                { value: '台江区', text: '台江区', level: 3 },
+              ],
+            },
+          ],
+        },
+      ],
+      true
+    )
+  )
+
+  return (
+    <>
+      <Cell
+        title="选择地址"
+        extra={
+          <>
+            <div style={{ color: value1.length ? 'rgba(0,0,0,0.95)' : 'rgba(0,0,0,0.4)', marginRight: '4px' }}>
+              {value1.length ? value1.join(' ') : '请选择'}
+            </div>
+            <ArrowRight color="#999" />
+          </>
+        }
+        onClick={() => {
+          setIsVisibleDemo1(true)
+        }}
+      />
+      <Cascader
+        popupProps={{
+          className: 'cascader-popup',
+        }}
+        visible={isVisibleDemo1}
+        value={value1}
+        title="选择地址"
+        options={optionsDemo1}
+        closeable
+        onClose={() => {
+          setIsVisibleDemo1(false)
+        }}
+        onChange={change1}
+      />
+
+      {/* <Cell
+        title="选择地址1"
+        extra={value1.length ? value1 : '请选择地址'}
+        onClick={() => {
+          setIsVisibleDemo1(true)
+        }}
+      /> */}
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 自定义属性名称
+
+可通过`textKey`、`valueKey`、`childrenKey`指定属性名。
+
+
+```tsx
+import { Cascader, Cell } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const Demo2 = () => {
+  const [isVisibleDemo2, setIsVisibleDemo2] = useState(false)
+  const [value2, setValue2] = useState([])
+
+  const change2 = (value: any, path: any) => {
+    console.log('onChange', value, path)
+    setValue2(value)
+  }
+
+  const formatCascaderItem = (res: any, render: boolean) => {
+    return {
+      ...res,
+      render: (_: any, record: any) => {
+        if (render) {
+          return (
+            <div className="cascaderItemContent">
+              <div className="prefix">{record?.prefixChar}</div>
+              <div>{record?.text}</div>
+            </div>
+          )
+        }
+      },
+    }
+  }
+
+  const formatOptions = (options: any[], render: boolean): any[] => {
+    return options.map((item) => {
+      const newItem = formatCascaderItem(item, render)
+      if (item.items && item.level < 2) {
+        newItem.items = formatOptions(item.items, render)
+      }
+      return newItem
+    })
+  }
+
+  const onLoad = async (node: any, resolve: any) => {
+    const level = node?.root ? 0 : node.level + 1
+    resolve(optionsDemo2?.map((item: any) => formatCascaderItem(item, level < 2)))
+  }
+
+  const [optionsDemo2] = useState(() =>
+    formatOptions(
+      [
+        {
+          value1: '浙江',
+          text1: '浙江',
+          prefixChar: 'Z',
+          level: 1,
+          items: [
+            {
+              value1: '杭州',
+              text1: '杭州',
+              disabled: true,
+              prefixChar: 'H',
+              level: 2,
+              items: [
+                { value1: '西湖区', text1: '西湖区', disabled: true, level: 3 },
+                { value1: '余杭区', text1: '余杭区', level: 3 },
+              ],
+            },
+            {
+              value1: '温州',
+              text1: '温州',
+              prefixChar: 'W',
+              level: 2,
+              items: [
+                { value1: '鹿城区', text1: '鹿城区', level: 3 },
+                { value1: '瓯海区', text1: '瓯海区', level: 3 },
+              ],
+            },
+          ],
+        },
+        {
+          value1: '湖南',
+          text1: '湖南',
+          level: 1,
+          prefixChar: 'H',
+          disabled: true,
+          items: [
+            {
+              value1: '长沙',
+              text1: '长沙',
+              level: 2,
+              prefixChar: 'C',
+              disabled: true,
+              items: [
+                { value1: '西湖区', text1: '西湖区', level: 3 },
+                { value1: '余杭区', text1: '余杭区', level: 3 },
+              ],
+            },
+            {
+              value1: '温州',
+              text1: '温州',
+              prefixChar: 'W',
+              level: 2,
+              items: [
+                { value1: '鹿城区', text1: '鹿城区', level: 3 },
+                { value1: '瓯海区', text1: '瓯海区', level: 3 },
+              ],
+            },
+          ],
+        },
+        {
+          value1: '福建',
+          text1: '福建',
+          level: 1,
+          prefixChar: 'F',
+          items: [
+            {
+              value1: '福州',
+              text1: '福州',
+              level: 2,
+              prefixChar: 'F',
+              items: [
+                { value1: '鼓楼区', text1: '鼓楼区', level: 3 },
+                { value1: '台江区', text1: '台江区', level: 3 },
+              ],
+            },
+          ],
+        },
+      ],
+      true
+    )
+  )
+
+  return (
+    <>
+      <Cell
+        title="选择地址"
+        extra={
+          <div style={{ color: value2.length ? 'rgba(0,0,0,0.95)' : 'rgba(0,0,0,0.4)' }}>
+            {value2.length ? value2.join(' ') : '省、市、区、街道'}
+          </div>
+        }
+        onClick={() => {
+          setIsVisibleDemo2(true)
+        }}
+      />
+      <Cascader
+        visible={isVisibleDemo2}
+        defaultValue={value2}
+        title="选择地址"
+        options={optionsDemo2}
+        onLoad={onLoad}
+        optionKey={{
+          textKey: 'text1',
+          valueKey: 'value1',
+          childrenKey: 'items',
+        }}
+        closeable
+        onClose={() => {
+          setIsVisibleDemo2(false)
+        }}
+        onChange={change2}
+      />
+    </>
+  )
+}
+export default Demo2
+
+```
+    
+### 动态加载
+
+使用`lazy`标识是否需要动态获取数据，此时不传`options`代表所有数据都需要通过`onLoad`加载，首次加载通过`root`属性区分，当遇到非叶子节点时会调用`onLoad`方法，参数为当前节点和`resolve`方法，注意`resolve`方法必须调用，不传子节点时会被当做叶子节点处理。
+
+
+```tsx
+import { Cascader, Cell } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const Demo3 = () => {
+  const [isVisibleDemo3, setIsVisibleDemo3] = useState(false)
+  const [value3, setValue3] = useState(['A0', 'A12', 'A23', 'A32'])
+
+  const lazyLoadDemo3 = (node: any, resolve: (children: any) => void) => {
+    setTimeout(() => {
+      if (node.root) {
+        resolve([
+          { value: 'A0', text: 'A0' },
+          { value: 'B0', text: 'B0' },
+          { value: 'C0', text: 'C0' },
+        ])
+      } else {
+        const { value, level } = node
+        const text = value.substring(0, 1)
+        const value1 = `${text}${level + 1}1`
+        const value2 = `${text}${level + 1}2`
+        const value3 = `${text}${level + 1}3`
+        resolve([
+          { value: value1, text: value1, leaf: level >= 6 },
+          { value: value2, text: value2, leaf: level >= 6 },
+          { value: value3, text: value3, leaf: level >= 6 },
+        ])
+      }
+    }, 500)
+  }
+  const change3 = (value: any, path: any) => {
+    console.log('onChange', value, path)
+    setValue3(value)
+  }
+  return (
+    <>
+      <Cell
+        title="选择地址"
+        extra={
+          <div style={{ color: value3.length ? 'rgba(0,0,0,0.95)' : 'rgba(0,0,0,0.4)' }}>
+            {value3.length ? value3.join(' ') : '请选择地址'}
+          </div>
+        }
+        onClick={() => {
+          setIsVisibleDemo3(true)
+        }}
+      />
+      <Cascader
+        visible={isVisibleDemo3}
+        defaultValue={value3}
+        title="选择地址"
+        closeable
+        onClose={() => {
+          setIsVisibleDemo3(false)
+        }}
+        onChange={change3}
+        lazy
+        onLoad={lazyLoadDemo3}
+      />
+    </>
+  )
+}
+export default Demo3
+
+```
+    
+### 部分数据动态加载
+
+
+```tsx
+import { Cascader, Cell } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const Demo4 = () => {
+  const [isVisibleDemo4, setIsVisibleDemo4] = useState(false)
+  const [value4, setValue4] = useState([])
+  const [optionsDemo4] = useState([
+    { value: 'A0', text: 'A0' },
+    {
+      value: 'B0',
+      text: 'B0',
+      children: [
+        { value: 'B11', text: 'B11', leaf: true },
+        { value: 'B12', text: 'B12' },
+      ],
+    },
+    { value: 'C0', text: 'C0' },
+  ])
+
+  const lazyLoadDemo4 = (node: any, resolve: (children: any) => void) => {
+    setTimeout(() => {
+      const { value, level } = node
+      const text = value.substring(0, 1)
+      const value1 = `${text}${level + 1}1`
+      const value2 = `${text}${level + 1}2`
+      resolve([
+        { value: value1, text: value1, leaf: level >= 2 },
+        { value: value2, text: value2, leaf: level >= 1 },
+      ])
+    }, 500)
+  }
+  const change4 = (value: any, path: any) => {
+    console.log('onChange', value, path)
+    setValue4(value)
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择地址"
+        extra={
+          <div style={{ color: value4.length ? 'rgba(0,0,0,0.95)' : 'rgba(0,0,0,0.4)' }}>
+            {value4.length ? value4.join(' ') : '请选择地址'}
+          </div>
+        }
+        onClick={() => {
+          setIsVisibleDemo4(true)
+        }}
+      />
+      <Cascader
+        visible={isVisibleDemo4}
+        defaultValue={value4}
+        title="选择地址"
+        options={optionsDemo4}
+        closeable
+        onClose={() => {
+          setIsVisibleDemo4(false)
+        }}
+        onChange={change4}
+        lazy
+        onLoad={lazyLoadDemo4}
+      />
+    </>
+  )
+}
+export default Demo4
+
+```
+    
+### 自动转换
+
+如果你的数据为可转换为树形结构的扁平结构时，可以通过`format`告诉组件需要进行自动转换，`format`接受4个参数，`topId`为顶层节点的父级id，`idKey`为节点唯一id，`pidKey`为指向父节点id的属性名，存在`sortKey`将根据指定字段调用Array.prototype.sort()进行同层排序。
+
+
+```tsx
+import { Cascader, Cell } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const Demo5 = () => {
+  const [isVisibleDemo5, setIsVisibleDemo5] = useState(false)
+  const [value5, setValue5] = useState(['广东省', '广州市'])
+  const [optionsDemo5] = useState([
+    { value: '北京', text: '北京', id: 1, pidd: null },
+    { value: '朝阳区', text: '朝阳区', id: 11, pidd: 1 },
+    { value: '亦庄', text: '亦庄', id: 111, pidd: 11 },
+    { value: '广东省', text: '广东省', id: 2, pidd: null },
+    { value: '广州市', text: '广州市', id: 21, pidd: 2 },
+  ])
+  const [convertConfigDemo5, setConvertConfigDemo5] = useState({
+    topId: null,
+    idKey: 'id',
+    pidKey: 'pidd',
+    sortKey: '',
+  })
+  const change5 = (value: any, path: any) => {
+    console.log('onChange', value, path)
+    setValue5(value)
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择地址"
+        extra={
+          <div style={{ color: value5.length ? 'rgba(0,0,0,0.95)' : 'rgba(0,0,0,0.4)' }}>
+            {value5.length ? value5.join(' ') : '请选择地址'}
+          </div>
+        }
+        onClick={() => {
+          setIsVisibleDemo5(true)
+        }}
+      />
+      <Cascader
+        visible={isVisibleDemo5}
+        defaultValue={value5}
+        title="选择地址"
+        options={optionsDemo5}
+        format={convertConfigDemo5}
+        closeable
+        onClose={() => {
+          setIsVisibleDemo5(false)
+        }}
+        onChange={change5}
+      />
+    </>
+  )
+}
+export default Demo5
+
+```
+    
+### 自定义内容
+
+
+
+```tsx
+import { Cascader, Cell, ConfigProvider } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const customTheme = {
+  nutuiCascaderItemHeight: '48px',
+  nutuiCascaderItemMargin: '0 10px',
+  nutuiCascaderItemPadding: '10px',
+  nutuiCascaderItemBorderBottom: '1px solid #F0F0F0',
+  nutuiTabsTitlesItemActiveColor: '#3768FA',
+  nutuiTabsTabLineColor: '#3768FA',
+}
+
+const Demo6 = () => {
+  const [isVisibleDemo6, setIsVisibleDemo6] = useState(false)
+  const [value6, setValue6] = useState([])
+  const [optionsDemo6] = useState([
+    {
+      value: '浙江',
+      text: '浙江',
+      children: [
+        {
+          value: '杭州',
+          text: '杭州',
+          disabled: true,
+          children: [
+            { value: '西湖区', text: '西湖区', disabled: true },
+            { value: '余杭区', text: '余杭区' },
+          ],
+        },
+        {
+          value: '温州',
+          text: '温州',
+          children: [
+            { value: '鹿城区', text: '鹿城区' },
+            { value: '瓯海区', text: '瓯海区' },
+          ],
+        },
+      ],
+    },
+    {
+      value: '湖南',
+      text: '湖南',
+      disabled: true,
+      children: [
+        {
+          value: '长沙',
+          text: '长沙',
+          disabled: true,
+          children: [
+            { value: '西湖区', text: '西湖区' },
+            { value: '余杭区', text: '余杭区' },
+          ],
+        },
+        {
+          value: '温州',
+          text: '温州',
+          children: [
+            { value: '鹿城区', text: '鹿城区' },
+            { value: '瓯海区', text: '瓯海区' },
+          ],
+        },
+      ],
+    },
+    {
+      value: '福建',
+      text: '福建',
+      children: [
+        {
+          value: '福州',
+          text: '福州',
+          children: [
+            { value: '鼓楼区', text: '鼓楼区' },
+            { value: '台江区', text: '台江区' },
+          ],
+        },
+      ],
+    },
+  ])
+  const change6 = (value: any, path: any) => {
+    console.log('onChange', value, path)
+    setValue6(value)
+  }
+  const onPathChange = (value: any, path: any) => {
+    console.log('onPathChange', value, path)
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择地址"
+        extra={
+          <div style={{ color: value6.length ? 'rgba(0,0,0,0.95)' : 'rgba(0,0,0,0.4)' }}>
+            {value6.length ? value6.join(' ') : '请选择地址'}
+          </div>
+        }
+        onClick={() => {
+          setIsVisibleDemo6(true)
+        }}
+      />
+      <ConfigProvider theme={customTheme}>
+        <Cascader
+          visible={isVisibleDemo6}
+          activeColor="#3768FA"
+          defaultValue={value6}
+          title="选择地址"
+          options={optionsDemo6}
+          closeable
+          activeIcon="star"
+          onClose={() => {
+            setIsVisibleDemo6(false)
+          }}
+          onChange={change6}
+          onPathChange={onPathChange}
+        />{' '}
+      </ConfigProvider>
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+### 自定义底部内容
+
+
+
+```tsx
+import { Cascader, Cell } from '@mijadesign/mjui-react-taro'
+import { ArrowRight } from '@nutui/icons-react-taro'
+import React, { useState } from 'react'
+
+const customTheme = {
+  nutuiCascaderItemHeight: '48px',
+  nutuiCascaderItemMargin: '0 10px',
+  nutuiCascaderItemPadding: '10px',
+  nutuiCascaderItemBorderBottom: '1px solid #F0F0F0',
+  nutuiTabsTitlesItemActiveColor: '#3768FA',
+  nutuiTabsTabLineColor: '#3768FA',
+}
+
+const Demo6 = () => {
+  const [isVisibleDemo7, setIsVisibleDemo7] = useState(false)
+  const [value7, setValue7] = useState([])
+  const insuranceList = [
+    {
+      address: '北京市',
+      childList: [
+        {
+          address: '北京市',
+          childList: null,
+          code: 'CPIC0001',
+          createTime: '2024-03-20 00:00:00',
+          creator: 'system',
+          enableSelect: 1,
+          id: '101',
+          logo: null,
+          modifier: 'system',
+          modifyTime: '2024-03-20 00:00:00',
+          name: '中国太平洋财产保险',
+          nameAlias: '中国太平洋财产保险',
+          orders: 1,
+          parentId: '100',
+          personPhone: '13567181902',
+          phone: '95500',
+          scenes: ['MIJA_QUICK_PAY'],
+          specialVisible: 0,
+          status: 1,
+          subjectType: '1002',
+        },
+      ],
+      code: 'CPIC0000',
+      createTime: '2024-03-20 00:00:00',
+      creator: 'system',
+      enableSelect: 0,
+      id: '100',
+      logo: 'https://oss.mibaodata.com/static/org_logo/cpic.jpg',
+      modifier: 'system',
+      modifyTime: '2024-03-20 00:00:00',
+      name: '中国太平洋保险',
+      nameAlias: '中国太平洋保险',
+      orders: 1,
+      parentId: '-1',
+      personPhone: '13567181902',
+      phone: '95500',
+      scenes: null,
+      specialVisible: 0,
+      status: 1,
+      subjectType: '1002',
+    },
+    {
+      address: '浙江省杭州市西湖区联合大厦9楼',
+      childList: [
+        {
+          address: '浙江省杭州市西湖区联合大厦9楼',
+          childList: null,
+          code: 'MIJA0001',
+          createTime: '2023-12-27 00:00:00',
+          creator: 'system',
+          enableSelect: 1,
+          id: '11',
+          logo: null,
+          modifier: 'system',
+          modifyTime: '2023-12-27 00:00:00',
+          name: '米加商保通演示1',
+          nameAlias: '米加商保通演示1',
+          orders: 1,
+          parentId: '1',
+          personPhone: '13296745320',
+          phone: '13296745320',
+          scenes: ['MIJA_QUICK_PAY'],
+          specialVisible: 1,
+          status: 1,
+          subjectType: '1002',
+        },
+        {
+          address: '浙江省杭州市西湖区联合大厦9楼',
+          childList: null,
+          code: 'MIJA0002',
+          createTime: '2023-12-27 00:00:00',
+          creator: 'system',
+          enableSelect: 1,
+          id: '12',
+          logo: null,
+          modifier: 'system',
+          modifyTime: '2023-12-27 00:00:00',
+          name: '米加商保通演示2',
+          nameAlias: '米加商保通演示2',
+          orders: 2,
+          parentId: '1',
+          personPhone: '13296745320',
+          phone: '13296745320',
+          scenes: ['MIJA_QUICK_PAY'],
+          specialVisible: 1,
+          status: 1,
+          subjectType: '1002',
+        },
+      ],
+      code: 'MIJA0000',
+      createTime: '2023-12-27 00:00:00',
+      creator: 'system',
+      enableSelect: 0,
+      id: '1',
+      logo: 'https://oss.mibaodata.com/static/org_logo/mija.png',
+      modifier: 'system',
+      modifyTime: '2023-12-27 00:00:00',
+      name: '米加商保通演示',
+      nameAlias: '米加商保通演示',
+      orders: 1,
+      parentId: '-1',
+      personPhone: '13296745320',
+      phone: '13296745320',
+      scenes: null,
+      specialVisible: 1,
+      status: 1,
+      subjectType: '1002',
+    },
+  ]
+  const change7 = (value: any, path: any) => {
+    console.log('onChange', value, path)
+    setValue7(value)
+  }
+  const onPathChange = (value: any, path: any) => {
+    console.log('onPathChange', value, path)
+  }
+
+  return (
+    <>
+      <Cell
+        title="保险公司"
+        extra={
+          <>
+            <div style={{ color: value7.length ? 'rgba(0,0,0,0.95)' : 'rgba(0,0,0,0.4)', marginRight: '4px' }}>
+              {value7.length ? value7?.[1] : '请选择保险公司'}
+            </div>
+            <ArrowRight color="#999" />
+          </>
+        }
+        onClick={() => {
+          setIsVisibleDemo7(true)
+        }}
+      />
+      <Cascader
+        visible={isVisibleDemo7}
+        title="保险公司"
+        options={insuranceList.map((item) => ({
+          ...item,
+          render: (text: string, record: Record<string, any>) => {
+            return (
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <img
+                  alt=""
+                  src={record.logo}
+                  style={{
+                    width: '30px',
+                    height: '30px',
+                    marginRight: '8px',
+                    borderRadius: '50%',
+                    border: '1px solid rgba(0,0,0,0.1)',
+                  }}
+                />
+                <div>{text}</div>
+              </div>
+            )
+          },
+        }))}
+        optionKey={{
+          textKey: 'name',
+          valueKey: 'name',
+          childrenKey: 'childList',
+        }}
+        closeable
+        onClose={() => {
+          setIsVisibleDemo7(false)
+        }}
+        onChange={change7}
+        onPathChange={onPathChange}
+      />
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+### 自定义样式
+
+使用configprovider 完成自定义设置
+
+ 
+```tsx
+import { Cascader, Cell, ConfigProvider } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const customTheme = {
+  nutuiCascaderItemHeight: '48px',
+  nutuiCascaderItemMargin: '0 10px',
+  nutuiCascaderItemPadding: '10px',
+  nutuiCascaderItemBorderBottom: '1px solid #F0F0F0',
+  nutuiTabsTitlesItemActiveColor: '#3768FA',
+  nutuiTabsTabLineColor: '#3768FA',
+}
+
+const Demo6 = () => {
+  const [isVisibleDemo6, setIsVisibleDemo6] = useState(false)
+  const [value6, setValue6] = useState([])
+  const [optionsDemo6] = useState([
+    {
+      value: '浙江',
+      text: '浙江',
+      children: [
+        {
+          value: '杭州',
+          text: '杭州',
+          disabled: true,
+          children: [
+            { value: '西湖区', text: '西湖区', disabled: true },
+            { value: '余杭区', text: '余杭区' },
+          ],
+        },
+        {
+          value: '温州',
+          text: '温州',
+          children: [
+            { value: '鹿城区', text: '鹿城区' },
+            { value: '瓯海区', text: '瓯海区' },
+          ],
+        },
+      ],
+    },
+    {
+      value: '湖南',
+      text: '湖南',
+      disabled: true,
+      children: [
+        {
+          value: '长沙',
+          text: '长沙',
+          disabled: true,
+          children: [
+            { value: '西湖区', text: '西湖区' },
+            { value: '余杭区', text: '余杭区' },
+          ],
+        },
+        {
+          value: '温州',
+          text: '温州',
+          children: [
+            { value: '鹿城区', text: '鹿城区' },
+            { value: '瓯海区', text: '瓯海区' },
+          ],
+        },
+      ],
+    },
+    {
+      value: '福建',
+      text: '福建',
+      children: [
+        {
+          value: '福州',
+          text: '福州',
+          children: [
+            { value: '鼓楼区', text: '鼓楼区' },
+            { value: '台江区', text: '台江区' },
+          ],
+        },
+      ],
+    },
+  ])
+  const change6 = (value: any, path: any) => {
+    console.log('onChange', value, path)
+    setValue6(value)
+  }
+  const onPathChange = (value: any, path: any) => {
+    console.log('onPathChange', value, path)
+  }
+
+  return (
+    <>
+      <Cell
+        title="选择地址"
+        extra={
+          <div style={{ color: value6.length ? 'rgba(0,0,0,0.95)' : 'rgba(0,0,0,0.4)' }}>
+            {value6.length ? value6.join(' ') : '请选择地址'}
+          </div>
+        }
+        onClick={() => {
+          setIsVisibleDemo6(true)
+        }}
+      />
+      <ConfigProvider theme={customTheme}>
+        <Cascader
+          visible={isVisibleDemo6}
+          activeColor="#3768FA"
+          defaultValue={value6}
+          title="选择地址"
+          options={optionsDemo6}
+          closeable
+          activeIcon="star"
+          onClose={() => {
+            setIsVisibleDemo6(false)
+          }}
+          onChange={change6}
+          onPathChange={onPathChange}
+        />{' '}
+      </ConfigProvider>
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+## Cascader
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 选中值，受控 | `(number \| string)[]` | `-` |
+| defaultValue | 默认选中值 | `(number \| string)[]` | `-` |
+| options | 级联数据 | `Array` | `-` |
+| popup | 是否弹窗状态展示 | `boolean` | `true` |
+| visible | 级联显示隐藏状态 | `boolean` | `false` |
+| activeColor | 选中激活颜色 | `string` | `-` |
+| activeIcon | 标记选中的Icon | `string` | `ReactNode` |
+| lazy | 是否开启动态加载 | `boolean` | `false` |
+| optionKey | 自定义`options`中的关键字，valueKey、textKey、childrenKey | `object` | `{valueKey: 'value', textKey: 'text', childrenKey: 'children'}` |
+| format | 当options为可转换为树形结构的扁平结构时，配置转换规则 | `Object` | `-` |
+| title | 标题 | `string` | `-` |
+| closeIconPosition | 取消按钮位置，继承 Popup 组件 | `string` | `top-right` |
+| closeIcon | 自定义关闭按钮，继承 Popup 组件 | `ReactNode` | `-` |
+| closeable | 是否显示关闭按钮，继承 Popup 组件 | `boolean` | `true` |
+| onLoad | 动态加载回调，开启动态加载时生效 |  `(node: any, resolve: any) => void` | `-` |
+| onChange | 选中值改变时触发 | `(value: CascaderValue, params?: any) => void` | `-` |
+| onPathChange | 选中项改变时触发 | `(value: CascaderValue, params: any) => void` | `-` |
+### Ref
+
+| 事件名  | 说明 | 回调参数 |
+|------| --- | --- |
+| open | 显示 Cascader | `() => void` |
+| close  | 关闭 Cascader | `() => void` |
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-cascader-font-size | 级联总字号 | `$font-size-2` |
+| \--nutui-cascader-pane-height | 级联面板高度 | `342px` |
+| \--nutui-cascader-tabs-item-padding | 级联tabs的标题部分的padding 值 | `0 12px` |
+| \--nutui-cascader-item-padding | 级联数据每一条的padding值 | `12px 16px` |
+| \--nutui-cascader-item-margin | 级联数据每一条的margin值 | `0px` |
+| \--nutui-cascader-item-border-bottom | 级联数据每一条的底部边框 | `0px solid $color-border` |
+| \--nutui-cascader-item-color | 级联数据每一条的色值 | `$color-title` |
+| \--nutui-cascader-item-font-size | 级联数据每一条的字号 | `$font-size-2` |
+| \--nutui-cascader-item-active-color | 级联数据每一条的选中色值 | `$color-primary` |