From 8789555c8c028e95753f6b404b7b47fa029d5cbd Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Thu, 14 Oct 2021 22:12:47 +0800
Subject: [PATCH 01/18] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0click=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E5=A4=84=E7=90=86=EF=BC=8C=E5=8C=BA=E5=88=86hover?=
 =?UTF-8?q?=E4=B8=8Eclick?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cascader/components/cascader-item/index.tsx  | 16 ++++++++++------
 .../cascader-list/cascader-list-types.ts         |  8 ++++++--
 .../cascader/components/cascader-list/index.tsx  |  4 ++--
 devui/cascader/hooks/use-cascader-item.ts        |  9 +++++++++
 devui/cascader/src/cascader-types.ts             |  8 +++++++-
 devui/cascader/src/cascader.tsx                  |  8 +++++---
 docs/components/cascader/index.md                |  1 +
 7 files changed, 40 insertions(+), 14 deletions(-)
 create mode 100644 devui/cascader/hooks/use-cascader-item.ts

diff --git a/devui/cascader/components/cascader-item/index.tsx b/devui/cascader/components/cascader-item/index.tsx
index 5182dd22..59cdebde 100644
--- a/devui/cascader/components/cascader-item/index.tsx
+++ b/devui/cascader/components/cascader-item/index.tsx
@@ -2,19 +2,23 @@ import { getRootClass } from './use-class'
 import { optionsHandles } from '../../hooks/use-cascader-options'
 import './index.scss'
 export const DCascaderItem = (props) => {
-  const { cascaderli, ulIndex } = props
+  // console.log(props)
+  const { cascaderItem, ulIndex } = props
   const { changeCascaderIndexs } = optionsHandles()
   const rootClasses = getRootClass()
-  const mouseHover = () => {
-    changeCascaderIndexs(cascaderli, ulIndex)
+  const mouseEvent = () => {
+    changeCascaderIndexs(cascaderItem, ulIndex)
   }
+  const onMouseEvent = {
+    [props.cascaderItemNeedProps.trigger === 'hover' ? 'onMouseenter' : 'onClick']: mouseEvent
+  } 
   return (
-    <li class={rootClasses.value} onMouseover={mouseHover}>
+    <li class={rootClasses.value} {...onMouseEvent}>
       <div class="dropdown-item-label">
-        <span>{ cascaderli.label }</span>
+        <span>{ cascaderItem.label }</span>
       </div>
       {
-        cascaderli?.children?.length > 0 && <d-icon name="chevron-right" size="16px" color="inherit"></d-icon>
+        cascaderItem?.children?.length > 0 && <d-icon name="chevron-right" size="16px" color="inherit"></d-icon>
       }
     </li>
   )
diff --git a/devui/cascader/components/cascader-list/cascader-list-types.ts b/devui/cascader/components/cascader-list/cascader-list-types.ts
index 85e2152d..f1fd8fed 100644
--- a/devui/cascader/components/cascader-list/cascader-list-types.ts
+++ b/devui/cascader/components/cascader-list/cascader-list-types.ts
@@ -1,12 +1,12 @@
 import type { PropType, ExtractPropTypes } from 'vue'
-import { CascaderItem } from '../../src/cascader-types'
+import { CascaderItem, PickCascader } from '../../src/cascader-types'
 export const cascaderulProps = {
   /**
    * 每个ul中的li
    * @type {CascaderItem[]}
    * @default []
    */
-  cascaderlis: {
+  cascaderItems: {
     type: Array as PropType<CascaderItem[]>,
     default: [],
   },
@@ -18,6 +18,10 @@ export const cascaderulProps = {
   ulIndex: {
     type: Number,
     default: 0
+  },
+  cascaderItemNeedProps: {
+    type: Object as PropType<PickCascader>,
+    default: {}
   }
 }
 export type CascaderulProps = ExtractPropTypes<typeof cascaderulProps>
diff --git a/devui/cascader/components/cascader-list/index.tsx b/devui/cascader/components/cascader-list/index.tsx
index 4fa19244..562bd5c3 100644
--- a/devui/cascader/components/cascader-list/index.tsx
+++ b/devui/cascader/components/cascader-list/index.tsx
@@ -10,8 +10,8 @@ export default defineComponent({
     const rootClasses = getRootClass()
     return () => (
       <ul class={rootClasses.value}>
-        {props.cascaderlis.map((item, index) => {
-          return <DCascaderItem cascaderli={item} liIndex={index} {...props}></DCascaderItem>
+        {props.cascaderItems.map((item, index) => {
+          return <DCascaderItem cascaderItem={item} liIndex={index} {...props}></DCascaderItem>
         })}
       </ul>
     )
diff --git a/devui/cascader/hooks/use-cascader-item.ts b/devui/cascader/hooks/use-cascader-item.ts
new file mode 100644
index 00000000..b8b688ee
--- /dev/null
+++ b/devui/cascader/hooks/use-cascader-item.ts
@@ -0,0 +1,9 @@
+import { CascaderProps, UseCascaderItemCallback } from '../src/cascader-types'
+export const userCascaderItem = (props: CascaderProps): UseCascaderItemCallback => {
+  const cascaderItemNeedProps = {
+    trigger: props.trigger
+  }
+  return {
+    cascaderItemNeedProps
+  }
+}
\ No newline at end of file
diff --git a/devui/cascader/src/cascader-types.ts b/devui/cascader/src/cascader-types.ts
index 13abc1af..6d287bab 100644
--- a/devui/cascader/src/cascader-types.ts
+++ b/devui/cascader/src/cascader-types.ts
@@ -67,4 +67,10 @@ export interface PopupTypes {
 export interface OptionsCallback {
   cascaderOptions: never | UnwrapNestedRefs<[CascaderItem[]]>
   changeCascaderIndexs: (optionItem: CascaderItem, ulIndex: number) => void
-}
\ No newline at end of file
+}
+
+type cascaderItemExtendsProps = 'trigger'
+export type PickCascader = Pick<CascaderProps, cascaderItemExtendsProps>
+export interface UseCascaderItemCallback {
+  cascaderItemNeedProps: PickCascader
+}
diff --git a/devui/cascader/src/cascader.tsx b/devui/cascader/src/cascader.tsx
index d0565e61..bf0523d6 100644
--- a/devui/cascader/src/cascader.tsx
+++ b/devui/cascader/src/cascader.tsx
@@ -6,7 +6,7 @@ import { getRootClass } from '../hooks/use-cascader-class'
 import { popupHandles } from '../hooks/use-cascader-popup'
 import DCascaderList from '../components/cascader-list'
 import { optionsHandles } from '../hooks/use-cascader-options'
-
+import { userCascaderItem } from '../hooks/use-cascader-item'
 
 export default defineComponent({
   name: 'DCascader',
@@ -25,9 +25,11 @@ export default defineComponent({
     const rootClasses = getRootClass(props, menuShow)
     // 级联菜单操作，变换ul、li等
     const { cascaderOptions } = optionsHandles(props.options)
+    // 传递给cascaderItem的props
+    const { cascaderItemNeedProps } = userCascaderItem(props)
     return () => (
       <>
-        <div class={rootClasses.value} onClick={openPopup} ref={origin}  {...ctx.attrs}>
+        <div class={rootClasses.value} onClick={openPopup} ref={origin} {...ctx.attrs}>
           <d-input
             disabled={props.disabled}
             placeholder={props.placeholder}
@@ -40,7 +42,7 @@ export default defineComponent({
           <div class="devui-drop-menu-animation">
             <div class={`${menuOpenClass.value} devui-dropdown-menu`}>
               {cascaderOptions.map((item, index) => {
-                return <DCascaderList cascaderlis={item} ul-index={index}></DCascaderList>
+                return <DCascaderList cascaderItems={item} ul-index={index} cascaderItemNeedProps={cascaderItemNeedProps}></DCascaderList>
               })}
             </div>
           </div>
diff --git a/docs/components/cascader/index.md b/docs/components/cascader/index.md
index 88e98169..cb35e239 100644
--- a/docs/components/cascader/index.md
+++ b/docs/components/cascader/index.md
@@ -7,6 +7,7 @@
 ```vue
 <template>
   <d-cascader :options="options" placeholder="请选择" style="width: 200px"></d-cascader>
+  <d-cascader :options="options" trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
 </template>
 <script>
 import { defineComponent, reactive } from 'vue'
-- 
Gitee


From 45f46f7db431441f99068ca98c913f2c017fe571 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Fri, 15 Oct 2021 16:06:17 +0800
Subject: [PATCH 02/18] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Ecascader=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cascader-item/cascader-item-types.ts      |   3 +
 .../components/cascader-item/index.tsx        |  37 +++++--
 .../cascader-list/cascader-list-types.ts      |   4 +
 .../components/cascader-list/index.tsx        |   4 +-
 devui/cascader/hooks/use-cascader-item.ts     |   3 +
 devui/cascader/hooks/use-cascader-options.ts  |  25 +++--
 devui/cascader/src/cascader-types.ts          |  23 +++-
 devui/cascader/src/cascader.tsx               |  17 ++-
 docs/components/cascader/index.md             | 101 +++++++++++++++++-
 9 files changed, 190 insertions(+), 27 deletions(-)
 create mode 100644 devui/cascader/components/cascader-item/cascader-item-types.ts

diff --git a/devui/cascader/components/cascader-item/cascader-item-types.ts b/devui/cascader/components/cascader-item/cascader-item-types.ts
new file mode 100644
index 00000000..96d19f97
--- /dev/null
+++ b/devui/cascader/components/cascader-item/cascader-item-types.ts
@@ -0,0 +1,3 @@
+export const cascaderItemProps = {
+  
+}
\ No newline at end of file
diff --git a/devui/cascader/components/cascader-item/index.tsx b/devui/cascader/components/cascader-item/index.tsx
index 59cdebde..1d0f0086 100644
--- a/devui/cascader/components/cascader-item/index.tsx
+++ b/devui/cascader/components/cascader-item/index.tsx
@@ -1,19 +1,38 @@
 import { getRootClass } from './use-class'
 import { optionsHandles } from '../../hooks/use-cascader-options'
+import { CascaderItem } from '../../src/cascader-types'
+import { CascaderulProps } from '../cascader-list/cascader-list-types'
 import './index.scss'
-export const DCascaderItem = (props) => {
-  // console.log(props)
-  const { cascaderItem, ulIndex } = props
-  const { changeCascaderIndexs } = optionsHandles()
+interface CascaderItemPropsType extends CascaderulProps {
+  cascaderItem: CascaderItem
+  liIndex: number
+}
+export const DCascaderItem = (props: CascaderItemPropsType) => {
+  console.log(props)
+  const { cascaderItem, ulIndex, cascaderOptions, liIndex } = props
+  const { changeCascaderIndexs } = optionsHandles(cascaderOptions)
   const rootClasses = getRootClass()
-  const mouseEvent = () => {
+  const triggerHover = props.cascaderItemNeedProps.trigger === 'hover'
+  const updateValues = () => {
+    console.log(liIndex)
+    // props.value[ulIndex] = liIndex
+    // props.value.splice(0, ulIndex, ulIndex)
+  }
+  const mouseEnter = () => {
+    updateValues()
     changeCascaderIndexs(cascaderItem, ulIndex)
   }
-  const onMouseEvent = {
-    [props.cascaderItemNeedProps.trigger === 'hover' ? 'onMouseenter' : 'onClick']: mouseEvent
-  } 
+  const mouseenter = {
+    [ triggerHover && 'onMouseenter']: mouseEnter
+  }
+  const mouseClick = () => {
+    updateValues()
+    if (triggerHover && cascaderItem?.children?.length === 0) {
+
+    }
+  }
   return (
-    <li class={rootClasses.value} {...onMouseEvent}>
+    <li class={rootClasses.value} {...mouseenter} onClick={mouseClick}>
       <div class="dropdown-item-label">
         <span>{ cascaderItem.label }</span>
       </div>
diff --git a/devui/cascader/components/cascader-list/cascader-list-types.ts b/devui/cascader/components/cascader-list/cascader-list-types.ts
index f1fd8fed..55ede164 100644
--- a/devui/cascader/components/cascader-list/cascader-list-types.ts
+++ b/devui/cascader/components/cascader-list/cascader-list-types.ts
@@ -22,6 +22,10 @@ export const cascaderulProps = {
   cascaderItemNeedProps: {
     type: Object as PropType<PickCascader>,
     default: {}
+  },
+  cascaderOptions: {
+    type: Array as unknown as PropType<[CascaderItem[]]>,
+    default: []
   }
 }
 export type CascaderulProps = ExtractPropTypes<typeof cascaderulProps>
diff --git a/devui/cascader/components/cascader-list/index.tsx b/devui/cascader/components/cascader-list/index.tsx
index 562bd5c3..58396663 100644
--- a/devui/cascader/components/cascader-list/index.tsx
+++ b/devui/cascader/components/cascader-list/index.tsx
@@ -1,12 +1,12 @@
 import { defineComponent } from 'vue'
 import { getRootClass } from './use-class'
 import './index.scss'
-import { cascaderulProps, CascaderulProps } from './cascader-list-types'
+import { cascaderulProps } from './cascader-list-types'
 import { DCascaderItem } from '../cascader-item'
 export default defineComponent({
   name: 'DCascaderList',
   props: cascaderulProps,
-  setup(props: CascaderulProps) {
+  setup(props) {
     const rootClasses = getRootClass()
     return () => (
       <ul class={rootClasses.value}>
diff --git a/devui/cascader/hooks/use-cascader-item.ts b/devui/cascader/hooks/use-cascader-item.ts
index b8b688ee..d64e731a 100644
--- a/devui/cascader/hooks/use-cascader-item.ts
+++ b/devui/cascader/hooks/use-cascader-item.ts
@@ -1,3 +1,6 @@
+/**
+ * 处理cascader-item中需要的参数
+ */
 import { CascaderProps, UseCascaderItemCallback } from '../src/cascader-types'
 export const userCascaderItem = (props: CascaderProps): UseCascaderItemCallback => {
   const cascaderItemNeedProps = {
diff --git a/devui/cascader/hooks/use-cascader-options.ts b/devui/cascader/hooks/use-cascader-options.ts
index e7a29870..01cc1faa 100644
--- a/devui/cascader/hooks/use-cascader-options.ts
+++ b/devui/cascader/hooks/use-cascader-options.ts
@@ -1,15 +1,11 @@
 /**
  * 处理传入options数据
  */
-import { reactive } from 'vue';
-import { CascaderItem, OptionsCallback } from '../src/cascader-types'
-let cascaderOptions
-export const optionsHandles = (options?: CascaderItem[]): OptionsCallback => {
-  if (options) {
-    cascaderOptions = reactive<[CascaderItem[]]>([ options ])
-  }
+import { CascaderItem, OptionsCallback, CaascaderOptionsType, CascaderProps } from '../src/cascader-types'
+export const optionsHandles = (cascaderOptions?: CaascaderOptionsType): OptionsCallback => {
+
   /**
-   * hover时修改展示项
+   * change时修改展示项
    * @param optionItem - 项
    * @param ulIndex - 当前选中的第几级
    * 
@@ -23,6 +19,19 @@ export const optionsHandles = (options?: CascaderItem[]): OptionsCallback => {
       cascaderOptions.splice(ulIndex + 1, cascaderOptions.length - 1 - ulIndex)
     }
   }
+  /**
+   * 根据value，数据反显
+   */
+  // const reflectViewData = (propsData?: CascaderProps) => {
+  //   // 单选模式
+  //   if (!propsData.multiple) {
+  //     for (let i = 0; i < cascaderOptions.length; i++) {
+        
+  //     }
+  //   } else {
+  //     // 多选模式
+  //   }
+  // }
   return {
     cascaderOptions,
     changeCascaderIndexs
diff --git a/devui/cascader/src/cascader-types.ts b/devui/cascader/src/cascader-types.ts
index 6d287bab..e7d33700 100644
--- a/devui/cascader/src/cascader-types.ts
+++ b/devui/cascader/src/cascader-types.ts
@@ -14,6 +14,8 @@ export interface CascaderItem {
   [prop: string]: any
 }
 
+type CascaderModelValue = number[]
+
 export const cascaderProps = {
   /**
    * 可选，指定展开次级菜单方式
@@ -35,6 +37,24 @@ export const cascaderProps = {
     default: [],
     required: true
   },
+  /**
+   * 可选，级联器是否开启多选模式，开启后为 checkbox 选择
+   * @type {Boolean}
+   * @default false
+   */
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 可选，级联器选中的数组下标value
+   * @type {CascaderModelValue | [CascaderModelValue]}
+   * @default []
+   */
+  value: {
+    type: Array as PropType<CascaderModelValue | [CascaderModelValue]>,
+    default: []
+  },
   /**
    * 可选，级联器是否禁用
    * @type {boolean}
@@ -64,8 +84,9 @@ export interface PopupTypes {
   openPopup:  (e?: MouseEvent) => void
 }
 
+export type CaascaderOptionsType = UnwrapNestedRefs<[CascaderItem[]]>
 export interface OptionsCallback {
-  cascaderOptions: never | UnwrapNestedRefs<[CascaderItem[]]>
+  cascaderOptions: never | CaascaderOptionsType
   changeCascaderIndexs: (optionItem: CascaderItem, ulIndex: number) => void
 }
 
diff --git a/devui/cascader/src/cascader.tsx b/devui/cascader/src/cascader.tsx
index bf0523d6..a08db147 100644
--- a/devui/cascader/src/cascader.tsx
+++ b/devui/cascader/src/cascader.tsx
@@ -1,11 +1,11 @@
 import './cascader.scss'
 
 import { defineComponent, ref, reactive } from 'vue'
-import { cascaderProps, CascaderProps } from './cascader-types'
+import { cascaderProps, CascaderItem, CascaderProps } from './cascader-types'
 import { getRootClass } from '../hooks/use-cascader-class'
 import { popupHandles } from '../hooks/use-cascader-popup'
 import DCascaderList from '../components/cascader-list'
-import { optionsHandles } from '../hooks/use-cascader-options'
+// import { optionsHandles } from '../hooks/use-cascader-options'
 import { userCascaderItem } from '../hooks/use-cascader-item'
 
 export default defineComponent({
@@ -13,6 +13,8 @@ export default defineComponent({
   props: cascaderProps,
   setup(props: CascaderProps, ctx) {
     const origin = ref(null)
+    const cascaderOptions = reactive<[CascaderItem[]]>([ props?.options ])
+    // const value = props.value
     const position = reactive({
       originX: 'left', 
       originY: 'bottom', 
@@ -23,9 +25,8 @@ export default defineComponent({
     const { menuShow, menuOpenClass, openPopup } = popupHandles()
     // 配置class
     const rootClasses = getRootClass(props, menuShow)
-    // 级联菜单操作，变换ul、li等
-    const { cascaderOptions } = optionsHandles(props.options)
     // 传递给cascaderItem的props
+    console.log(ctx.attrs)
     const { cascaderItemNeedProps } = userCascaderItem(props)
     return () => (
       <>
@@ -42,7 +43,13 @@ export default defineComponent({
           <div class="devui-drop-menu-animation">
             <div class={`${menuOpenClass.value} devui-dropdown-menu`}>
               {cascaderOptions.map((item, index) => {
-                return <DCascaderList cascaderItems={item} ul-index={index} cascaderItemNeedProps={cascaderItemNeedProps}></DCascaderList>
+                return <DCascaderList
+                  cascaderItems={item}
+                  ul-index={index}
+                  cascaderItemNeedProps={cascaderItemNeedProps}
+                  cascaderOptions={cascaderOptions}
+                  {...props}
+                ></DCascaderList>
               })}
             </div>
           </div>
diff --git a/docs/components/cascader/index.md b/docs/components/cascader/index.md
index cb35e239..d2bc6cef 100644
--- a/docs/components/cascader/index.md
+++ b/docs/components/cascader/index.md
@@ -7,7 +7,7 @@
 ```vue
 <template>
   <d-cascader :options="options" placeholder="请选择" style="width: 200px"></d-cascader>
-  <d-cascader :options="options" trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
+  <d-cascader :options="options2" trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
 </template>
 <script>
 import { defineComponent, reactive } from 'vue'
@@ -110,8 +110,105 @@ export default defineComponent({
         disabled: true
       }
     ])
+    const options2 = reactive([
+      {
+        label: 'option1.1',
+        value : 1,
+        children: [
+          {
+            label: 'option1.1-1',
+            value : 4,
+            children: [
+              {
+                label: 'option1.1-1-1',
+                value : 8,
+                children: []
+              },
+              {
+                label: 'option1.1-1-2',
+                value : 9,
+                children: [
+                  {
+                    label: 'option1.1-1-2-1',
+                    value : 81,
+                    isLeaf: true
+                  }
+                ],
+              }
+            ]
+          },
+          {
+            label: 'option1.1-2',
+            value : 41,
+            isLeaf: true
+          },
+          {
+            label: 'option1.1-3',
+            value : 42,
+            isLeaf: true
+          },
+          {
+            label: 'option1.1-4',
+            value : 43,
+            isLeaf: true
+          }
+        ],
+      },
+      {
+        label: 'option2.1',
+        value : 2,
+        children: [
+          {
+            label: 'option2.1-1',
+            value : 5,
+            children: [
+              {
+                label: 'option2.1-1-1',
+                value : 51,
+                isLeaf: true
+              },
+              {
+                label: 'option2.1-1-2',
+                value : 61,
+                isLeaf: true,
+                disabled: true
+              }
+            ]
+          },
+          {
+            label: 'option2.1-2',
+            value : 6,
+            children: [
+              {
+                label: 'option2.1-2-1',
+                value : 512,
+                isLeaf: true
+              },
+              {
+                label: 'option2.1-2-2',
+                value : 611,
+                isLeaf: true
+              }
+            ]
+          },
+          {
+            label: 'option2.1-3',
+            value : 712,
+            isLeaf: true
+          }
+        ]
+      },
+      {
+        label: 'option3.1',
+        value : 3,
+        children: [],
+        isLeaf: true,
+        disabled: true
+      }
+    ])
     return {
-      options
+      options,
+      options2
     }
   },
 })
-- 
Gitee


From 3a66fb4d3e8e805e628094669d283db8d606ffcc Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Mon, 18 Oct 2021 17:43:31 +0800
Subject: [PATCH 03/18] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84cascader=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/cascader-item/index.tsx        | 29 +++++---
 devui/cascader/hooks/use-cascader-item.ts     | 11 +++-
 devui/cascader/hooks/use-cascader-popup.ts    |  1 +
 devui/cascader/src/cascader-types.ts          | 13 ++--
 devui/cascader/src/cascader.tsx               | 66 +++++++++++++++++--
 5 files changed, 97 insertions(+), 23 deletions(-)

diff --git a/devui/cascader/components/cascader-item/index.tsx b/devui/cascader/components/cascader-item/index.tsx
index 1d0f0086..f74b43db 100644
--- a/devui/cascader/components/cascader-item/index.tsx
+++ b/devui/cascader/components/cascader-item/index.tsx
@@ -1,34 +1,45 @@
 import { getRootClass } from './use-class'
 import { optionsHandles } from '../../hooks/use-cascader-options'
-import { CascaderItem } from '../../src/cascader-types'
+import { CascaderItem, CascaderItemNeedType } from '../../src/cascader-types'
 import { CascaderulProps } from '../cascader-list/cascader-list-types'
 import './index.scss'
 interface CascaderItemPropsType extends CascaderulProps {
   cascaderItem: CascaderItem
   liIndex: number
+  cascaderItemNeedProps: CascaderItemNeedType
 }
 export const DCascaderItem = (props: CascaderItemPropsType) => {
-  console.log(props)
-  const { cascaderItem, ulIndex, cascaderOptions, liIndex } = props
+  // console.log('item index',props)
+  const { cascaderItem, ulIndex, cascaderOptions, liIndex, cascaderItemNeedProps } = props
   const { changeCascaderIndexs } = optionsHandles(cascaderOptions)
   const rootClasses = getRootClass()
   const triggerHover = props.cascaderItemNeedProps.trigger === 'hover'
   const updateValues = () => {
-    console.log(liIndex)
-    // props.value[ulIndex] = liIndex
-    // props.value.splice(0, ulIndex, ulIndex)
+    // 删除当前联动级之后的所有级
+    cascaderItemNeedProps.value.splice(ulIndex, cascaderItemNeedProps.value.length - ulIndex)
+    // 更新当前active的value数组
+    cascaderItemNeedProps.value[ulIndex] = liIndex
   }
+  // 展开或改变下一级列表
+  const changeCascader = () => {
+    // changeCascaderIndexs(cascaderItem, ulIndex)
+  }
+  // 鼠标hover
   const mouseEnter = () => {
     updateValues()
-    changeCascaderIndexs(cascaderItem, ulIndex)
+    changeCascader()
   }
   const mouseenter = {
     [ triggerHover && 'onMouseenter']: mouseEnter
   }
+  // 鼠标click
   const mouseClick = () => {
     updateValues()
-    if (triggerHover && cascaderItem?.children?.length === 0) {
-
+    changeCascader()
+    console.log(cascaderItem)
+    if (triggerHover && (!cascaderItem.children || cascaderItem?.children?.length === 0)) {
+      console.log('确定')
+      cascaderItemNeedProps.confirmInputValueFlg.value = !cascaderItemNeedProps.confirmInputValueFlg.value
     }
   }
   return (
diff --git a/devui/cascader/hooks/use-cascader-item.ts b/devui/cascader/hooks/use-cascader-item.ts
index d64e731a..cf0470c9 100644
--- a/devui/cascader/hooks/use-cascader-item.ts
+++ b/devui/cascader/hooks/use-cascader-item.ts
@@ -1,10 +1,15 @@
 /**
  * 处理cascader-item中需要的参数
  */
-import { CascaderProps, UseCascaderItemCallback } from '../src/cascader-types'
-export const userCascaderItem = (props: CascaderProps): UseCascaderItemCallback => {
+import { CascaderProps, UseCascaderItemCallback, CascaderValueType } from '../src/cascader-types'
+import { ref } from 'vue'
+export const useCascaderItem = (props: CascaderProps, value: CascaderValueType): UseCascaderItemCallback => {
+
   const cascaderItemNeedProps = {
-    trigger: props.trigger
+    trigger: props.trigger,
+    inputValueCache: ref(''),
+    confirmInputValueFlg: ref(false), // 用于监听点击确定时输出选择内容
+    value,
   }
   return {
     cascaderItemNeedProps
diff --git a/devui/cascader/hooks/use-cascader-popup.ts b/devui/cascader/hooks/use-cascader-popup.ts
index 8e8f4bdf..35bd7d8f 100644
--- a/devui/cascader/hooks/use-cascader-popup.ts
+++ b/devui/cascader/hooks/use-cascader-popup.ts
@@ -10,6 +10,7 @@ export const popupHandles = (): PopupTypes => {
   const openPopup = () => {
     menuShow.value = !menuShow.value
   }
+
   watch(menuShow, (status) => {
     menuOpenClass.value = status ? 'devui-drop-menu-wrapper' : ''
   })
diff --git a/devui/cascader/src/cascader-types.ts b/devui/cascader/src/cascader-types.ts
index e7d33700..c8a4b1b0 100644
--- a/devui/cascader/src/cascader-types.ts
+++ b/devui/cascader/src/cascader-types.ts
@@ -15,7 +15,7 @@ export interface CascaderItem {
 }
 
 type CascaderModelValue = number[]
-
+export type CascaderValueType = CascaderModelValue | [CascaderModelValue]
 export const cascaderProps = {
   /**
    * 可选，指定展开次级菜单方式
@@ -48,11 +48,11 @@ export const cascaderProps = {
   },
   /**
    * 可选，级联器选中的数组下标value
-   * @type {CascaderModelValue | [CascaderModelValue]}
+   * @type {CascaderValueType}
    * @default []
    */
   value: {
-    type: Array as PropType<CascaderModelValue | [CascaderModelValue]>,
+    type: Array as PropType<CascaderValueType>,
     default: []
   },
   /**
@@ -92,6 +92,11 @@ export interface OptionsCallback {
 
 type cascaderItemExtendsProps = 'trigger'
 export type PickCascader = Pick<CascaderProps, cascaderItemExtendsProps>
+export interface CascaderItemNeedType extends PickCascader {
+  value: CascaderValueType
+  inputValueCache: Ref<string>
+  confirmInputValueFlg: Ref<boolean>
+}
 export interface UseCascaderItemCallback {
-  cascaderItemNeedProps: PickCascader
+  cascaderItemNeedProps: CascaderItemNeedType
 }
diff --git a/devui/cascader/src/cascader.tsx b/devui/cascader/src/cascader.tsx
index a08db147..7c869939 100644
--- a/devui/cascader/src/cascader.tsx
+++ b/devui/cascader/src/cascader.tsx
@@ -1,20 +1,23 @@
 import './cascader.scss'
 
-import { defineComponent, ref, reactive } from 'vue'
-import { cascaderProps, CascaderItem, CascaderProps } from './cascader-types'
+import { defineComponent, ref, reactive, watch } from 'vue'
+import { cascaderProps, CascaderItem, CascaderProps, CascaderValueType } from './cascader-types'
 import { getRootClass } from '../hooks/use-cascader-class'
 import { popupHandles } from '../hooks/use-cascader-popup'
 import DCascaderList from '../components/cascader-list'
 // import { optionsHandles } from '../hooks/use-cascader-options'
-import { userCascaderItem } from '../hooks/use-cascader-item'
-
+import { useCascaderItem } from '../hooks/use-cascader-item'
+import { UnwrapNestedRefs } from '@vue/reactivity'
+type ValueType = UnwrapNestedRefs<CascaderValueType>
 export default defineComponent({
   name: 'DCascader',
   props: cascaderProps,
   setup(props: CascaderProps, ctx) {
     const origin = ref(null)
     const cascaderOptions = reactive<[CascaderItem[]]>([ props?.options ])
-    // const value = props.value
+    
+    const value: ValueType = reactive(props.value)
+    const inputValue = ref('')
     const position = reactive({
       originX: 'left', 
       originY: 'bottom', 
@@ -26,14 +29,63 @@ export default defineComponent({
     // 配置class
     const rootClasses = getRootClass(props, menuShow)
     // 传递给cascaderItem的props
-    console.log(ctx.attrs)
-    const { cascaderItemNeedProps } = userCascaderItem(props)
+    // console.log(ctx.attrs)
+    const { cascaderItemNeedProps } = useCascaderItem(props, value)
+    /**
+     * 
+     * @param value value数组
+     * @param index 起始项
+     */
+    const getCascaderLoop = (value: ValueType, currentOption: CascaderItem[], index: number) => {
+      if (index === value.length) return
+      // 区分单选多选模式
+      if (!props.multiple) {
+        const i = value[index]
+        if (currentOption[i as number].children?.length > 0) {
+          // 为下一级增添数据
+          cascaderOptions[index + 1] = currentOption[i as number].children
+          // 递归添加
+          console.log(currentOption[i as number])
+          getInputValue(currentOption[i as number].label)
+          getCascaderLoop(value, currentOption[i as number].children, index + 1)
+        } else {
+          // 当最新的ul没有下一级时删除之前选中ul的数据
+          cascaderOptions.splice(index + 1, cascaderOptions.length - 1)
+        }
+      }
+    }
+
+    /**
+     * 
+     * @param value 当前value数组
+     */
+    const getInputValue = (label: string) => {
+      cascaderItemNeedProps.inputValueCache.value += (label + ' / ')
+    }
+    /**
+     * 监听value值的改变
+     * 改变cascaderOptions弹窗内容
+     * 改变展示值
+     */
+    watch(value, (val) => {
+      // cascaderOptions = [ props?.options ]
+      console.log(val)
+      cascaderItemNeedProps.inputValueCache.value = ''
+      getCascaderLoop(val, props?.options, 0)
+    })
+
+    watch(() => cascaderItemNeedProps.confirmInputValueFlg.value, (val) => {
+      console.log('确定值')
+      // inputValue.value = ''
+      inputValue.value = cascaderItemNeedProps.inputValueCache.value
+    })
     return () => (
       <>
         <div class={rootClasses.value} onClick={openPopup} ref={origin} {...ctx.attrs}>
           <d-input
             disabled={props.disabled}
             placeholder={props.placeholder}
+            value={inputValue.value}
           ></d-input>
           <div class="devui-cascader__icon devui-drop-icon-animation">
             <d-icon name="select-arrow" size="12px"></d-icon>
-- 
Gitee


From 12452aa29799d9c129346ea105879d2f3e707996 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Thu, 21 Oct 2021 15:03:50 +0800
Subject: [PATCH 04/18] =?UTF-8?q?feat:=20cascader=E6=96=B0=E5=A2=9Eapi?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=8C=E5=96=84=E5=9F=BA=E7=A1=80=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/cascader-item/index.scss       | 18 +++++++++++
 .../components/cascader-item/index.tsx        | 30 ++++++-------------
 .../components/cascader-item/use-class.ts     |  7 ++++-
 .../cascader-list/cascader-list-types.ts      | 10 +++++--
 .../components/cascader-list/index.scss       | 14 +++++++++
 .../components/cascader-list/index.tsx        | 17 +++++++----
 .../components/cascader-list/use-class.ts     |  4 ++-
 devui/cascader/hooks/use-cascader-class.ts    |  5 +---
 devui/cascader/hooks/use-cascader-item.ts     |  8 ++---
 devui/cascader/hooks/use-cascader-options.ts  | 16 ++--------
 devui/cascader/hooks/use-cascader-popup.ts    |  8 +++--
 devui/cascader/src/cascader.scss              |  6 ++++
 devui/cascader/src/cascader.tsx               | 28 +++++++----------
 docs/components/cascader/index.md             | 19 +++++++++++-
 14 files changed, 116 insertions(+), 74 deletions(-)

diff --git a/devui/cascader/components/cascader-item/index.scss b/devui/cascader/components/cascader-item/index.scss
index 459a9136..82b7ec09 100644
--- a/devui/cascader/components/cascader-item/index.scss
+++ b/devui/cascader/components/cascader-item/index.scss
@@ -9,6 +9,11 @@
     color: $devui-text;
     cursor: pointer;
     @include flex(flex-start);
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
   }
 
   .dropdown-item-label {
@@ -19,4 +24,17 @@
     text-overflow: ellipsis;
     font-size: $devui-font-size;
   }
+
+  &.devui-leaf-active {
+    background: $devui-list-item-hover-bg;
+
+    span {
+      color: $devui-brand-active;
+    }
+  }
+
+  &.disabled {
+    background-color: $devui-disabled-bg;
+    cursor: not-allowed;
+  }
 }
diff --git a/devui/cascader/components/cascader-item/index.tsx b/devui/cascader/components/cascader-item/index.tsx
index f74b43db..646d4881 100644
--- a/devui/cascader/components/cascader-item/index.tsx
+++ b/devui/cascader/components/cascader-item/index.tsx
@@ -1,44 +1,32 @@
 import { getRootClass } from './use-class'
-import { optionsHandles } from '../../hooks/use-cascader-options'
-import { CascaderItem, CascaderItemNeedType } from '../../src/cascader-types'
-import { CascaderulProps } from '../cascader-list/cascader-list-types'
+import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
+import { computed } from 'vue'
 import './index.scss'
-interface CascaderItemPropsType extends CascaderulProps {
-  cascaderItem: CascaderItem
-  liIndex: number
-  cascaderItemNeedProps: CascaderItemNeedType
-}
 export const DCascaderItem = (props: CascaderItemPropsType) => {
   // console.log('item index',props)
-  const { cascaderItem, ulIndex, cascaderOptions, liIndex, cascaderItemNeedProps } = props
-  const { changeCascaderIndexs } = optionsHandles(cascaderOptions)
-  const rootClasses = getRootClass()
-  const triggerHover = props.cascaderItemNeedProps.trigger === 'hover'
+  const { cascaderItem, ulIndex, liIndex, cascaderItemNeedProps } = props
+  const disbaled = computed(() => cascaderItem?.disabled) // 当前项是否被禁用
+  const rootClasses = getRootClass(props)
+  const triggerHover = cascaderItemNeedProps.trigger === 'hover'
   const updateValues = () => {
     // 删除当前联动级之后的所有级
     cascaderItemNeedProps.value.splice(ulIndex, cascaderItemNeedProps.value.length - ulIndex)
     // 更新当前active的value数组
     cascaderItemNeedProps.value[ulIndex] = liIndex
   }
-  // 展开或改变下一级列表
-  const changeCascader = () => {
-    // changeCascaderIndexs(cascaderItem, ulIndex)
-  }
   // 鼠标hover
   const mouseEnter = () => {
+    if (disbaled.value) return
     updateValues()
-    changeCascader()
   }
   const mouseenter = {
     [ triggerHover && 'onMouseenter']: mouseEnter
   }
   // 鼠标click
   const mouseClick = () => {
+    if (disbaled.value) return
     updateValues()
-    changeCascader()
-    console.log(cascaderItem)
-    if (triggerHover && (!cascaderItem.children || cascaderItem?.children?.length === 0)) {
-      console.log('确定')
+    if (!cascaderItem.children || cascaderItem?.children?.length === 0) {
       cascaderItemNeedProps.confirmInputValueFlg.value = !cascaderItemNeedProps.confirmInputValueFlg.value
     }
   }
diff --git a/devui/cascader/components/cascader-item/use-class.ts b/devui/cascader/components/cascader-item/use-class.ts
index 5a5ec3e2..2e950499 100644
--- a/devui/cascader/components/cascader-item/use-class.ts
+++ b/devui/cascader/components/cascader-item/use-class.ts
@@ -2,10 +2,15 @@
  * 定义组件class
  */
  import { computed, ComputedRef } from 'vue';
+ import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
 
- export const getRootClass = (): ComputedRef => {
+ export const getRootClass = (props: CascaderItemPropsType): ComputedRef => {
+   const activeFlg = props?.cascaderItemNeedProps?.value[props.ulIndex] === props.liIndex
+   const disabledFlg = props.cascaderItem?.disabled
    return computed(() => ({
      'devui-cascader-li devui-dropdown-item': true,
+     'devui-leaf-active': activeFlg,
+     'disabled': disabledFlg
    }))
  }
  
\ No newline at end of file
diff --git a/devui/cascader/components/cascader-list/cascader-list-types.ts b/devui/cascader/components/cascader-list/cascader-list-types.ts
index 55ede164..019d452f 100644
--- a/devui/cascader/components/cascader-list/cascader-list-types.ts
+++ b/devui/cascader/components/cascader-list/cascader-list-types.ts
@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes } from 'vue'
-import { CascaderItem, PickCascader } from '../../src/cascader-types'
+import { CascaderItem, CascaderItemNeedType } from '../../src/cascader-types'
 export const cascaderulProps = {
   /**
    * 每个ul中的li
@@ -20,7 +20,7 @@ export const cascaderulProps = {
     default: 0
   },
   cascaderItemNeedProps: {
-    type: Object as PropType<PickCascader>,
+    type: Object as PropType<CascaderItemNeedType>,
     default: {}
   },
   cascaderOptions: {
@@ -29,3 +29,9 @@ export const cascaderulProps = {
   }
 }
 export type CascaderulProps = ExtractPropTypes<typeof cascaderulProps>
+
+export interface CascaderItemPropsType extends CascaderulProps {
+  cascaderItem: CascaderItem
+  liIndex: number
+  cascaderItemNeedProps: CascaderItemNeedType
+}
\ No newline at end of file
diff --git a/devui/cascader/components/cascader-list/index.scss b/devui/cascader/components/cascader-list/index.scss
index a5ff2f80..5c35c258 100644
--- a/devui/cascader/components/cascader-list/index.scss
+++ b/devui/cascader/components/cascader-list/index.scss
@@ -1,5 +1,6 @@
 @import '../../../style/mixins/flex';
 @import '../../../style/theme/color';
+@import '../../../style/theme/font';
 
 .devui-cascader-ul {
   width: 200px;
@@ -11,4 +12,17 @@
   padding: 0;
   overflow-y: auto;
   border-left: 1px solid $devui-dividing-line;
+
+  &.devui-drop-no-data {
+    color: $devui-disabled-text;
+    padding: 8px;
+    display: block;
+    height: 36px;
+    line-height: 36px;
+    overflow-y: hidden;
+    background-color: $devui-disabled-bg;
+    font-size: $devui-font-size;
+    @include flex(center, flex-start);
+    @include flex-direction();
+  }
 }
diff --git a/devui/cascader/components/cascader-list/index.tsx b/devui/cascader/components/cascader-list/index.tsx
index 58396663..2c10267e 100644
--- a/devui/cascader/components/cascader-list/index.tsx
+++ b/devui/cascader/components/cascader-list/index.tsx
@@ -1,18 +1,23 @@
 import { defineComponent } from 'vue'
 import { getRootClass } from './use-class'
 import './index.scss'
-import { cascaderulProps } from './cascader-list-types'
+import { cascaderulProps, CascaderulProps } from './cascader-list-types'
 import { DCascaderItem } from '../cascader-item'
 export default defineComponent({
   name: 'DCascaderList',
   props: cascaderulProps,
-  setup(props) {
-    const rootClasses = getRootClass()
+  setup(props: CascaderulProps) {
+    const rootClasses = getRootClass(props)
+    // console.log('props', props)
     return () => (
       <ul class={rootClasses.value}>
-        {props.cascaderItems.map((item, index) => {
-          return <DCascaderItem cascaderItem={item} liIndex={index} {...props}></DCascaderItem>
-        })}
+        {
+          props?.cascaderItems?.length > 0
+          ? props.cascaderItems.map((item, index) => {
+            return <DCascaderItem cascaderItem={item} liIndex={index} {...props}></DCascaderItem>
+          })
+          : <span>没有数据</span>
+        }
       </ul>
     )
   }
diff --git a/devui/cascader/components/cascader-list/use-class.ts b/devui/cascader/components/cascader-list/use-class.ts
index eb0109c7..67cdd5fd 100644
--- a/devui/cascader/components/cascader-list/use-class.ts
+++ b/devui/cascader/components/cascader-list/use-class.ts
@@ -2,10 +2,12 @@
  * 定义组件class
  */
  import { computed, ComputedRef } from 'vue';
+ import { CascaderulProps } from './cascader-list-types'
 
- export const getRootClass = (): ComputedRef => {
+ export const getRootClass = (props: CascaderulProps): ComputedRef => {
    return computed(() => ({
      'devui-cascader-ul': true,
+     'devui-drop-no-data': props?.cascaderItems?.length === 0
    }))
  }
  
\ No newline at end of file
diff --git a/devui/cascader/hooks/use-cascader-class.ts b/devui/cascader/hooks/use-cascader-class.ts
index 706eca5e..2484742e 100644
--- a/devui/cascader/hooks/use-cascader-class.ts
+++ b/devui/cascader/hooks/use-cascader-class.ts
@@ -3,10 +3,7 @@
  */
 import { computed, ComputedRef, Ref } from 'vue';
 import { CascaderProps } from '../src/cascader-types'
-const TRIGGER_Map = {
-  hover: 'hover',
-  click: 'click',
-}
+
 export const getRootClass = (props: CascaderProps, menuShow: Ref<boolean> ): ComputedRef => {
   return computed(() => ({
     'devui-cascader devui-dropdown devui-dropdown-animation': true,
diff --git a/devui/cascader/hooks/use-cascader-item.ts b/devui/cascader/hooks/use-cascader-item.ts
index cf0470c9..1710d58e 100644
--- a/devui/cascader/hooks/use-cascader-item.ts
+++ b/devui/cascader/hooks/use-cascader-item.ts
@@ -1,15 +1,15 @@
 /**
  * 处理cascader-item中需要的参数
  */
-import { CascaderProps, UseCascaderItemCallback, CascaderValueType } from '../src/cascader-types'
-import { ref } from 'vue'
-export const useCascaderItem = (props: CascaderProps, value: CascaderValueType): UseCascaderItemCallback => {
+import { CascaderProps, UseCascaderItemCallback } from '../src/cascader-types'
+import { ref, reactive } from 'vue'
+export const useCascaderItem = (props: CascaderProps): UseCascaderItemCallback => {
 
   const cascaderItemNeedProps = {
     trigger: props.trigger,
     inputValueCache: ref(''),
     confirmInputValueFlg: ref(false), // 用于监听点击确定时输出选择内容
-    value,
+    value: reactive(props.value),
   }
   return {
     cascaderItemNeedProps
diff --git a/devui/cascader/hooks/use-cascader-options.ts b/devui/cascader/hooks/use-cascader-options.ts
index 01cc1faa..1c3c897a 100644
--- a/devui/cascader/hooks/use-cascader-options.ts
+++ b/devui/cascader/hooks/use-cascader-options.ts
@@ -1,7 +1,7 @@
 /**
  * 处理传入options数据
  */
-import { CascaderItem, OptionsCallback, CaascaderOptionsType, CascaderProps } from '../src/cascader-types'
+import { CascaderItem, OptionsCallback, CaascaderOptionsType } from '../src/cascader-types'
 export const optionsHandles = (cascaderOptions?: CaascaderOptionsType): OptionsCallback => {
 
   /**
@@ -19,19 +19,7 @@ export const optionsHandles = (cascaderOptions?: CaascaderOptionsType): OptionsC
       cascaderOptions.splice(ulIndex + 1, cascaderOptions.length - 1 - ulIndex)
     }
   }
-  /**
-   * 根据value，数据反显
-   */
-  // const reflectViewData = (propsData?: CascaderProps) => {
-  //   // 单选模式
-  //   if (!propsData.multiple) {
-  //     for (let i = 0; i < cascaderOptions.length; i++) {
-        
-  //     }
-  //   } else {
-  //     // 多选模式
-  //   }
-  // }
+
   return {
     cascaderOptions,
     changeCascaderIndexs
diff --git a/devui/cascader/hooks/use-cascader-popup.ts b/devui/cascader/hooks/use-cascader-popup.ts
index 35bd7d8f..64ecefff 100644
--- a/devui/cascader/hooks/use-cascader-popup.ts
+++ b/devui/cascader/hooks/use-cascader-popup.ts
@@ -1,13 +1,15 @@
 /**
  * 控制窗口打开收起
  */
-import { ref, watch } from 'vue';
-import { PopupTypes } from '../src/cascader-types'
+import { ref, watch, computed } from 'vue';
+import { PopupTypes, CascaderProps } from '../src/cascader-types'
 
-export const popupHandles = (): PopupTypes => {
+export const popupHandles = (props: CascaderProps): PopupTypes => {
   const menuShow = ref(false)
   const menuOpenClass = ref('')
+  const disabled = computed(() => props.disabled) // select是否被禁用
   const openPopup = () => {
+    if (disabled.value) return
     menuShow.value = !menuShow.value
   }
 
diff --git a/devui/cascader/src/cascader.scss b/devui/cascader/src/cascader.scss
index cb49189e..5bed886b 100644
--- a/devui/cascader/src/cascader.scss
+++ b/devui/cascader/src/cascader.scss
@@ -24,6 +24,12 @@
     }
   }
 
+  &__disbaled {
+    .icon {
+      color: $devui-disabled-text !important;
+    }
+  }
+
   input {
     width: 100%;
     padding-right: 16px;
diff --git a/devui/cascader/src/cascader.tsx b/devui/cascader/src/cascader.tsx
index 7c869939..da20c8b6 100644
--- a/devui/cascader/src/cascader.tsx
+++ b/devui/cascader/src/cascader.tsx
@@ -16,7 +16,6 @@ export default defineComponent({
     const origin = ref(null)
     const cascaderOptions = reactive<[CascaderItem[]]>([ props?.options ])
     
-    const value: ValueType = reactive(props.value)
     const inputValue = ref('')
     const position = reactive({
       originX: 'left', 
@@ -25,31 +24,29 @@ export default defineComponent({
       overlayY: 'top'
     } as const)
     // popup弹出层
-    const { menuShow, menuOpenClass, openPopup } = popupHandles()
+    const { menuShow, menuOpenClass, openPopup } = popupHandles(props)
     // 配置class
     const rootClasses = getRootClass(props, menuShow)
     // 传递给cascaderItem的props
-    // console.log(ctx.attrs)
-    const { cascaderItemNeedProps } = useCascaderItem(props, value)
+    const { cascaderItemNeedProps } = useCascaderItem(props)
     /**
      * 
      * @param value value数组
      * @param index 起始项
      */
-    const getCascaderLoop = (value: ValueType, currentOption: CascaderItem[], index: number) => {
+    const getCascaderLoop = (value: CascaderValueType, currentOption: CascaderItem[], index: number) => {
       if (index === value.length) return
       // 区分单选多选模式
       if (!props.multiple) {
         const i = value[index]
-        if (currentOption[i as number].children?.length > 0) {
+        getInputValue(currentOption[i as number]?.label, currentOption[i as number]?.children)
+        if (currentOption[i as number]?.children?.length > 0) {
           // 为下一级增添数据
           cascaderOptions[index + 1] = currentOption[i as number].children
           // 递归添加
-          console.log(currentOption[i as number])
-          getInputValue(currentOption[i as number].label)
           getCascaderLoop(value, currentOption[i as number].children, index + 1)
         } else {
-          // 当最新的ul没有下一级时删除之前选中ul的数据
+          // 当最新的ul(级)没有下一级时删除之前选中ul的数据
           cascaderOptions.splice(index + 1, cascaderOptions.length - 1)
         }
       }
@@ -59,25 +56,22 @@ export default defineComponent({
      * 
      * @param value 当前value数组
      */
-    const getInputValue = (label: string) => {
-      cascaderItemNeedProps.inputValueCache.value += (label + ' / ')
+    const getInputValue = (label: string, arr?: CascaderItem[]) => {
+      cascaderItemNeedProps.inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
     }
     /**
      * 监听value值的改变
      * 改变cascaderOptions弹窗内容
      * 改变展示值
      */
-    watch(value, (val) => {
-      // cascaderOptions = [ props?.options ]
-      console.log(val)
+    watch(cascaderItemNeedProps.value, (val) => {
       cascaderItemNeedProps.inputValueCache.value = ''
       getCascaderLoop(val, props?.options, 0)
     })
 
-    watch(() => cascaderItemNeedProps.confirmInputValueFlg.value, (val) => {
-      console.log('确定值')
-      // inputValue.value = ''
+    watch(() => cascaderItemNeedProps.confirmInputValueFlg.value, () => {
       inputValue.value = cascaderItemNeedProps.inputValueCache.value
+      menuShow.value = false
     })
     return () => (
       <>
diff --git a/docs/components/cascader/index.md b/docs/components/cascader/index.md
index d2bc6cef..ad263d5e 100644
--- a/docs/components/cascader/index.md
+++ b/docs/components/cascader/index.md
@@ -1,13 +1,19 @@
 # 级联菜单
 下拉级联菜单。
-
 ### 基本用法
+
 :::demo
 
 ```vue
 <template>
+  <h4>hover mode</h4>
   <d-cascader :options="options" placeholder="请选择" style="width: 200px"></d-cascader>
+  <h4>click mode</h4>
   <d-cascader :options="options2" trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
+  <h4>data empty</h4>
+  <d-cascader :options="[]" trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
+  <h4>disabled</h4>
+  <d-cascader :options="[]" disabled trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
 </template>
 <script>
 import { defineComponent, reactive } from 'vue'
@@ -217,12 +223,23 @@ export default defineComponent({
 
 :::
 
+<style>
+  h4 {
+    font-weight: 700;
+    color: #575d6c;
+    font-size: 12px;
+    margin: 15px 0;
+  }
+</style>
+
 ### API
 
 |    参数     |   类型   |   默认    | 说明                     | 跳转 Demo                         |  全局配置项 |
 | :--------: | :------: | :-------: | :---------------------- | --------------------------------- | --------- |
+| trigger    | ` 'hover'\|'click' ` |	'hover' |	可选，指定展开次级菜单的方式 |  [基本用法](#基本用法) | |
 | options    |	[`CascaderItem[]`](#CascaderItem) |	[] |	必选，级联器的菜单信息 |  [基本用法](#基本用法) | |
 | placeholder    | `string` |	'' |	可选，没有选择时的输入框展示信息 |  [基本用法](#基本用法) | |
+| disabled    | `boolean` |	false |		可选，级联器是否禁用 |  [基本用法](#基本用法) | |
 
 ### 接口 & 类型定义
 
-- 
Gitee


From 359dcfdaa0d5e04ea45df9c2c1f90fe6c19e1a92 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Thu, 28 Oct 2021 09:52:00 +0800
Subject: [PATCH 05/18] feat: add

---
 devui/cascader/src/cascader.tsx   |   2 +
 docs/components/cascader/index.md | 138 ++++++++++++++++++++++++++++++
 2 files changed, 140 insertions(+)

diff --git a/devui/cascader/src/cascader.tsx b/devui/cascader/src/cascader.tsx
index da20c8b6..4178ef5c 100644
--- a/devui/cascader/src/cascader.tsx
+++ b/devui/cascader/src/cascader.tsx
@@ -49,6 +49,8 @@ export default defineComponent({
           // 当最新的ul(级)没有下一级时删除之前选中ul的数据
           cascaderOptions.splice(index + 1, cascaderOptions.length - 1)
         }
+      } else {
+        // 多选模式
       }
     }
 
diff --git a/docs/components/cascader/index.md b/docs/components/cascader/index.md
index ad263d5e..7e99077c 100644
--- a/docs/components/cascader/index.md
+++ b/docs/components/cascader/index.md
@@ -223,6 +223,144 @@ export default defineComponent({
 
 :::
 
+### 多选模式
+
+:::demo
+
+```vue
+<template>
+  <d-cascader
+    :options="options"
+    :value="value1"
+    placeholder="请选择"
+    style="width: 200px"
+    trigger="click"
+    :width="300"
+    :dropdownWidth="200"
+    :multiple="true"
+    :allowClear="true"
+    @toggleEvent="onToggleChange"
+  ></d-cascader>
+</template>
+<script>
+import { defineComponent, reactive } from 'vue'
+export default defineComponent({
+  setup() {
+    const options = reactive([
+      {
+        label: 'option1',
+        value : 1,
+        children: [
+          {
+            label: 'option1-1',
+            value : 4,
+            children: [
+              {
+                label: 'option1-1-1',
+                value : 8,
+                children: []
+              },
+              {
+                label: 'option1-1-2',
+                value : 9,
+                children: [
+                  {
+                    label: 'option1-1-2-1',
+                    value : 81,
+                    isLeaf: true
+                  }
+                ],
+              }
+            ]
+          },
+          {
+            label: 'option1-2',
+            value : 41,
+            isLeaf: true
+          },
+          {
+            label: 'option1-3',
+            value : 42,
+            isLeaf: true
+          },
+          {
+            label: 'option1-4',
+            value : 43,
+            isLeaf: true
+          }
+        ],
+        icon: 'icon-folder'
+      },
+      {
+        label: 'option2',
+        value : 2,
+        children: [
+          {
+            label: 'option2-1',
+            value : 5,
+            children: [
+              {
+                label: 'option2-1-1',
+                value : 51,
+                isLeaf: true
+              },
+              {
+                label: 'option2-1-2',
+                value : 61,
+                isLeaf: true,
+                disabled: true
+              }
+            ]
+          },
+          {
+            label: 'option2-2',
+            value : 6,
+            children: [
+              {
+                label: 'option2-2-1',
+                value : 512,
+                isLeaf: true
+              },
+              {
+                label: 'option2-2-2',
+                value : 611,
+                isLeaf: true
+              }
+            ]
+          },
+          {
+            label: 'option2-3',
+            value : 712,
+            isLeaf: true
+          }
+        ],
+        icon: 'icon-folder'
+      },
+      {
+        label: 'option3',
+        value : 3,
+        children: [],
+        isLeaf: true,
+        disabled: true,
+        icon: 'icon-folder'
+      }
+    ])
+    const value1 = [[1, 4, 8], [1, 4, 9, 81], [1, 41]]
+    const onToggleChange = (event) => {
+      console.log(event)
+    }
+    return {
+      options,
+      value1,
+      onToggleChange
+    }
+  }
+})
+</script>
+```
+
+:::
+
 <style>
   h4 {
     font-weight: 700;
-- 
Gitee


From 1fd513cc3eaffed1800c0ff27b40ebe5f4ce8a67 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Thu, 28 Oct 2021 17:35:13 +0800
Subject: [PATCH 06/18] feat: add character

---
 .../components/cascader-item/index.scss       | 12 ++++++++
 .../components/cascader-item/index.tsx        | 30 ++++++++++++++-----
 devui/cascader/hooks/use-cascader-item.ts     |  2 +-
 devui/cascader/src/cascader-types.ts          |  1 +
 devui/cascader/src/cascader.tsx               | 21 ++++++++-----
 docs/components/cascader/index.md             |  6 ++--
 6 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/devui/cascader/components/cascader-item/index.scss b/devui/cascader/components/cascader-item/index.scss
index 82b7ec09..04f5f97b 100644
--- a/devui/cascader/components/cascader-item/index.scss
+++ b/devui/cascader/components/cascader-item/index.scss
@@ -37,4 +37,16 @@
     background-color: $devui-disabled-bg;
     cursor: not-allowed;
   }
+
+  .cascader-li {
+    &__checkbox {
+      margin-right: 4px;
+    }
+
+    &__icon {
+      margin-right: 4px;
+      font-size: $devui-font-size-icon;
+      color: $devui-text;
+    }
+  }
 }
diff --git a/devui/cascader/components/cascader-item/index.tsx b/devui/cascader/components/cascader-item/index.tsx
index 646d4881..ceb5d690 100644
--- a/devui/cascader/components/cascader-item/index.tsx
+++ b/devui/cascader/components/cascader-item/index.tsx
@@ -3,20 +3,28 @@ import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
 import { computed } from 'vue'
 import './index.scss'
 export const DCascaderItem = (props: CascaderItemPropsType) => {
-  // console.log('item index',props)
+  console.log('item index',props)
   const { cascaderItem, ulIndex, liIndex, cascaderItemNeedProps } = props
+  const { multiple, value } = cascaderItemNeedProps
   const disbaled = computed(() => cascaderItem?.disabled) // 当前项是否被禁用
   const rootClasses = getRootClass(props)
   const triggerHover = cascaderItemNeedProps.trigger === 'hover'
+  // 触发联动更新
   const updateValues = () => {
-    // 删除当前联动级之后的所有级
-    cascaderItemNeedProps.value.splice(ulIndex, cascaderItemNeedProps.value.length - ulIndex)
-    // 更新当前active的value数组
-    cascaderItemNeedProps.value[ulIndex] = liIndex
+    if (!multiple) {
+      // 单选模式
+      // 删除当前联动级之后的所有级
+      cascaderItemNeedProps.value.splice(ulIndex, cascaderItemNeedProps.value.length - ulIndex)
+      // 更新当前active的value数组
+      cascaderItemNeedProps.value[ulIndex] = liIndex
+    } else {
+      // 多选模式
+      console.log(cascaderItemNeedProps.value)
+    }
   }
-  // 鼠标hover
+  // 鼠标hover（多选模式下只能点击操作触发）
   const mouseEnter = () => {
-    if (disbaled.value) return
+    if (disbaled.value || multiple) return
     updateValues()
   }
   const mouseenter = {
@@ -32,6 +40,14 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
   }
   return (
     <li class={rootClasses.value} {...mouseenter} onClick={mouseClick}>
+      <div class="cascader-li__checkbox">
+        <d-checkbox/>
+      </div>
+      { cascaderItem.icon &&
+        <div class="cascader-li__icon">
+          <d-icon name={ cascaderItem.icon } size="inherit"></d-icon>
+        </div>
+      }
       <div class="dropdown-item-label">
         <span>{ cascaderItem.label }</span>
       </div>
diff --git a/devui/cascader/hooks/use-cascader-item.ts b/devui/cascader/hooks/use-cascader-item.ts
index 1710d58e..dbe1603d 100644
--- a/devui/cascader/hooks/use-cascader-item.ts
+++ b/devui/cascader/hooks/use-cascader-item.ts
@@ -4,12 +4,12 @@
 import { CascaderProps, UseCascaderItemCallback } from '../src/cascader-types'
 import { ref, reactive } from 'vue'
 export const useCascaderItem = (props: CascaderProps): UseCascaderItemCallback => {
-
   const cascaderItemNeedProps = {
     trigger: props.trigger,
     inputValueCache: ref(''),
     confirmInputValueFlg: ref(false), // 用于监听点击确定时输出选择内容
     value: reactive(props.value),
+    multiple: props.multiple,
   }
   return {
     cascaderItemNeedProps
diff --git a/devui/cascader/src/cascader-types.ts b/devui/cascader/src/cascader-types.ts
index c8a4b1b0..663cd1c0 100644
--- a/devui/cascader/src/cascader-types.ts
+++ b/devui/cascader/src/cascader-types.ts
@@ -96,6 +96,7 @@ export interface CascaderItemNeedType extends PickCascader {
   value: CascaderValueType
   inputValueCache: Ref<string>
   confirmInputValueFlg: Ref<boolean>
+  multiple: boolean
 }
 export interface UseCascaderItemCallback {
   cascaderItemNeedProps: CascaderItemNeedType
diff --git a/devui/cascader/src/cascader.tsx b/devui/cascader/src/cascader.tsx
index 4178ef5c..59566546 100644
--- a/devui/cascader/src/cascader.tsx
+++ b/devui/cascader/src/cascader.tsx
@@ -1,21 +1,20 @@
-import './cascader.scss'
-
-import { defineComponent, ref, reactive, watch } from 'vue'
+import { defineComponent, ref, reactive, watch, toRef } from 'vue'
 import { cascaderProps, CascaderItem, CascaderProps, CascaderValueType } from './cascader-types'
 import { getRootClass } from '../hooks/use-cascader-class'
 import { popupHandles } from '../hooks/use-cascader-popup'
 import DCascaderList from '../components/cascader-list'
 // import { optionsHandles } from '../hooks/use-cascader-options'
 import { useCascaderItem } from '../hooks/use-cascader-item'
-import { UnwrapNestedRefs } from '@vue/reactivity'
-type ValueType = UnwrapNestedRefs<CascaderValueType>
+import './cascader.scss'
+// import { UnwrapNestedRefs } from '@vue/reactivity'
+// type ValueType = UnwrapNestedRefs<CascaderValueType>
 export default defineComponent({
   name: 'DCascader',
   props: cascaderProps,
   setup(props: CascaderProps, ctx) {
     const origin = ref(null)
     const cascaderOptions = reactive<[CascaderItem[]]>([ props?.options ])
-    
+    const multiple = toRef(props, 'multiple')
     const inputValue = ref('')
     const position = reactive({
       originX: 'left', 
@@ -37,7 +36,7 @@ export default defineComponent({
     const getCascaderLoop = (value: CascaderValueType, currentOption: CascaderItem[], index: number) => {
       if (index === value.length) return
       // 区分单选多选模式
-      if (!props.multiple) {
+      if (!multiple.value) {
         const i = value[index]
         getInputValue(currentOption[i as number]?.label, currentOption[i as number]?.children)
         if (currentOption[i as number]?.children?.length > 0) {
@@ -68,7 +67,13 @@ export default defineComponent({
      */
     watch(cascaderItemNeedProps.value, (val) => {
       cascaderItemNeedProps.inputValueCache.value = ''
-      getCascaderLoop(val, props?.options, 0)
+      if (!multiple.value) {
+        getCascaderLoop(val, props?.options, 0)
+      } else {
+        console.log(val)
+      }
+    }, {
+      immediate: true
     })
 
     watch(() => cascaderItemNeedProps.confirmInputValueFlg.value, () => {
diff --git a/docs/components/cascader/index.md b/docs/components/cascader/index.md
index 7e99077c..bbb377ba 100644
--- a/docs/components/cascader/index.md
+++ b/docs/components/cascader/index.md
@@ -289,7 +289,7 @@ export default defineComponent({
             isLeaf: true
           }
         ],
-        icon: 'icon-folder'
+        icon: 'folder'
       },
       {
         label: 'option2',
@@ -334,7 +334,7 @@ export default defineComponent({
             isLeaf: true
           }
         ],
-        icon: 'icon-folder'
+        icon: 'folder'
       },
       {
         label: 'option3',
@@ -342,7 +342,7 @@ export default defineComponent({
         children: [],
         isLeaf: true,
         disabled: true,
-        icon: 'icon-folder'
+        icon: 'folder'
       }
     ])
     const value1 = [[1, 4, 8], [1, 4, 9, 81], [1, 41]]
-- 
Gitee


From 6b107a1abe137848658d3a408142c38eb921c4b2 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Sun, 31 Oct 2021 21:44:12 +0800
Subject: [PATCH 07/18] feat: add character

---
 .../components/cascader-item/index.tsx        |  27 +++--
 .../components/cascader-item/use-class.ts     |  22 ++--
 .../cascader-list/cascader-list-types.ts      |   6 +-
 .../devui/cascader/hooks/use-cascader-item.ts |   9 +-
 .../cascader/hooks/use-cascader-popup.ts      |   8 ++
 .../devui/cascader/src/cascader-types.ts      |  12 ++-
 .../devui-vue/devui/cascader/src/cascader.tsx | 101 ++++++++++++++----
 .../docs/components/cascader/index.md         |  13 ++-
 8 files changed, 149 insertions(+), 49 deletions(-)

diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
index ceb5d690..9203b7b4 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
@@ -1,22 +1,27 @@
-import { getRootClass } from './use-class'
+import { useClassName } from './use-class'
 import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { cloneDeep } from 'lodash-es'
+
 import './index.scss'
 export const DCascaderItem = (props: CascaderItemPropsType) => {
-  console.log('item index',props)
+  // console.log('item index',props)
   const { cascaderItem, ulIndex, liIndex, cascaderItemNeedProps } = props
-  const { multiple, value } = cascaderItemNeedProps
+  const { multiple, stopDefault } = cascaderItemNeedProps
   const disbaled = computed(() => cascaderItem?.disabled) // 当前项是否被禁用
+  const { getRootClass } = useClassName()
   const rootClasses = getRootClass(props)
   const triggerHover = cascaderItemNeedProps.trigger === 'hover'
   // 触发联动更新
   const updateValues = () => {
+    if (stopDefault.value) return
     if (!multiple) {
-      // 单选模式
+      // 单选模式：
       // 删除当前联动级之后的所有级
       cascaderItemNeedProps.value.splice(ulIndex, cascaderItemNeedProps.value.length - ulIndex)
       // 更新当前active的value数组
-      cascaderItemNeedProps.value[ulIndex] = liIndex
+      cascaderItemNeedProps.value[ulIndex] = cascaderItem?.value as number
+      // console.log(cascaderItemNeedProps.value)
     } else {
       // 多选模式
       console.log(cascaderItemNeedProps.value)
@@ -28,7 +33,7 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
     updateValues()
   }
   const mouseenter = {
-    [ triggerHover && 'onMouseenter']: mouseEnter
+    [ triggerHover && 'onMouseenter' ]: mouseEnter
   }
   // 鼠标click
   const mouseClick = () => {
@@ -40,9 +45,11 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
   }
   return (
     <li class={rootClasses.value} {...mouseenter} onClick={mouseClick}>
-      <div class="cascader-li__checkbox">
-        <d-checkbox/>
-      </div>
+      { multiple && 
+        <div class="cascader-li__checkbox">
+          <d-checkbox/>
+        </div>
+      }
       { cascaderItem.icon &&
         <div class="cascader-li__icon">
           <d-icon name={ cascaderItem.icon } size="inherit"></d-icon>
diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts b/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
index 2e950499..b66972c8 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
@@ -4,13 +4,19 @@
  import { computed, ComputedRef } from 'vue';
  import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
 
- export const getRootClass = (props: CascaderItemPropsType): ComputedRef => {
-   const activeFlg = props?.cascaderItemNeedProps?.value[props.ulIndex] === props.liIndex
-   const disabledFlg = props.cascaderItem?.disabled
-   return computed(() => ({
-     'devui-cascader-li devui-dropdown-item': true,
-     'devui-leaf-active': activeFlg,
-     'disabled': disabledFlg
-   }))
+ export const useClassName= () => {
+   const getRootClass = (props: CascaderItemPropsType): ComputedRef => {
+    const itemProps = props?.cascaderItemNeedProps
+    const activeFlg = itemProps?.value[props.ulIndex] === props.cascaderItem?.value
+    const disabledFlg = props.cascaderItem?.disabled
+    return computed(() => ({
+      'devui-cascader-li devui-dropdown-item': true,
+      'devui-leaf-active': activeFlg,
+      'disabled': disabledFlg
+    }))
+   }
+   return {
+    getRootClass
+   }
  }
  
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts b/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts
index 019d452f..95fb3c98 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts
+++ b/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts
@@ -1,4 +1,4 @@
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes, Ref } from 'vue'
 import { CascaderItem, CascaderItemNeedType } from '../../src/cascader-types'
 export const cascaderulProps = {
   /**
@@ -23,6 +23,10 @@ export const cascaderulProps = {
     type: Object as PropType<CascaderItemNeedType>,
     default: {}
   },
+  stopDefault: {
+    type: Boolean,
+    default: false
+  },
   cascaderOptions: {
     type: Array as unknown as PropType<[CascaderItem[]]>,
     default: []
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
index dbe1603d..b1cea7c3 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
@@ -2,14 +2,17 @@
  * 处理cascader-item中需要的参数
  */
 import { CascaderProps, UseCascaderItemCallback } from '../src/cascader-types'
-import { ref, reactive } from 'vue'
-export const useCascaderItem = (props: CascaderProps): UseCascaderItemCallback => {
+import { ref, reactive, Ref } from 'vue'
+import { cloneDeep } from 'lodash-es'
+
+export const useCascaderItem = (props: CascaderProps, stopDefault: Ref<boolean>): UseCascaderItemCallback => {
   const cascaderItemNeedProps = {
     trigger: props.trigger,
     inputValueCache: ref(''),
     confirmInputValueFlg: ref(false), // 用于监听点击确定时输出选择内容
-    value: reactive(props.value),
+    value: reactive(cloneDeep(props.value)), // 每级的value
     multiple: props.multiple,
+    stopDefault,
   }
   return {
     cascaderItemNeedProps
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-popup.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-popup.ts
index 64ecefff..8e1b4e25 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-popup.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-popup.ts
@@ -8,9 +8,15 @@ export const popupHandles = (props: CascaderProps): PopupTypes => {
   const menuShow = ref(false)
   const menuOpenClass = ref('')
   const disabled = computed(() => props.disabled) // select是否被禁用
+  const stopDefault = ref(false)
+  const updateStopDefaultType = () => {
+    stopDefault.value = !menuShow.value
+  }
+
   const openPopup = () => {
     if (disabled.value) return
     menuShow.value = !menuShow.value
+    updateStopDefaultType()
   }
 
   watch(menuShow, (status) => {
@@ -19,7 +25,9 @@ export const popupHandles = (props: CascaderProps): PopupTypes => {
 
   return {
     menuShow,
+    stopDefault,
     menuOpenClass,
+    updateStopDefaultType,
     openPopup,
   }
 }
diff --git a/packages/devui-vue/devui/cascader/src/cascader-types.ts b/packages/devui-vue/devui/cascader/src/cascader-types.ts
index 663cd1c0..bd099bb4 100644
--- a/packages/devui-vue/devui/cascader/src/cascader-types.ts
+++ b/packages/devui-vue/devui/cascader/src/cascader-types.ts
@@ -47,7 +47,14 @@ export const cascaderProps = {
     default: false
   },
   /**
-   * 可选，级联器选中的数组下标value
+   * 可选，级联器选中项是否显示路径，仅单选模式下生效
+   */
+  showPath: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 可选，需要选中项的value集合
    * @type {CascaderValueType}
    * @default []
    */
@@ -81,7 +88,9 @@ export type CascaderProps = ExtractPropTypes<typeof cascaderProps>
 export interface PopupTypes {
   menuShow: Ref<boolean>
   menuOpenClass: Ref<string>
+  stopDefault: Ref<boolean>
   openPopup:  (e?: MouseEvent) => void
+  updateStopDefaultType: () => void
 }
 
 export type CaascaderOptionsType = UnwrapNestedRefs<[CascaderItem[]]>
@@ -97,6 +106,7 @@ export interface CascaderItemNeedType extends PickCascader {
   inputValueCache: Ref<string>
   confirmInputValueFlg: Ref<boolean>
   multiple: boolean
+  stopDefault: Ref<boolean>
 }
 export interface UseCascaderItemCallback {
   cascaderItemNeedProps: CascaderItemNeedType
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index 59566546..a648e44d 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -5,17 +5,19 @@ import { popupHandles } from '../hooks/use-cascader-popup'
 import DCascaderList from '../components/cascader-list'
 // import { optionsHandles } from '../hooks/use-cascader-options'
 import { useCascaderItem } from '../hooks/use-cascader-item'
+import { cloneDeep } from 'lodash-es'
 import './cascader.scss'
 // import { UnwrapNestedRefs } from '@vue/reactivity'
-// type ValueType = UnwrapNestedRefs<CascaderValueType>
+// type OptionsType = UnwrapNestedRefs<[CascaderItem[]]>
 export default defineComponent({
   name: 'DCascader',
   props: cascaderProps,
   setup(props: CascaderProps, ctx) {
     const origin = ref(null)
-    const cascaderOptions = reactive<[CascaderItem[]]>([ props?.options ])
+    const cascaderOptions = reactive<[CascaderItem[]]>(cloneDeep([ props?.options ]))
     const multiple = toRef(props, 'multiple')
     const inputValue = ref('')
+    let initIptValue = props.value.length > 0 ? true : false
     const position = reactive({
       originX: 'left', 
       originY: 'bottom', 
@@ -23,43 +25,104 @@ export default defineComponent({
       overlayY: 'top'
     } as const)
     // popup弹出层
-    const { menuShow, menuOpenClass, openPopup } = popupHandles(props)
+    const { menuShow, menuOpenClass, openPopup, stopDefault, updateStopDefaultType } = popupHandles(props)
     // 配置class
     const rootClasses = getRootClass(props, menuShow)
     // 传递给cascaderItem的props
-    const { cascaderItemNeedProps } = useCascaderItem(props)
+    const { cascaderItemNeedProps } = useCascaderItem(props, stopDefault)
     /**
      * 
      * @param value value数组
-     * @param index 起始项
+     * @param currentOption 选中的某项
+     * @param index 数组项
      */
     const getCascaderLoop = (value: CascaderValueType, currentOption: CascaderItem[], index: number) => {
-      if (index === value.length) return
       // 区分单选多选模式
       if (!multiple.value) {
-        const i = value[index]
-        getInputValue(currentOption[i as number]?.label, currentOption[i as number]?.children)
-        if (currentOption[i as number]?.children?.length > 0) {
+        if (index === value.length) return
+        const i = value[index] as number
+        // 当前的子级
+        const current = getCurrentOption(currentOption, i)
+        const children = current?.children
+        getInputValue(current.label, children)
+        if (children?.length > 0) {
           // 为下一级增添数据
-          cascaderOptions[index + 1] = currentOption[i as number].children
+          cascaderOptions[index + 1] = children
           // 递归添加
-          getCascaderLoop(value, currentOption[i as number].children, index + 1)
+          getCascaderLoop(value, children, index + 1)
         } else {
           // 当最新的ul(级)没有下一级时删除之前选中ul的数据
           cascaderOptions.splice(index + 1, cascaderOptions.length - 1)
         }
       } else {
         // 多选模式
+        // console.log('currentOption', currentOption)
+        value.forEach(singleValues => {
+          console.log('singleValues', singleValues)
+          getMultipleCascaderItem(currentOption, singleValues, index)
+        })
       }
     }
 
     /**
      * 
-     * @param value 当前value数组
+     * 筛选每列中选中的value
+     */
+    const getCurrentOption = (currentOption: CascaderItem[], i: number) => {
+      return currentOption.filter(item => item?.value === i)[0]
+    }
+    /**
+     * 需要判断是否是多选
+     * 需要判断单选模式下是否showPath
+     * @param label 当前current的内容
+     * @param arr 当前选中项current的children数组
      */
     const getInputValue = (label: string, arr?: CascaderItem[]) => {
-      cascaderItemNeedProps.inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
+      if (!props.showPath) {
+        cascaderItemNeedProps.inputValueCache.value = label
+      } else {
+        cascaderItemNeedProps.inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
+      }
+    }
+    const getMultipleIptValue = () => {
+
+    }
+    /**
+     * @param currentOption 选中的某项
+     * @param cascaderUlValues 多选集合中的某一个集合
+     * @param index cascaderUlValues数组的起始项，最开始为0
+     */
+    const getMultipleCascaderItem = (currentOption: CascaderItem[], cascaderUlValues: number[], index: number) => {
+      console.log('currentOption', currentOption, cascaderUlValues[index], index)
+      let nextOption = null
+      for (let i = 0; i < currentOption.length; i++) {
+        if (currentOption[i]?.value === cascaderUlValues[index]) {
+          nextOption = currentOption[i]
+          break
+        }
+      }
+      console.log(nextOption?.label)
+      if (nextOption?.children?.length > 0) {
+        index += 1
+        getMultipleCascaderItem(nextOption.children, cascaderUlValues, index)
+      }
     }
+    // const initMultipleActiveItem = ()
+    /**
+     * 触发input内容输出监听
+     */
+    const triggerUpdateIptValue = () => {
+      cascaderItemNeedProps.confirmInputValueFlg.value = !cascaderItemNeedProps.confirmInputValueFlg.value
+    }
+    /**
+     * 监听点击最终的节点输出内容
+     */
+     watch(() => cascaderItemNeedProps.confirmInputValueFlg.value, () => {
+      inputValue.value = cascaderItemNeedProps.inputValueCache.value
+      menuShow.value = false
+      // 点击确定过后禁止再次选中
+      updateStopDefaultType()
+    })
     /**
      * 监听value值的改变
      * 改变cascaderOptions弹窗内容
@@ -67,19 +130,15 @@ export default defineComponent({
      */
     watch(cascaderItemNeedProps.value, (val) => {
       cascaderItemNeedProps.inputValueCache.value = ''
-      if (!multiple.value) {
-        getCascaderLoop(val, props?.options, 0)
-      } else {
-        console.log(val)
+      getCascaderLoop(val, props?.options, 0)
+      if (initIptValue) { // 因为初始化了value，所以默认输出值
+        triggerUpdateIptValue()
+        initIptValue = false // 只需要初始化一次，之后不再执行
       }
     }, {
       immediate: true
     })
 
-    watch(() => cascaderItemNeedProps.confirmInputValueFlg.value, () => {
-      inputValue.value = cascaderItemNeedProps.inputValueCache.value
-      menuShow.value = false
-    })
     return () => (
       <>
         <div class={rootClasses.value} onClick={openPopup} ref={origin} {...ctx.attrs}>
diff --git a/packages/devui-vue/docs/components/cascader/index.md b/packages/devui-vue/docs/components/cascader/index.md
index f5ed5782..e900d06f 100644
--- a/packages/devui-vue/docs/components/cascader/index.md
+++ b/packages/devui-vue/docs/components/cascader/index.md
@@ -1,15 +1,12 @@
 # Cascader 级联菜单
 
 下拉级联菜单。
-<<<<<<< HEAD:docs/components/cascader/index.md
-=======
 
 ### 何时使用
 
 1. 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
 2. 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
 
->>>>>>> dev:packages/devui-vue/docs/components/cascader/index.md
 ### 基本用法
 
 :::demo
@@ -19,7 +16,7 @@
   <h4>hover mode</h4>
   <d-cascader :options="options" placeholder="请选择" style="width: 200px"></d-cascader>
   <h4>click mode</h4>
-  <d-cascader :options="options2" trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
+  <d-cascader :options="options2" :value="value" showPath trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
   <h4>data empty</h4>
   <d-cascader :options="[]" trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
   <h4>disabled</h4>
@@ -222,9 +219,11 @@ export default defineComponent({
         disabled: true
       }
     ])
+    const value = [1, 4, 9, 81]
     return {
       options,
-      options2
+      options2,
+      value
     }
   },
 })
@@ -388,6 +387,10 @@ export default defineComponent({
 | options    |	[`CascaderItem[]`](#CascaderItem) |	[] |	必选，级联器的菜单信息 |  [基本用法](#基本用法) | |
 | placeholder    | `string` |	'' |	可选，没有选择时的输入框展示信息 |  [基本用法](#基本用法) | |
 | disabled    | `boolean` |	false |		可选，级联器是否禁用 |  [基本用法](#基本用法) | |
+| value    | `number[] \| [number[]]` |	[] |		可选，单选时为`number[]`，多选时为`[number[]]`，选中项的value值集合 |  [基本用法](#基本用法) | |
+| multiple    | `boolean` |	false |	可选，级联器是否开启多选模式，开启后为 checkbox 选择 |  [基本用法](#多选模式) | |
+| disabled   | `boolean` | false | 可选，级联器是否禁用 |  [基本用法](#基本用法) | |
+
 
 ### 接口 & 类型定义
 
-- 
Gitee


From bc8681fabf8815d4e19ff91d0c941577f070c9a7 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Mon, 1 Nov 2021 17:22:45 +0800
Subject: [PATCH 08/18] refactor: refactor some code

---
 .../components/cascader-item/index.tsx        |  22 ++-
 .../components/cascader-item/use-class.ts     |   3 +-
 .../components/cascader-multiple/index.scss   |  29 ++++
 .../components/cascader-multiple/index.tsx    |  21 +++
 .../components/cascader-multiple/use-type.ts  |   6 +
 .../components/cascader-tag/index.scss        |  39 +++++
 .../components/cascader-tag/index.tsx         |  20 +++
 .../devui/cascader/hooks/use-cascader-item.ts |   2 +
 .../devui/cascader/src/cascader-types.ts      |   9 +-
 .../devui-vue/devui/cascader/src/cascader.tsx | 152 ++++++++++++------
 .../devui-vue/devui/cascader/src/readme.md    |  13 ++
 11 files changed, 254 insertions(+), 62 deletions(-)
 create mode 100644 packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss
 create mode 100644 packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
 create mode 100644 packages/devui-vue/devui/cascader/components/cascader-multiple/use-type.ts
 create mode 100644 packages/devui-vue/devui/cascader/components/cascader-tag/index.scss
 create mode 100644 packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
 create mode 100644 packages/devui-vue/devui/cascader/src/readme.md

diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
index 9203b7b4..461e4e1a 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
@@ -1,13 +1,12 @@
 import { useClassName } from './use-class'
 import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
 import { computed, ref } from 'vue'
-import { cloneDeep } from 'lodash-es'
 
 import './index.scss'
 export const DCascaderItem = (props: CascaderItemPropsType) => {
   // console.log('item index',props)
   const { cascaderItem, ulIndex, liIndex, cascaderItemNeedProps } = props
-  const { multiple, stopDefault } = cascaderItemNeedProps
+  const { multiple, stopDefault, valueCache, activeIndexs } = cascaderItemNeedProps
   const disbaled = computed(() => cascaderItem?.disabled) // 当前项是否被禁用
   const { getRootClass } = useClassName()
   const rootClasses = getRootClass(props)
@@ -15,17 +14,14 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
   // 触发联动更新
   const updateValues = () => {
     if (stopDefault.value) return
-    if (!multiple) {
-      // 单选模式：
-      // 删除当前联动级之后的所有级
-      cascaderItemNeedProps.value.splice(ulIndex, cascaderItemNeedProps.value.length - ulIndex)
-      // 更新当前active的value数组
-      cascaderItemNeedProps.value[ulIndex] = cascaderItem?.value as number
-      // console.log(cascaderItemNeedProps.value)
-    } else {
-      // 多选模式
-      console.log(cascaderItemNeedProps.value)
-    }
+    // 删除当前联动级之后的所有级
+    activeIndexs.splice(ulIndex, activeIndexs.length - ulIndex)
+    // 更新当前渲染视图的下标数组
+    activeIndexs[ulIndex] = liIndex
+    // 删除当前联动级之后的所有级
+    valueCache.splice(ulIndex, valueCache.length - ulIndex)
+    // 更新当前active的value数组
+    valueCache[ulIndex] = cascaderItem?.value as number
   }
   // 鼠标hover（多选模式下只能点击操作触发）
   const mouseEnter = () => {
diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts b/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
index b66972c8..374bfbe6 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
@@ -7,7 +7,8 @@
  export const useClassName= () => {
    const getRootClass = (props: CascaderItemPropsType): ComputedRef => {
     const itemProps = props?.cascaderItemNeedProps
-    const activeFlg = itemProps?.value[props.ulIndex] === props.cascaderItem?.value
+    console.log(itemProps.valueCache)
+    const activeFlg = itemProps?.valueCache[props.ulIndex] === props.cascaderItem?.value
     const disabledFlg = props.cascaderItem?.disabled
     return computed(() => ({
       'devui-cascader-li devui-dropdown-item': true,
diff --git a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss
new file mode 100644
index 00000000..848f54b3
--- /dev/null
+++ b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss
@@ -0,0 +1,29 @@
+@import '../../../style/theme/color';
+@import '../../../style/theme/corner';
+@import '../../../style/core/font';
+.devui-tags {
+  &-input {
+    flex: 1;
+    padding: 1px 20px 1px 4px;
+    border: 1px solid $devui-form-control-line;
+    border-radius: $devui-border-radius;
+    outline: none;
+    background-color: $devui-base-bg;
+    transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+  &-box {
+    width: 100%;
+    overflow: auto;
+    min-height: 28px;
+    max-height: 56px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  &-placeholder {
+    font-size: $devui-font-size;
+    line-height: 22px;
+    margin-left: 6px;
+    color: $devui-placeholder;
+  }
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
new file mode 100644
index 00000000..6dcd30f1
--- /dev/null
+++ b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
@@ -0,0 +1,21 @@
+/**
+ * 多选模式下的内容框
+ */
+import { DTag } from '../cascader-tag/'
+import { MultiplePropsType } from './use-type'
+import './index.scss'
+export const DMultipleBox = (props: MultiplePropsType) => {
+  console.log(props)
+  return (
+    <div class="devui-tags-input">
+      <div class="devui-tags-box">
+        { props.activeOptions.length > 0
+          ? props.activeOptions.map(item => {
+              return <DTag item={item}></DTag>
+            })
+          : <div class="devui-tags-placeholder">{ props.placeholder }</div>
+        }
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/components/cascader-multiple/use-type.ts b/packages/devui-vue/devui/cascader/components/cascader-multiple/use-type.ts
new file mode 100644
index 00000000..b734aab1
--- /dev/null
+++ b/packages/devui-vue/devui/cascader/components/cascader-multiple/use-type.ts
@@ -0,0 +1,6 @@
+import { CascaderItem } from '../../src/cascader-types'
+
+export interface MultiplePropsType {
+  activeOptions: CascaderItem[]
+  placeholder: string
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss b/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss
new file mode 100644
index 00000000..2e57f9bc
--- /dev/null
+++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss
@@ -0,0 +1,39 @@
+@import '../../../style/theme/color';
+@import '../../../style/theme/corner';
+@import '../../../style/core/font';
+.devui-tag {
+  margin: 2px 4px 2px 0;
+  display: inline-block;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 8px 0 8px;
+  background-color: $devui-label-bg;
+  border-radius: $devui-border-radius;
+  border-color: inherit;
+  border: 0 solid;
+  span {
+    min-height: 20px;
+    line-height: 20px;
+    font-size: $devui-font-size;
+    color: $devui-text;
+    position: relative;
+    cursor: default;
+  }
+  &__close {
+    margin-left: 12px;
+    font-size:  $devui-font-size;
+    cursor: pointer;
+    color: #fff;
+    width: 14px;
+    height: 14px;
+    line-height: 14px;
+    background-color: $devui-line;
+    border-radius: 50%;
+    display: inline-block;
+    text-align: center;
+    &:hover {
+      background-color: $devui-brand;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
new file mode 100644
index 00000000..47c26b0b
--- /dev/null
+++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
@@ -0,0 +1,20 @@
+/**
+ * 多选模式下的内容框中的选中tag
+ * tag组件还未开发完成，所以暂时使用自定义组件
+ */
+import { CascaderItem } from '../../src/cascader-types'
+import './index.scss'
+interface PropsType {
+  item: CascaderItem
+}
+export const DTag = (props: PropsType) => {
+  const { item } = props
+  return (
+    <div class="devui-tag">
+      <span>{ item?.label }</span>
+      <div class="devui-tag__close">
+        <d-icon name="close"></d-icon>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
index b1cea7c3..9bdaa540 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
@@ -10,8 +10,10 @@ export const useCascaderItem = (props: CascaderProps, stopDefault: Ref<boolean>)
     trigger: props.trigger,
     inputValueCache: ref(''),
     confirmInputValueFlg: ref(false), // 用于监听点击确定时输出选择内容
+    valueCache: reactive(cloneDeep(props.value)), // 操作时缓存选中的值
     value: reactive(cloneDeep(props.value)), // 每级的value
     multiple: props.multiple,
+    activeIndexs: reactive<number[]>([]), // 维护用于视图更新的选中下标
     stopDefault,
   }
   return {
diff --git a/packages/devui-vue/devui/cascader/src/cascader-types.ts b/packages/devui-vue/devui/cascader/src/cascader-types.ts
index bd099bb4..dbca0481 100644
--- a/packages/devui-vue/devui/cascader/src/cascader-types.ts
+++ b/packages/devui-vue/devui/cascader/src/cascader-types.ts
@@ -79,8 +79,11 @@ export const cascaderProps = {
   placeholder: {
     type: String,
     default: ''
-  }
-
+  },
+  change: {
+    type: Function as PropType<(v: CascaderValueType, k: CascaderItem[]) => void>,
+    default: undefined
+  },
 } as const
 
 export type CascaderProps = ExtractPropTypes<typeof cascaderProps>
@@ -102,11 +105,13 @@ export interface OptionsCallback {
 type cascaderItemExtendsProps = 'trigger'
 export type PickCascader = Pick<CascaderProps, cascaderItemExtendsProps>
 export interface CascaderItemNeedType extends PickCascader {
+  valueCache: CascaderValueType
   value: CascaderValueType
   inputValueCache: Ref<string>
   confirmInputValueFlg: Ref<boolean>
   multiple: boolean
   stopDefault: Ref<boolean>
+  activeIndexs: number[]
 }
 export interface UseCascaderItemCallback {
   cascaderItemNeedProps: CascaderItemNeedType
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index a648e44d..35af1259 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -1,10 +1,11 @@
-import { defineComponent, ref, reactive, watch, toRef } from 'vue'
+import { defineComponent, ref, reactive, watch, toRef, Ref } from 'vue'
 import { cascaderProps, CascaderItem, CascaderProps, CascaderValueType } from './cascader-types'
 import { getRootClass } from '../hooks/use-cascader-class'
 import { popupHandles } from '../hooks/use-cascader-popup'
 import DCascaderList from '../components/cascader-list'
 // import { optionsHandles } from '../hooks/use-cascader-options'
 import { useCascaderItem } from '../hooks/use-cascader-item'
+import { DMultipleBox } from '../components/cascader-multiple/index' 
 import { cloneDeep } from 'lodash-es'
 import './cascader.scss'
 // import { UnwrapNestedRefs } from '@vue/reactivity'
@@ -17,11 +18,12 @@ export default defineComponent({
     const cascaderOptions = reactive<[CascaderItem[]]>(cloneDeep([ props?.options ]))
     const multiple = toRef(props, 'multiple')
     const inputValue = ref('')
-    let initIptValue = props.value.length > 0 ? true : false
+    const multipleActiveArr = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
+    // let initIptValue = props.value.length > 0 ? true : false // 有value默认值时，初始化输出内容
     const position = reactive({
-      originX: 'left', 
-      originY: 'bottom', 
-      overlayX: 'left', 
+      originX: 'left',
+      originY: 'bottom',
+      overlayX: 'left',
       overlayY: 'top'
     } as const)
     // popup弹出层
@@ -31,14 +33,39 @@ export default defineComponent({
     // 传递给cascaderItem的props
     const { cascaderItemNeedProps } = useCascaderItem(props, stopDefault)
     /**
-     * 
-     * @param value value数组
+     * 控制视图更新
+     * 注意视图更新不区分单选或者多选
+     * @param activeIndexs 视图展示下标集合
      * @param currentOption 选中的某项
-     * @param index 数组项
+     * @param index value的下标，起始为0
+     */
+    const updateCascaderView = (value: CascaderValueType, currentOption: CascaderItem[], index: number) => {
+      if (index === value.length) return
+      const i = value[index] as number
+      // 当前的子级
+      const current = currentOption[i]
+      const children = current?.children
+      // getInputValue(current.label, children)
+      if (children?.length > 0) {
+        // 为下一级增添数据
+        cascaderOptions[index + 1] = children
+        // 递归添加
+        updateCascaderView(value, children, index + 1)
+      } else {
+        // 当最新的ul(级)没有下一级时删除之前选中ul的数据
+        cascaderOptions.splice(index + 1, cascaderOptions.length - 1)
+      }
+    }
+    /**
+     * 选中项输出
+     * 需要区分单选或多选模式
+     * @param value 选中值集合
+     * @param currentOption 激活的某项
+     * @param index value的下标，起始为0
      */
-    const getCascaderLoop = (value: CascaderValueType, currentOption: CascaderItem[], index: number) => {
-      // 区分单选多选模式
+    const updateCascaderValue = (value: CascaderValueType, currentOption: CascaderItem[], index: number) => {
       if (!multiple.value) {
+        // 单选模式
         if (index === value.length) return
         const i = value[index] as number
         // 当前的子级
@@ -46,32 +73,23 @@ export default defineComponent({
         const children = current?.children
         getInputValue(current.label, children)
         if (children?.length > 0) {
-          // 为下一级增添数据
-          cascaderOptions[index + 1] = children
-          // 递归添加
-          getCascaderLoop(value, children, index + 1)
-        } else {
-          // 当最新的ul(级)没有下一级时删除之前选中ul的数据
-          cascaderOptions.splice(index + 1, cascaderOptions.length - 1)
+          updateCascaderValue(value, children, index + 1)
         }
       } else {
         // 多选模式
-        // console.log('currentOption', currentOption)
         value.forEach(singleValues => {
-          console.log('singleValues', singleValues)
           getMultipleCascaderItem(currentOption, singleValues, index)
         })
       }
     }
-
     /**
-     * 
-     * 筛选每列中选中的value
+     * 根据value筛选每列中选中item
      */
     const getCurrentOption = (currentOption: CascaderItem[], i: number) => {
       return currentOption.filter(item => item?.value === i)[0]
     }
     /**
+     * 下拉框中输出内容
      * 需要判断是否是多选
      * 需要判断单选模式下是否showPath
      * @param label 当前current的内容
@@ -84,8 +102,30 @@ export default defineComponent({
         cascaderItemNeedProps.inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
       }
     }
-    const getMultipleIptValue = () => {
 
+    /**
+     * 多选模式下
+     * 添加选中项
+     * @param arr 当前选中的数组集合
+     * @param singleItem 当前选中项
+     * 
+     */
+    const addMultipleIptValue = (arr: CascaderItem[], singleItem: CascaderItem) => {
+      arr.push(singleItem)
+    }
+    /**
+     * 多选模式下
+     * 初始化选中项，将选中的数组集合置为空
+     * @param arr 当前选中的数组集合
+     */
+    const initMultipleIptValue = (arr: CascaderItem[]) => {
+      arr.splice(0, arr.length)
+    }
+    /**
+     * 单选模式初始化
+     */
+    const initSingleIptValue = (inputValueCache: Ref<string>) => {
+      inputValueCache.value = ''
     }
     /**
      * @param currentOption 选中的某项
@@ -93,60 +133,80 @@ export default defineComponent({
      * @param index cascaderUlValues数组的起始项，最开始为0
      */
     const getMultipleCascaderItem = (currentOption: CascaderItem[], cascaderUlValues: number[], index: number) => {
-      console.log('currentOption', currentOption, cascaderUlValues[index], index)
       let nextOption = null
+      // 根据value筛选出当前children中被选中的项
       for (let i = 0; i < currentOption.length; i++) {
         if (currentOption[i]?.value === cascaderUlValues[index]) {
           nextOption = currentOption[i]
           break
         }
       }
-      console.log(nextOption?.label)
       if (nextOption?.children?.length > 0) {
+        // 递归获取选中节点
         index += 1
         getMultipleCascaderItem(nextOption.children, cascaderUlValues, index)
+      } else {
+        // 没有子节点了则说明已经是最终节点
+        addMultipleIptValue(multipleActiveArr, nextOption)
       }
     }
-    // const initMultipleActiveItem = ()
     /**
      * 触发input内容输出监听
      */
-    const triggerUpdateIptValue = () => {
-      cascaderItemNeedProps.confirmInputValueFlg.value = !cascaderItemNeedProps.confirmInputValueFlg.value
-    }
+    // const triggerUpdateIptValue = () => {
+    //   cascaderItemNeedProps.confirmInputValueFlg.value = !cascaderItemNeedProps.confirmInputValueFlg.value
+    // }
     /**
      * 监听点击最终的节点输出内容
      */
      watch(() => cascaderItemNeedProps.confirmInputValueFlg.value, () => {
-      inputValue.value = cascaderItemNeedProps.inputValueCache.value
+      // 单选和多选模式初始化
+      multiple.value
+        ? initMultipleIptValue(multipleActiveArr)
+        : initSingleIptValue(cascaderItemNeedProps.inputValueCache)
+      // 输出确认的选中值
+      cascaderItemNeedProps.value = reactive(cloneDeep(cascaderItemNeedProps.valueCache))
       menuShow.value = false
       // 点击确定过后禁止再次选中
       updateStopDefaultType()
+       // 更新值
+      updateCascaderValue(cascaderItemNeedProps.value, props?.options, 0)
+      inputValue.value = cascaderItemNeedProps.inputValueCache.value
+    }, {
+      immediate: true
+    })
+    /**
+     * 监听视图更新
+     */
+    watch(cascaderItemNeedProps.activeIndexs, val => {
+      updateCascaderView(val, props?.options, 0)
     })
     /**
      * 监听value值的改变
-     * 改变cascaderOptions弹窗内容
+     * 改变cascaderOptions弹出层内容
      * 改变展示值
      */
-    watch(cascaderItemNeedProps.value, (val) => {
-      cascaderItemNeedProps.inputValueCache.value = ''
-      getCascaderLoop(val, props?.options, 0)
-      if (initIptValue) { // 因为初始化了value，所以默认输出值
-        triggerUpdateIptValue()
-        initIptValue = false // 只需要初始化一次，之后不再执行
-      }
-    }, {
-      immediate: true
-    })
+    // watch(cascaderItemNeedProps.value, (val) => {
+    //   // cascaderItemNeedProps.inputValueCache.value = ''
+    //   // if (initIptValue) { // 因为初始化了value，所以默认输出值
+    //   //   triggerUpdateIptValue()
+    //   //   initIptValue = false // 只需要初始化一次，之后不再执行
+    //   // }
+    // }, {
+    //   immediate: true
+    // })
 
     return () => (
       <>
         <div class={rootClasses.value} onClick={openPopup} ref={origin} {...ctx.attrs}>
-          <d-input
-            disabled={props.disabled}
-            placeholder={props.placeholder}
-            value={inputValue.value}
-          ></d-input>
+          { multiple.value
+            ? <DMultipleBox placeholder={props.placeholder} activeOptions={multipleActiveArr}></DMultipleBox>
+            : <d-input
+                disabled={props.disabled}
+                placeholder={props.placeholder}
+                value={inputValue.value}
+              ></d-input>
+          }
           <div class="devui-cascader__icon devui-drop-icon-animation">
             <d-icon name="select-arrow" size="12px"></d-icon>
           </div>
diff --git a/packages/devui-vue/devui/cascader/src/readme.md b/packages/devui-vue/devui/cascader/src/readme.md
new file mode 100644
index 00000000..70b71288
--- /dev/null
+++ b/packages/devui-vue/devui/cascader/src/readme.md
@@ -0,0 +1,13 @@
+# 组件组成
+cacader组件分为：
+- `cascader.tsx`主要文件，渲染主视图
+- `cascader-multiple.tsx`多选模式下的内容展示container，单选模式为input组件
+- `cascader-list.tsx`渲染列
+- `cascader-item.tsx`渲染列中的项
+
+# 组件设计
+以下属性在`hooks/use-cascader-item.ts`中
+- `activeIndexs`：每列中的选中下标，负责弹窗交互视图更新
+- `value`：选中的项的value值集合，也可以通过props方式传入
+
+**activeIndex** 负责视图更新，也就是hover或者click每项时的交互行为，**value**负责输出选中值。通过`watch`监听这两个值的改变驱动视图和值输出
-- 
Gitee


From c62e41a1ea89174c691386b1a2468ae3f606f3bf Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Mon, 1 Nov 2021 21:58:22 +0800
Subject: [PATCH 09/18] refactor: refactor some code

---
 .../cascader-item/cascader-item-types.ts      |  8 +-
 .../components/cascader-item/use-class.ts     | 20 +++--
 .../components/cascader-multiple/index.tsx    |  1 -
 .../cascader/hooks/use-cascader-multiple.ts   | 77 +++++++++++++++++++
 .../cascader/hooks/use-cascader-single.ts     |  0
 .../devui/cascader/src/cascader-types.ts      |  8 ++
 .../devui-vue/devui/cascader/src/cascader.tsx | 76 +++---------------
 7 files changed, 110 insertions(+), 80 deletions(-)
 create mode 100644 packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
 create mode 100644 packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts

diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts b/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts
index 96d19f97..8688dab6 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts
@@ -1,3 +1,5 @@
-export const cascaderItemProps = {
-  
-}
\ No newline at end of file
+import { ComputedRef } from 'vue'
+import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
+export interface UseClassNameType {
+  getRootClass: (j: CascaderItemPropsType) => ComputedRef
+}
diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts b/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
index 374bfbe6..6aa44a57 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
@@ -1,13 +1,12 @@
 /**
  * 定义组件class
  */
- import { computed, ComputedRef } from 'vue';
- import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
-
- export const useClassName= () => {
-   const getRootClass = (props: CascaderItemPropsType): ComputedRef => {
+import { computed, ComputedRef } from 'vue';
+import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
+import { UseClassNameType } from './cascader-item-types'
+export const useClassName = (): UseClassNameType => {
+  const getRootClass = (props: CascaderItemPropsType): ComputedRef => {
     const itemProps = props?.cascaderItemNeedProps
-    console.log(itemProps.valueCache)
     const activeFlg = itemProps?.valueCache[props.ulIndex] === props.cascaderItem?.value
     const disabledFlg = props.cascaderItem?.disabled
     return computed(() => ({
@@ -15,9 +14,8 @@
       'devui-leaf-active': activeFlg,
       'disabled': disabledFlg
     }))
-   }
-   return {
+  }
+  return {
     getRootClass
-   }
- }
- 
\ No newline at end of file
+  }
+}
diff --git a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
index 6dcd30f1..51d053d9 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
@@ -5,7 +5,6 @@ import { DTag } from '../cascader-tag/'
 import { MultiplePropsType } from './use-type'
 import './index.scss'
 export const DMultipleBox = (props: MultiplePropsType) => {
-  console.log(props)
   return (
     <div class="devui-tags-input">
       <div class="devui-tags-box">
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
new file mode 100644
index 00000000..64d75986
--- /dev/null
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
@@ -0,0 +1,77 @@
+/**
+ * 多选模式下的一些函数
+ */
+import { CascaderItem, CascaderValueType, UseCascaderMultipleCallback } from '../src/cascader-types'
+import { reactive } from 'vue'
+const multipleActiveArr = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
+export const useMultiple = (): UseCascaderMultipleCallback => {
+  /**
+   * 添加选中项
+   * @param arr 当前选中的数组集合
+   * @param singleItem 当前选中项
+   * 
+   */
+  const addMultipleIptValue = (arr: CascaderItem[], singleItem: CascaderItem) => {
+    arr.push(singleItem)
+  }
+  /**
+   * 初始化选中项，将选中的数组集合置为空
+   * @param arr 当前选中的数组集合
+   */
+  const initMultipleIptValue = (arr: CascaderItem[]) => {
+    arr.splice(0, arr.length)
+  }
+  /**
+   * 多选模式下获取选中的节点
+   * @param currentOption 选中的某项
+   * @param cascaderUlValues 多选集合中的某一个集合
+   * @param index cascaderUlValues数组的起始项，最开始为0
+   */
+  const getMultipleCascaderItem = (currentOption: CascaderItem[], cascaderUlValues: number[], index: number) => {
+    let nextOption = null
+    // 根据value筛选出当前children中被选中的项
+    for (let i = 0; i < currentOption.length; i++) {
+      if (currentOption[i]?.value === cascaderUlValues[index]) {
+        nextOption = currentOption[i]
+        break
+      }
+    }
+    if (nextOption?.children?.length > 0) {
+      // 递归获取选中节点
+      index += 1
+      getMultipleCascaderItem(nextOption.children, cascaderUlValues, index)
+    } else {
+      // 没有子节点了则说明已经是最终节点
+      addMultipleIptValue(multipleActiveArr, nextOption)
+    }
+  }
+  /**
+   * 多选模式下当有默认选中值时，初始化视图选中状态
+   * 通过value集合获取下标集合
+   * @param values 默认选中的value集合
+   * @param currentOption 当前列
+   * @param index values数组的起始项，最开始为0
+   * @param activeIndexs 渲染视图所需要的下标集合
+   */
+  const initActiveIndexs = (values: CascaderValueType, currentOption: CascaderItem[], index: number, activeIndexs: number[]) => {
+    let nextOption = null
+    for (let i = 0; i < currentOption.length; i++) {
+      if (currentOption[i]?.value === values[index]) {
+        nextOption = currentOption[i]?.children
+        activeIndexs[index] = i
+        break
+      }
+    }
+    if (index < values.length - 1 && nextOption) {
+      index += 1
+      initActiveIndexs(values, nextOption, index, activeIndexs)
+    }
+  }
+  return {
+    multipleActiveArr,
+    addMultipleIptValue,
+    initMultipleIptValue,
+    getMultipleCascaderItem,
+    initActiveIndexs
+  }
+}
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/devui-vue/devui/cascader/src/cascader-types.ts b/packages/devui-vue/devui/cascader/src/cascader-types.ts
index dbca0481..b57cc01d 100644
--- a/packages/devui-vue/devui/cascader/src/cascader-types.ts
+++ b/packages/devui-vue/devui/cascader/src/cascader-types.ts
@@ -116,3 +116,11 @@ export interface CascaderItemNeedType extends PickCascader {
 export interface UseCascaderItemCallback {
   cascaderItemNeedProps: CascaderItemNeedType
 }
+
+export interface UseCascaderMultipleCallback {
+  multipleActiveArr: UnwrapNestedRefs<CascaderItem[]>
+  addMultipleIptValue: (a: CascaderItem[], b: CascaderItem) => void
+  initMultipleIptValue: (a: CascaderItem[]) => void
+  getMultipleCascaderItem: (a: CascaderItem[], b: number[], c: number) => void
+  initActiveIndexs: (a: CascaderValueType, b: CascaderItem[], c: number, d: number[]) => void
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index 35af1259..1e7c476a 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -6,6 +6,7 @@ import DCascaderList from '../components/cascader-list'
 // import { optionsHandles } from '../hooks/use-cascader-options'
 import { useCascaderItem } from '../hooks/use-cascader-item'
 import { DMultipleBox } from '../components/cascader-multiple/index' 
+import { useMultiple } from '../hooks/use-cascader-multiple'
 import { cloneDeep } from 'lodash-es'
 import './cascader.scss'
 // import { UnwrapNestedRefs } from '@vue/reactivity'
@@ -18,8 +19,9 @@ export default defineComponent({
     const cascaderOptions = reactive<[CascaderItem[]]>(cloneDeep([ props?.options ]))
     const multiple = toRef(props, 'multiple')
     const inputValue = ref('')
-    const multipleActiveArr = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
-    // let initIptValue = props.value.length > 0 ? true : false // 有value默认值时，初始化输出内容
+    const { multipleActiveArr, initMultipleIptValue, getMultipleCascaderItem, initActiveIndexs } = useMultiple()
+    // const multipleActiveArr = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
+    let initIptValue = props.value.length > 0 ? true : false // 有value默认值时，初始化输出内容
     const position = reactive({
       originX: 'left',
       originY: 'bottom',
@@ -45,7 +47,6 @@ export default defineComponent({
       // 当前的子级
       const current = currentOption[i]
       const children = current?.children
-      // getInputValue(current.label, children)
       if (children?.length > 0) {
         // 为下一级增添数据
         cascaderOptions[index + 1] = children
@@ -102,60 +103,13 @@ export default defineComponent({
         cascaderItemNeedProps.inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
       }
     }
-
-    /**
-     * 多选模式下
-     * 添加选中项
-     * @param arr 当前选中的数组集合
-     * @param singleItem 当前选中项
-     * 
-     */
-    const addMultipleIptValue = (arr: CascaderItem[], singleItem: CascaderItem) => {
-      arr.push(singleItem)
-    }
-    /**
-     * 多选模式下
-     * 初始化选中项，将选中的数组集合置为空
-     * @param arr 当前选中的数组集合
-     */
-    const initMultipleIptValue = (arr: CascaderItem[]) => {
-      arr.splice(0, arr.length)
-    }
+    
     /**
      * 单选模式初始化
      */
     const initSingleIptValue = (inputValueCache: Ref<string>) => {
       inputValueCache.value = ''
     }
-    /**
-     * @param currentOption 选中的某项
-     * @param cascaderUlValues 多选集合中的某一个集合
-     * @param index cascaderUlValues数组的起始项，最开始为0
-     */
-    const getMultipleCascaderItem = (currentOption: CascaderItem[], cascaderUlValues: number[], index: number) => {
-      let nextOption = null
-      // 根据value筛选出当前children中被选中的项
-      for (let i = 0; i < currentOption.length; i++) {
-        if (currentOption[i]?.value === cascaderUlValues[index]) {
-          nextOption = currentOption[i]
-          break
-        }
-      }
-      if (nextOption?.children?.length > 0) {
-        // 递归获取选中节点
-        index += 1
-        getMultipleCascaderItem(nextOption.children, cascaderUlValues, index)
-      } else {
-        // 没有子节点了则说明已经是最终节点
-        addMultipleIptValue(multipleActiveArr, nextOption)
-      }
-    }
-    /**
-     * 触发input内容输出监听
-     */
-    // const triggerUpdateIptValue = () => {
-    //   cascaderItemNeedProps.confirmInputValueFlg.value = !cascaderItemNeedProps.confirmInputValueFlg.value
-    // }
     /**
      * 监听点击最终的节点输出内容
      */
@@ -172,6 +126,10 @@ export default defineComponent({
        // 更新值
       updateCascaderValue(cascaderItemNeedProps.value, props?.options, 0)
       inputValue.value = cascaderItemNeedProps.inputValueCache.value
+      if (initIptValue) { // 因为初始化了value，所以默认回显视图的选中态
+        initActiveIndexs(props.value, props?.options, 0, cascaderItemNeedProps.activeIndexs)
+        initIptValue = false // 只需要初始化一次，之后不再执行
+      }
     }, {
       immediate: true
     })
@@ -180,21 +138,9 @@ export default defineComponent({
      */
     watch(cascaderItemNeedProps.activeIndexs, val => {
       updateCascaderView(val, props?.options, 0)
+    }, {
+      immediate: true
     })
-    /**
-     * 监听value值的改变
-     * 改变cascaderOptions弹出层内容
-     * 改变展示值
-     */
-    // watch(cascaderItemNeedProps.value, (val) => {
-    //   // cascaderItemNeedProps.inputValueCache.value = ''
-    //   // if (initIptValue) { // 因为初始化了value，所以默认输出值
-    //   //   triggerUpdateIptValue()
-    //   //   initIptValue = false // 只需要初始化一次，之后不再执行
-    //   // }
-    // }, {
-    //   immediate: true
-    // })
 
     return () => (
       <>
-- 
Gitee


From 2a5a7cf9e0bb62e0d01b2bf6839be3c8d475c1ae Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Tue, 2 Nov 2021 17:31:58 +0800
Subject: [PATCH 10/18] feat: add character

---
 .../components/cascader-item/index.tsx        | 28 +++++++++-----
 .../devui/cascader/hooks/use-cascader-item.ts | 22 ++++++++++-
 .../cascader/hooks/use-cascader-multiple.ts   | 13 ++++++-
 .../cascader/hooks/use-cascader-single.ts     | 24 ++++++++++++
 .../devui/cascader/src/cascader-types.ts      |  6 +++
 .../devui-vue/devui/cascader/src/cascader.tsx | 37 ++++---------------
 6 files changed, 88 insertions(+), 42 deletions(-)

diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
index 461e4e1a..771f590e 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
@@ -1,16 +1,20 @@
 import { useClassName } from './use-class'
 import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
 import { computed, ref } from 'vue'
-
+import { useSingle } from '../../hooks/use-cascader-single'
+import { useMultiple } from '../../hooks/use-cascader-multiple'
 import './index.scss'
+import checkbox from '../../../checkbox/src/checkbox'
 export const DCascaderItem = (props: CascaderItemPropsType) => {
   // console.log('item index',props)
   const { cascaderItem, ulIndex, liIndex, cascaderItemNeedProps } = props
-  const { multiple, stopDefault, valueCache, activeIndexs } = cascaderItemNeedProps
-  const disbaled = computed(() => cascaderItem?.disabled) // 当前项是否被禁用
+  const { multiple, stopDefault, valueCache, activeIndexs, trigger, confirmInputValueFlg } = cascaderItemNeedProps
+  const triggerHover = trigger === 'hover'
+  const { singleChoose } = useSingle()
+  const { clickCheckbox } = useMultiple()
   const { getRootClass } = useClassName()
+  const disbaled = computed(() => cascaderItem?.disabled) // 当前项是否被禁用
   const rootClasses = getRootClass(props)
-  const triggerHover = cascaderItemNeedProps.trigger === 'hover'
   // 触发联动更新
   const updateValues = () => {
     if (stopDefault.value) return
@@ -18,10 +22,11 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
     activeIndexs.splice(ulIndex, activeIndexs.length - ulIndex)
     // 更新当前渲染视图的下标数组
     activeIndexs[ulIndex] = liIndex
-    // 删除当前联动级之后的所有级
-    valueCache.splice(ulIndex, valueCache.length - ulIndex)
-    // 更新当前active的value数组
-    valueCache[ulIndex] = cascaderItem?.value as number
+    if (multiple) {
+      // clickCheckbox()
+    } else {
+      singleChoose(ulIndex, valueCache, cascaderItem)
+    }
   }
   // 鼠标hover（多选模式下只能点击操作触发）
   const mouseEnter = () => {
@@ -36,14 +41,17 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
     if (disbaled.value) return
     updateValues()
     if (!cascaderItem.children || cascaderItem?.children?.length === 0) {
-      cascaderItemNeedProps.confirmInputValueFlg.value = !cascaderItemNeedProps.confirmInputValueFlg.value
+      confirmInputValueFlg.value = !confirmInputValueFlg.value
     }
   }
+  const checkboxChange = (e) => {
+    console.log(123)
+  }
   return (
     <li class={rootClasses.value} {...mouseenter} onClick={mouseClick}>
       { multiple && 
         <div class="cascader-li__checkbox">
-          <d-checkbox/>
+          <d-checkbox checked={cascaderItem?.checked} halfchecked={cascaderItem?.halfchecked} onChange={checkboxChange}/>
         </div>
       }
       { cascaderItem.icon &&
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
index 9bdaa540..ff32d704 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
@@ -1,11 +1,14 @@
 /**
  * 处理cascader-item中需要的参数
  */
-import { CascaderProps, UseCascaderItemCallback } from '../src/cascader-types'
+import { CascaderProps, UseCascaderItemCallback, CascaderItem } from '../src/cascader-types'
 import { ref, reactive, Ref } from 'vue'
 import { cloneDeep } from 'lodash-es'
 
 export const useCascaderItem = (props: CascaderProps, stopDefault: Ref<boolean>): UseCascaderItemCallback => {
+  /**
+   * 传递给cascader-item/index.ts组件的数据
+   */
   const cascaderItemNeedProps = {
     trigger: props.trigger,
     inputValueCache: ref(''),
@@ -16,7 +19,22 @@ export const useCascaderItem = (props: CascaderProps, stopDefault: Ref<boolean>)
     activeIndexs: reactive<number[]>([]), // 维护用于视图更新的选中下标
     stopDefault,
   }
+  /**
+   * 下拉框中输出内容
+   * 需要判断是否是多选
+   * 需要判断单选模式下是否showPath
+   * @param label 当前current的内容
+   * @param arr 当前选中项current的children数组
+   */
+    const getInputValue = (label: string, arr?: CascaderItem[]) => {
+      if (!props.showPath) {
+        cascaderItemNeedProps.inputValueCache.value = label
+      } else {
+        cascaderItemNeedProps.inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
+      }
+    }
   return {
-    cascaderItemNeedProps
+    cascaderItemNeedProps,
+    getInputValue
   }
 }
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
index 64d75986..f01ab02b 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
@@ -2,7 +2,7 @@
  * 多选模式下的一些函数
  */
 import { CascaderItem, CascaderValueType, UseCascaderMultipleCallback } from '../src/cascader-types'
-import { reactive } from 'vue'
+import { reactive, nextTick } from 'vue'
 const multipleActiveArr = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
 export const useMultiple = (): UseCascaderMultipleCallback => {
   /**
@@ -36,6 +36,8 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
         break
       }
     }
+    nextOption.checked = true
+    console.log(nextOption, 'nextOption')
     if (nextOption?.children?.length > 0) {
       // 递归获取选中节点
       index += 1
@@ -67,10 +69,19 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
       initActiveIndexs(values, nextOption, index, activeIndexs)
     }
   }
+
+  /**
+   * 多选模式点击checkbox
+   */
+  const clickCheckbox = (event: Event): void => {
+    // 如果是半选状态，更新为false，其他状态则更新为与checked相反
+
+  }
   return {
     multipleActiveArr,
     addMultipleIptValue,
     initMultipleIptValue,
+    clickCheckbox,
     getMultipleCascaderItem,
     initActiveIndexs
   }
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts
index e69de29b..8039ca69 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts
@@ -0,0 +1,24 @@
+import { Ref } from 'vue'
+import { CascaderValueType, CascaderItem } from '../src/cascader-types'
+export const useSingle = () => {
+  /**
+   * 单选模式初始化
+   */
+  const initSingleIptValue = (inputValueCache: Ref<string>) => {
+    inputValueCache.value = ''
+  }
+
+  /**
+   * 单选模式选中
+   */
+  const singleChoose = (ulIndex: number, valueCache: CascaderValueType, cascaderItem: CascaderItem) => {
+      // 删除当前联动级之后的所有级
+      valueCache.splice(ulIndex, valueCache.length - ulIndex)
+      // 更新当前active的value数组
+      valueCache[ulIndex] = cascaderItem?.value as number
+  }
+  return {
+    initSingleIptValue,
+    singleChoose
+  }
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/src/cascader-types.ts b/packages/devui-vue/devui/cascader/src/cascader-types.ts
index b57cc01d..969b3a98 100644
--- a/packages/devui-vue/devui/cascader/src/cascader-types.ts
+++ b/packages/devui-vue/devui/cascader/src/cascader-types.ts
@@ -8,7 +8,11 @@ export interface CascaderItem {
   value: number | string
   isLeaf?: boolean
   children?: CascaderItem[]
+  checked?: boolean
+  halfChecked?: boolean
   disabled?: boolean
+  active?: boolean
+  _loading?: boolean
   icon?: string
   // 用户可以传入自定义属性，并在dropDownItemTemplate中使用
   [prop: string]: any
@@ -115,6 +119,7 @@ export interface CascaderItemNeedType extends PickCascader {
 }
 export interface UseCascaderItemCallback {
   cascaderItemNeedProps: CascaderItemNeedType
+  getInputValue: (a: string, b?: CascaderItem[]) => void
 }
 
 export interface UseCascaderMultipleCallback {
@@ -122,5 +127,6 @@ export interface UseCascaderMultipleCallback {
   addMultipleIptValue: (a: CascaderItem[], b: CascaderItem) => void
   initMultipleIptValue: (a: CascaderItem[]) => void
   getMultipleCascaderItem: (a: CascaderItem[], b: number[], c: number) => void
+  clickCheckbox: () => void
   initActiveIndexs: (a: CascaderValueType, b: CascaderItem[], c: number, d: number[]) => void
 }
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index 1e7c476a..8eecf21f 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -7,6 +7,7 @@ import DCascaderList from '../components/cascader-list'
 import { useCascaderItem } from '../hooks/use-cascader-item'
 import { DMultipleBox } from '../components/cascader-multiple/index' 
 import { useMultiple } from '../hooks/use-cascader-multiple'
+import { useSingle } from '../hooks/use-cascader-single'
 import { cloneDeep } from 'lodash-es'
 import './cascader.scss'
 // import { UnwrapNestedRefs } from '@vue/reactivity'
@@ -20,6 +21,7 @@ export default defineComponent({
     const multiple = toRef(props, 'multiple')
     const inputValue = ref('')
     const { multipleActiveArr, initMultipleIptValue, getMultipleCascaderItem, initActiveIndexs } = useMultiple()
+    const { initSingleIptValue } = useSingle()
     // const multipleActiveArr = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
     let initIptValue = props.value.length > 0 ? true : false // 有value默认值时，初始化输出内容
     const position = reactive({
@@ -33,7 +35,7 @@ export default defineComponent({
     // 配置class
     const rootClasses = getRootClass(props, menuShow)
     // 传递给cascaderItem的props
-    const { cascaderItemNeedProps } = useCascaderItem(props, stopDefault)
+    const { cascaderItemNeedProps, getInputValue } = useCascaderItem(props, stopDefault)
     /**
      * 控制视图更新
      * 注意视图更新不区分单选或者多选
@@ -90,30 +92,15 @@ export default defineComponent({
       return currentOption.filter(item => item?.value === i)[0]
     }
     /**
-     * 下拉框中输出内容
-     * 需要判断是否是多选
-     * 需要判断单选模式下是否showPath
-     * @param label 当前current的内容
-     * @param arr 当前选中项current的children数组
-     */
-    const getInputValue = (label: string, arr?: CascaderItem[]) => {
-      if (!props.showPath) {
-        cascaderItemNeedProps.inputValueCache.value = label
-      } else {
-        cascaderItemNeedProps.inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
-      }
-    }
-    
-    /**
-     * 单选模式初始化
+     * 监听视图更新
      */
-    const initSingleIptValue = (inputValueCache: Ref<string>) => {
-      inputValueCache.value = ''
-    }
+    watch(cascaderItemNeedProps.activeIndexs, val => {
+      updateCascaderView(val, props?.options, 0)
+    })
     /**
      * 监听点击最终的节点输出内容
      */
-     watch(() => cascaderItemNeedProps.confirmInputValueFlg.value, () => {
+    watch(() => cascaderItemNeedProps.confirmInputValueFlg.value, () => {
       // 单选和多选模式初始化
       multiple.value
         ? initMultipleIptValue(multipleActiveArr)
@@ -133,14 +120,6 @@ export default defineComponent({
     }, {
       immediate: true
     })
-    /**
-     * 监听视图更新
-     */
-    watch(cascaderItemNeedProps.activeIndexs, val => {
-      updateCascaderView(val, props?.options, 0)
-    }, {
-      immediate: true
-    })
 
     return () => (
       <>
-- 
Gitee


From 821394711c989ba76e0409986cdea9ee6b594f6b Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Wed, 3 Nov 2021 17:18:47 +0800
Subject: [PATCH 11/18] feat: add character

---
 .../components/cascader-item/index.scss       |   9 +-
 .../components/cascader-item/index.tsx        |  44 +++---
 .../components/cascader-tag/index.tsx         |   9 +-
 .../cascader/hooks/use-cascader-multiple.ts   | 146 ++++++++++++++----
 .../devui/cascader/src/cascader-types.ts      |  17 +-
 .../devui-vue/devui/cascader/src/cascader.tsx |  25 +--
 6 files changed, 186 insertions(+), 64 deletions(-)

diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.scss b/packages/devui-vue/devui/cascader/components/cascader-item/index.scss
index 04f5f97b..f3368ead 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.scss
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.scss
@@ -9,13 +9,15 @@
     color: $devui-text;
     cursor: pointer;
     @include flex(flex-start);
-
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
-
+  .cascader-li__wraper {
+    flex: 1;
+    @include flex(flex-start);
+  }
   .dropdown-item-label {
     display: inline-block;
     flex: 1;
@@ -47,6 +49,9 @@
       margin-right: 4px;
       font-size: $devui-font-size-icon;
       color: $devui-text;
+      &.disabled {
+        color: $devui-disabled-text !important;
+      }
     }
   }
 }
diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
index 771f590e..6eac8002 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
@@ -4,14 +4,13 @@ import { computed, ref } from 'vue'
 import { useSingle } from '../../hooks/use-cascader-single'
 import { useMultiple } from '../../hooks/use-cascader-multiple'
 import './index.scss'
-import checkbox from '../../../checkbox/src/checkbox'
 export const DCascaderItem = (props: CascaderItemPropsType) => {
   // console.log('item index',props)
-  const { cascaderItem, ulIndex, liIndex, cascaderItemNeedProps } = props
+  const { cascaderItem, ulIndex, liIndex, cascaderItemNeedProps, cascaderOptions } = props
   const { multiple, stopDefault, valueCache, activeIndexs, trigger, confirmInputValueFlg } = cascaderItemNeedProps
   const triggerHover = trigger === 'hover'
   const { singleChoose } = useSingle()
-  const { clickCheckbox } = useMultiple()
+  const { updateCheckOptionStatus, getParentNode, updateParentNodeStatus } = useMultiple()
   const { getRootClass } = useClassName()
   const disbaled = computed(() => cascaderItem?.disabled) // 当前项是否被禁用
   const rootClasses = getRootClass(props)
@@ -22,9 +21,7 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
     activeIndexs.splice(ulIndex, activeIndexs.length - ulIndex)
     // 更新当前渲染视图的下标数组
     activeIndexs[ulIndex] = liIndex
-    if (multiple) {
-      // clickCheckbox()
-    } else {
+    if (!multiple) { // 单选点击选项就更新，多选是通过点击checkbox触发数据更新
       singleChoose(ulIndex, valueCache, cascaderItem)
     }
   }
@@ -40,31 +37,38 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
   const mouseClick = () => {
     if (disbaled.value) return
     updateValues()
-    if (!cascaderItem.children || cascaderItem?.children?.length === 0) {
+    if (!multiple && (!cascaderItem.children || cascaderItem?.children?.length === 0)) {
       confirmInputValueFlg.value = !confirmInputValueFlg.value
     }
   }
-  const checkboxChange = (e) => {
-    console.log(123)
+  const checkboxChange = () => {
+    updateCheckOptionStatus(cascaderItem, cascaderOptions, ulIndex)
+    // const parentNode = getParentNode(cascaderItem.value, cascaderOptions, ulIndex - 1)
+    // updateParentNodeStatus(parentNode, cascaderOptions, ulIndex - 1)
+    // if (!cascaderItem.children || cascaderItem?.children?.length === 0) {
+    //   confirmInputValueFlg.value = !confirmInputValueFlg.value
+    // }
   }
   return (
-    <li class={rootClasses.value} {...mouseenter} onClick={mouseClick}>
+    <li class={rootClasses.value}>
       { multiple && 
         <div class="cascader-li__checkbox">
-          <d-checkbox checked={cascaderItem?.checked} halfchecked={cascaderItem?.halfchecked} onChange={checkboxChange}/>
+          <d-checkbox checked={cascaderItem?.checked} disabled={cascaderItem.disabled} halfchecked={cascaderItem?.halfChecked} onChange={checkboxChange}/>
         </div>
       }
-      { cascaderItem.icon &&
-        <div class="cascader-li__icon">
-          <d-icon name={ cascaderItem.icon } size="inherit"></d-icon>
+      <div class="cascader-li__wraper" {...mouseenter} onClick={mouseClick}>
+        { cascaderItem.icon &&
+          <div class={'cascader-li__icon' + (cascaderItem.disabled ? ' disabled' : '')}>
+            <d-icon name={ cascaderItem.icon } size="inherit"></d-icon>
+          </div>
+        }
+        <div class="dropdown-item-label">
+          <span>{ cascaderItem.label }</span>
         </div>
-      }
-      <div class="dropdown-item-label">
-        <span>{ cascaderItem.label }</span>
+        {
+          cascaderItem?.children?.length > 0 && <d-icon name="chevron-right" size="16px" color="inherit"></d-icon>
+        }
       </div>
-      {
-        cascaderItem?.children?.length > 0 && <d-icon name="chevron-right" size="16px" color="inherit"></d-icon>
-      }
     </li>
   )
 }
diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
index 47c26b0b..c60211a8 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
@@ -3,16 +3,23 @@
  * tag组件还未开发完成，所以暂时使用自定义组件
  */
 import { CascaderItem } from '../../src/cascader-types'
+import { useMultiple } from '../../hooks/use-cascader-multiple'
 import './index.scss'
 interface PropsType {
   item: CascaderItem
 }
 export const DTag = (props: PropsType) => {
   const { item } = props
+  const { tagList, deleteTagList } = useMultiple()
+  const deleteCurrentTag = (e: Event) => {
+    console.log(11)
+    e.stopPropagation()
+    deleteTagList(tagList, item)
+  }
   return (
     <div class="devui-tag">
       <span>{ item?.label }</span>
-      <div class="devui-tag__close">
+      <div class="devui-tag__close" onClick={deleteCurrentTag}>
         <d-icon name="close"></d-icon>
       </div>
     </div>
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
index f01ab02b..02e07862 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
@@ -1,9 +1,9 @@
 /**
  * 多选模式下的一些函数
  */
-import { CascaderItem, CascaderValueType, UseCascaderMultipleCallback } from '../src/cascader-types'
-import { reactive, nextTick } from 'vue'
-const multipleActiveArr = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
+import { CascaderItem, CascaderValueType, CaascaderOptionsType, UseCascaderMultipleCallback, CheckedType } from '../src/cascader-types'
+import { reactive } from 'vue'
+const tagList = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
 export const useMultiple = (): UseCascaderMultipleCallback => {
   /**
    * 添加选中项
@@ -11,40 +11,47 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
    * @param singleItem 当前选中项
    * 
    */
-  const addMultipleIptValue = (arr: CascaderItem[], singleItem: CascaderItem) => {
+  const addTagList = (arr: CascaderItem[], singleItem: CascaderItem) => {
     arr.push(singleItem)
   }
+  /**
+   * 删除选中项
+   * @param arr 当前选中的数组集合
+   * @param singleItem 当前选中项
+   * 
+   */
+  const deleteTagList = (arr: CascaderItem[], singleItem: CascaderItem) => {
+    const i = arr.findIndex(item => item.value === singleItem.value)
+    arr.splice(i, 1)
+  }
   /**
    * 初始化选中项，将选中的数组集合置为空
    * @param arr 当前选中的数组集合
    */
-  const initMultipleIptValue = (arr: CascaderItem[]) => {
+  const initTagList = (arr: CascaderItem[]) => {
     arr.splice(0, arr.length)
   }
   /**
-   * 多选模式下获取选中的节点
+   * 获取选中的节点
    * @param currentOption 选中的某项
    * @param cascaderUlValues 多选集合中的某一个集合
    * @param index cascaderUlValues数组的起始项，最开始为0
    */
-  const getMultipleCascaderItem = (currentOption: CascaderItem[], cascaderUlValues: number[], index: number) => {
-    let nextOption = null
-    // 根据value筛选出当前children中被选中的项
-    for (let i = 0; i < currentOption.length; i++) {
-      if (currentOption[i]?.value === cascaderUlValues[index]) {
-        nextOption = currentOption[i]
-        break
-      }
-    }
-    nextOption.checked = true
-    console.log(nextOption, 'nextOption')
-    if (nextOption?.children?.length > 0) {
+  const getMultipleCascaderItem = (currentOption: CascaderItem[], cascaderUlValues: number[], index: number, cascaderOptions) => {
+    const node = currentOption.find(item => item.value === cascaderUlValues[index])
+    // node.checked = true
+    // console.log(ulIndex)
+    if (node?.children?.length > 0) {
       // 递归获取选中节点
       index += 1
-      getMultipleCascaderItem(nextOption.children, cascaderUlValues, index)
+      getMultipleCascaderItem(node.children, cascaderUlValues, index, cascaderOptions)
     } else {
       // 没有子节点了则说明已经是最终节点
-      addMultipleIptValue(multipleActiveArr, nextOption)
+      // console.log('node', node, cascaderOptions, index)
+      const ulIndex = cascaderUlValues.findIndex(item => item === node.value)
+      console.log('node', node, ulIndex)
+      updateCheckOptionStatus(node, cascaderOptions, ulIndex)
+      // addTagList(tagList, node)
     }
   }
   /**
@@ -73,16 +80,103 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
   /**
    * 多选模式点击checkbox
    */
-  const clickCheckbox = (event: Event): void => {
+  const updateCheckOptionStatus = (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number): void => {
     // 如果是半选状态，更新为false，其他状态则更新为与checked相反
+    // console.log(node, options, ulIndex)
+    if (node?.halfChecked) { // 更新半选状态
+      node.halfChecked = false
+      node.checked = false
+      updateCheckStatusLoop(node, 'halfChecked')
+    } else {
+      node.checked = !node.checked
+      // 更新是否选中状态
+      updateCheckStatusLoop(node, 'checked', node.checked)
+    }
+    ulIndex -= 1
+    const parentNode = getParentNode(node.value, options, ulIndex)
+    updateParentNodeStatus(parentNode, options, ulIndex)
+  }
+  /**
+   * 父节点改变子节点check状态
+   * @param node 节点
+   */
+  const updateCheckStatusLoop = (node: CascaderItem, type: CheckedType, status?: boolean) => {
+    // console.log(node)
+    if (node.children) {
+      node.children.forEach(item => {
+        // 当需要改变checked时
+        // halfChecked一定是false
+        if (item.disabled) return // 禁用不可更改状态
+        if (type === 'checked') {
+          item[type] = status
+          item['halfChecked'] = false
+          updateCheckStatusLoop(item, type, status)
+        } else if (type === 'halfChecked') {
+          /**
+           * halfChecked为false时，取消子节点所有选中
+           */
+          item['halfChecked'] = false
+          item['checked'] = false
+          !status && updateCheckStatusLoop(item, type)
+        }
+      })
+    } else {
+      // 更新tagList
+      !node.checked
+      ? deleteTagList(tagList, node)
+      : addTagList(tagList, node)
+    }
+  }
+  /**
+   * 子节点获取父节点
+   */
+  const getParentNode = (childValue: string | number, options: CaascaderOptionsType, ulIndex: number): CascaderItem => {
+    if (ulIndex < 0) return
+    const queue = [...options[ulIndex]]
+    let cur: CascaderItem
+    while(queue.length) {
+      cur = queue.shift()
+      if (cur.children && cur.children.find(t => t.value === childValue)) {
+        break
+      } else if (cur.children) {
+        queue.push(...cur.children)
+      }
+    }
+    return cur
+  }
 
+  /**
+   * 更新父节点
+   */
+  const updateParentNodeStatus = (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => {
+    if (ulIndex < 0) return
+    const checkedChild = node?.children?.find(t => t['checked'])
+    const halfcheckedChild = node?.children?.find(t => t['halfChecked'])
+    const uncheckedChild = node?.children?.find(t => !t['halfChecked'] && !t['checked'])
+    if (halfcheckedChild || (checkedChild && uncheckedChild)) {
+      node['checked'] = false
+      node['halfChecked'] = true
+    } else if (!checkedChild && !halfcheckedChild) {
+      node['checked'] = false
+      node['halfChecked'] = false
+    } else {
+      node['checked'] = true
+      node['halfChecked'] = false
+    }
+    ulIndex -= 1
+    const parentNode = getParentNode(node.value, options, ulIndex)
+    updateParentNodeStatus(parentNode, options, ulIndex)
   }
   return {
-    multipleActiveArr,
-    addMultipleIptValue,
-    initMultipleIptValue,
-    clickCheckbox,
+    tagList,
+    addTagList,
+    deleteTagList,
+    initTagList,
+    updateCheckOptionStatus,
     getMultipleCascaderItem,
-    initActiveIndexs
+    initActiveIndexs,
+    updateCheckStatusLoop,
+    updateParentNodeStatus,
+    getParentNode,
   }
 }
diff --git a/packages/devui-vue/devui/cascader/src/cascader-types.ts b/packages/devui-vue/devui/cascader/src/cascader-types.ts
index 969b3a98..f2d175b6 100644
--- a/packages/devui-vue/devui/cascader/src/cascader-types.ts
+++ b/packages/devui-vue/devui/cascader/src/cascader-types.ts
@@ -122,11 +122,16 @@ export interface UseCascaderItemCallback {
   getInputValue: (a: string, b?: CascaderItem[]) => void
 }
 
+export type CheckedType = 'checked' | 'halfChecked'
 export interface UseCascaderMultipleCallback {
-  multipleActiveArr: UnwrapNestedRefs<CascaderItem[]>
-  addMultipleIptValue: (a: CascaderItem[], b: CascaderItem) => void
-  initMultipleIptValue: (a: CascaderItem[]) => void
-  getMultipleCascaderItem: (a: CascaderItem[], b: number[], c: number) => void
-  clickCheckbox: () => void
+  tagList: UnwrapNestedRefs<CascaderItem[]>
+  addTagList: (a: CascaderItem[], b: CascaderItem) => void
+  deleteTagList: (a: CascaderItem[], b: CascaderItem) => void
+  initTagList: (a: CascaderItem[]) => void
+  getMultipleCascaderItem: (a: CascaderItem[], b: number[], c: number, d: any) => void
+  updateCheckOptionStatus: (a: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => void
   initActiveIndexs: (a: CascaderValueType, b: CascaderItem[], c: number, d: number[]) => void
-}
\ No newline at end of file
+  updateCheckStatusLoop: (a: CascaderItem, b: CheckedType, c?: boolean) => void
+  getParentNode: (a: string | number, b: [CascaderItem[]], c: number) => CascaderItem
+  updateParentNodeStatus: (a: CascaderItem, b: CaascaderOptionsType, c: number) => void
+}
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index 8eecf21f..2e65a3df 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -12,6 +12,8 @@ import { cloneDeep } from 'lodash-es'
 import './cascader.scss'
 // import { UnwrapNestedRefs } from '@vue/reactivity'
 // type OptionsType = UnwrapNestedRefs<[CascaderItem[]]>
+let cascaderOptionsCache = reactive({})
+
 export default defineComponent({
   name: 'DCascader',
   props: cascaderProps,
@@ -20,9 +22,9 @@ export default defineComponent({
     const cascaderOptions = reactive<[CascaderItem[]]>(cloneDeep([ props?.options ]))
     const multiple = toRef(props, 'multiple')
     const inputValue = ref('')
-    const { multipleActiveArr, initMultipleIptValue, getMultipleCascaderItem, initActiveIndexs } = useMultiple()
+    const { tagList, updateCheckOptionStatus, initTagList, getMultipleCascaderItem, initActiveIndexs } = useMultiple()
     const { initSingleIptValue } = useSingle()
-    // const multipleActiveArr = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
+    // const tagList = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
     let initIptValue = props.value.length > 0 ? true : false // 有value默认值时，初始化输出内容
     const position = reactive({
       originX: 'left',
@@ -58,6 +60,8 @@ export default defineComponent({
         // 当最新的ul(级)没有下一级时删除之前选中ul的数据
         cascaderOptions.splice(index + 1, cascaderOptions.length - 1)
       }
+      cascaderOptionsCache = cascaderOptions
+      // console.log('cascaderOptions1', cascaderOptionsCache)
     }
     /**
      * 选中项输出
@@ -80,8 +84,10 @@ export default defineComponent({
         }
       } else {
         // 多选模式
-        value.forEach(singleValues => {
-          getMultipleCascaderItem(currentOption, singleValues, index)
+        // console.log('cascaderOptions2', cascaderOptionsCache)
+        value.forEach((singleValues) => {
+          console.log(singleValues)
+          getMultipleCascaderItem(currentOption, singleValues, index, cascaderOptionsCache)
         })
       }
     }
@@ -95,7 +101,8 @@ export default defineComponent({
      * 监听视图更新
      */
     watch(cascaderItemNeedProps.activeIndexs, val => {
-      updateCascaderView(val, props?.options, 0)
+      // cascaderOptions.splice(0, cascaderOptions.length)
+      updateCascaderView(val, cascaderOptions[0], 0)
     })
     /**
      * 监听点击最终的节点输出内容
@@ -103,7 +110,7 @@ export default defineComponent({
     watch(() => cascaderItemNeedProps.confirmInputValueFlg.value, () => {
       // 单选和多选模式初始化
       multiple.value
-        ? initMultipleIptValue(multipleActiveArr)
+        ? initTagList(tagList)
         : initSingleIptValue(cascaderItemNeedProps.inputValueCache)
       // 输出确认的选中值
       cascaderItemNeedProps.value = reactive(cloneDeep(cascaderItemNeedProps.valueCache))
@@ -111,10 +118,10 @@ export default defineComponent({
       // 点击确定过后禁止再次选中
       updateStopDefaultType()
        // 更新值
-      updateCascaderValue(cascaderItemNeedProps.value, props?.options, 0)
+      updateCascaderValue(cascaderItemNeedProps.value, cascaderOptions[0], 0)
       inputValue.value = cascaderItemNeedProps.inputValueCache.value
       if (initIptValue) { // 因为初始化了value，所以默认回显视图的选中态
-        initActiveIndexs(props.value, props?.options, 0, cascaderItemNeedProps.activeIndexs)
+        initActiveIndexs(props.value, cascaderOptions[0], 0, cascaderItemNeedProps.activeIndexs)
         initIptValue = false // 只需要初始化一次，之后不再执行
       }
     }, {
@@ -125,7 +132,7 @@ export default defineComponent({
       <>
         <div class={rootClasses.value} onClick={openPopup} ref={origin} {...ctx.attrs}>
           { multiple.value
-            ? <DMultipleBox placeholder={props.placeholder} activeOptions={multipleActiveArr}></DMultipleBox>
+            ? <DMultipleBox placeholder={props.placeholder} activeOptions={tagList}></DMultipleBox>
             : <d-input
                 disabled={props.disabled}
                 placeholder={props.placeholder}
-- 
Gitee


From a085af7c4ec1af3f37705f1b09741ba368ff5fcf Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Thu, 4 Nov 2021 16:55:02 +0800
Subject: [PATCH 12/18] feat: add character

---
 .../components/cascader-item/index.tsx        |  1 +
 .../cascader/hooks/use-cascader-multiple.ts   | 59 +++++++++++++++----
 .../devui-vue/devui/cascader/src/cascader.tsx | 17 +++---
 .../docs/components/cascader/index.md         |  3 +-
 4 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
index 6eac8002..163961eb 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
@@ -21,6 +21,7 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
     activeIndexs.splice(ulIndex, activeIndexs.length - ulIndex)
     // 更新当前渲染视图的下标数组
     activeIndexs[ulIndex] = liIndex
+    console.log('activeIndexs更新', activeIndexs)
     if (!multiple) { // 单选点击选项就更新，多选是通过点击checkbox触发数据更新
       singleChoose(ulIndex, valueCache, cascaderItem)
     }
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
index 02e07862..b86dbf10 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
@@ -39,7 +39,7 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
    */
   const getMultipleCascaderItem = (currentOption: CascaderItem[], cascaderUlValues: number[], index: number, cascaderOptions) => {
     const node = currentOption.find(item => item.value === cascaderUlValues[index])
-    // node.checked = true
+
     // console.log(ulIndex)
     if (node?.children?.length > 0) {
       // 递归获取选中节点
@@ -47,13 +47,24 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
       getMultipleCascaderItem(node.children, cascaderUlValues, index, cascaderOptions)
     } else {
       // 没有子节点了则说明已经是最终节点
-      // console.log('node', node, cascaderOptions, index)
+      // 从最终子节点往上开始查找父节点状态
+      node['checked'] = true
+      node['halfChecked'] = false
       const ulIndex = cascaderUlValues.findIndex(item => item === node.value)
-      console.log('node', node, ulIndex)
-      updateCheckOptionStatus(node, cascaderOptions, ulIndex)
+      // console.log('node', node, cascaderOptions, cascaderUlValues)
+      const parentNode = getParentNode2(node.value, cascaderOptions)
+      // const parentNode = getParentNode(node.value, cascaderOptions, ulIndex - 1)
+      console.log('父节点', parentNode)
+ 
+      // updateParentNodeStatus(node, cascaderOptions, ulIndex)
+      // updateCheckOptionStatus(node, cascaderOptions, ulIndex)
       // addTagList(tagList, node)
     }
   }
+
+  // const updateOptionCheckedStatus = (options, targetValue: string | number, checked: boolean) => {
+  // }
+
   /**
    * 多选模式下当有默认选中值时，初始化视图选中状态
    * 通过value集合获取下标集合
@@ -84,11 +95,11 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
     // 如果是半选状态，更新为false，其他状态则更新为与checked相反
     // console.log(node, options, ulIndex)
     if (node?.halfChecked) { // 更新半选状态
-      node.halfChecked = false
-      node.checked = false
+      node['halfChecked'] = false
+      node['checked'] = false
       updateCheckStatusLoop(node, 'halfChecked')
     } else {
-      node.checked = !node.checked
+      node['checked'] = !node.checked
       // 更新是否选中状态
       updateCheckStatusLoop(node, 'checked', node.checked)
     }
@@ -101,8 +112,7 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
    * @param node 节点
    */
   const updateCheckStatusLoop = (node: CascaderItem, type: CheckedType, status?: boolean) => {
-    // console.log(node)
-    if (node.children) {
+    if (node?.children?.length > 0) {
       node.children.forEach(item => {
         // 当需要改变checked时
         // halfChecked一定是false
@@ -122,6 +132,7 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
       })
     } else {
       // 更新tagList
+      // console.log('add node', node)
       !node.checked
       ? deleteTagList(tagList, node)
       : addTagList(tagList, node)
@@ -131,8 +142,10 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
    * 子节点获取父节点
    */
   const getParentNode = (childValue: string | number, options: CaascaderOptionsType, ulIndex: number): CascaderItem => {
+    // console.log('getParentNode', options)
     if (ulIndex < 0) return
     const queue = [...options[ulIndex]]
+    // console.log(queue)
     let cur: CascaderItem
     while(queue.length) {
       cur = queue.shift()
@@ -144,7 +157,31 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
     }
     return cur
   }
-
+  const getParentNode2 = (childValue: string | number, options: any): CascaderItem => {
+    // console.log('childValue', childValue, options)
+    let cur: CascaderItem
+    for (let i = 0; i < options.length; i++) {
+      const queue = [...options[i]?.children]
+      if (childValue === options[i].value) break
+      while(queue.length) {
+        cur = queue.shift()
+        if (cur.value === childValue) {
+          cur = options[i]
+          break
+        }
+        if (cur?.children && cur?.children.find(t => t.value === childValue)) {
+          break
+        } else if (cur?.children) {
+          queue.push(...cur?.children)
+        }
+        cur = null
+      }
+      if (cur) {
+        break
+      }
+    }
+    return cur
+  }
   /**
    * 更新父节点
    */
@@ -163,8 +200,10 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
       node['checked'] = true
       node['halfChecked'] = false
     }
+    console.log('childNode', node, ulIndex)
     ulIndex -= 1
     const parentNode = getParentNode(node.value, options, ulIndex)
+    // console.log('parentNode', parentNode, ulIndex)
     updateParentNodeStatus(parentNode, options, ulIndex)
   }
   return {
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index 2e65a3df..6635bee5 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -12,7 +12,6 @@ import { cloneDeep } from 'lodash-es'
 import './cascader.scss'
 // import { UnwrapNestedRefs } from '@vue/reactivity'
 // type OptionsType = UnwrapNestedRefs<[CascaderItem[]]>
-let cascaderOptionsCache = reactive({})
 
 export default defineComponent({
   name: 'DCascader',
@@ -26,6 +25,7 @@ export default defineComponent({
     const { initSingleIptValue } = useSingle()
     // const tagList = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
     let initIptValue = props.value.length > 0 ? true : false // 有value默认值时，初始化输出内容
+    // console.log('init', props.value)
     const position = reactive({
       originX: 'left',
       originY: 'bottom',
@@ -59,9 +59,8 @@ export default defineComponent({
       } else {
         // 当最新的ul(级)没有下一级时删除之前选中ul的数据
         cascaderOptions.splice(index + 1, cascaderOptions.length - 1)
+        console.log('删除', cascaderOptions)
       }
-      cascaderOptionsCache = cascaderOptions
-      // console.log('cascaderOptions1', cascaderOptionsCache)
     }
     /**
      * 选中项输出
@@ -84,10 +83,9 @@ export default defineComponent({
         }
       } else {
         // 多选模式
-        // console.log('cascaderOptions2', cascaderOptionsCache)
+        console.log('cascaderOptions2', [ ...props?.options ])
         value.forEach((singleValues) => {
-          console.log(singleValues)
-          getMultipleCascaderItem(currentOption, singleValues, index, cascaderOptionsCache)
+          getMultipleCascaderItem(currentOption, singleValues, index, [ ...props?.options ])
         })
       }
     }
@@ -101,7 +99,8 @@ export default defineComponent({
      * 监听视图更新
      */
     watch(cascaderItemNeedProps.activeIndexs, val => {
-      // cascaderOptions.splice(0, cascaderOptions.length)
+      // TODO 多选模式下优化切换选择后的视图切换
+      cascaderOptions.splice(val.length, cascaderOptions.length - 1)
       updateCascaderView(val, cascaderOptions[0], 0)
     })
     /**
@@ -120,7 +119,9 @@ export default defineComponent({
        // 更新值
       updateCascaderValue(cascaderItemNeedProps.value, cascaderOptions[0], 0)
       inputValue.value = cascaderItemNeedProps.inputValueCache.value
-      if (initIptValue) { // 因为初始化了value，所以默认回显视图的选中态
+      // 因为初始化了value，所以默认回显视图的选中态
+      // 多选模式不默认视图打开状态，因为选中了太多个，无法确定展示哪一种选中态
+      if (initIptValue && !multiple.value) {
         initActiveIndexs(props.value, cascaderOptions[0], 0, cascaderItemNeedProps.activeIndexs)
         initIptValue = false // 只需要初始化一次，之后不再执行
       }
diff --git a/packages/devui-vue/docs/components/cascader/index.md b/packages/devui-vue/docs/components/cascader/index.md
index e900d06f..44e84a4a 100644
--- a/packages/devui-vue/docs/components/cascader/index.md
+++ b/packages/devui-vue/docs/components/cascader/index.md
@@ -354,7 +354,8 @@ export default defineComponent({
         icon: 'folder'
       }
     ])
-    const value1 = [[1, 4, 8], [1, 4, 9, 81], [1, 41]]
+    // const value1 = [[1, 4, 8], [1, 4, 9, 81], [1, 41]]
+    const value1 = []
     const onToggleChange = (event) => {
       console.log(event)
     }
-- 
Gitee


From 3cb21f31e8abbcbf77b22b8dbe36c36534dc14c6 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Fri, 5 Nov 2021 17:45:28 +0800
Subject: [PATCH 13/18] feat: add character

---
 .../cascader/hooks/use-cascader-multiple.ts   | 72 ++++++++++++-------
 .../devui/cascader/src/cascader-types.ts      |  2 +-
 .../devui-vue/devui/cascader/src/cascader.tsx |  7 +-
 .../docs/components/cascader/index.md         |  4 +-
 4 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
index b86dbf10..0e37dbcd 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
@@ -33,33 +33,46 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
   }
   /**
    * 获取选中的节点
-   * @param currentOption 选中的某项
-   * @param cascaderUlValues 多选集合中的某一个集合
-   * @param index cascaderUlValues数组的起始项，最开始为0
    */
-  const getMultipleCascaderItem = (currentOption: CascaderItem[], cascaderUlValues: number[], index: number, cascaderOptions) => {
-    const node = currentOption.find(item => item.value === cascaderUlValues[index])
+  const getMultipleCascaderItem = (targetValues: number[], cascaderOptions: CascaderItem[]) => {
+    console.log('init', targetValues, cascaderOptions)
+    // const node = currentOption.find(item => item.value === cascaderUlValues[index])
+    // 找出
 
-    // console.log(ulIndex)
-    if (node?.children?.length > 0) {
-      // 递归获取选中节点
-      index += 1
-      getMultipleCascaderItem(node.children, cascaderUlValues, index, cascaderOptions)
-    } else {
-      // 没有子节点了则说明已经是最终节点
-      // 从最终子节点往上开始查找父节点状态
-      node['checked'] = true
-      node['halfChecked'] = false
-      const ulIndex = cascaderUlValues.findIndex(item => item === node.value)
-      // console.log('node', node, cascaderOptions, cascaderUlValues)
-      const parentNode = getParentNode2(node.value, cascaderOptions)
-      // const parentNode = getParentNode(node.value, cascaderOptions, ulIndex - 1)
-      console.log('父节点', parentNode)
- 
-      // updateParentNodeStatus(node, cascaderOptions, ulIndex)
-      // updateCheckOptionStatus(node, cascaderOptions, ulIndex)
-      // addTagList(tagList, node)
+    const findNextColumn = (targetValues, options, index) => {
+
+      const targetNode = options.find(t => t.value === targetValues[index])
+      console.log('target', targetNode)
+      // if (targetNode?.halfChecked) { // 更新半选状态
+      //   targetNode['halfChecked'] = false
+      //   targetNode['checked'] = false
+      // } else {
+      //   targetNode['checked'] = !targetNode.checked
+      //   // 更新是否选中状态
+      // }
+      if (targetNode?.children?.length > 0) {
+        index += 1
+        findChildrenCheckedStatusToUpdateParent(targetNode)
+        findNextColumn(targetValues, targetNode.children, index)
+      } else {
+        targetNode['checked'] = true
+      }
     }
+    findNextColumn(targetValues, cascaderOptions, 0)
+    // console.log(ulIndex)
+    // if (node?.children?.length > 0) {
+    //   // 递归获取选中节点
+    //   index += 1
+    //   getMultipleCascaderItem(node.children, cascaderUlValues, index, cascaderOptions)
+    // } else {
+    //   // 没有子节点了则说明已经是最终节点
+    //   // 从最终子节点往上开始查找父节点状态
+    //   node['checked'] = true
+    //   node['halfChecked'] = false
+    //   const ulIndex = cascaderUlValues.findIndex(item => item === node.value)
+    //   const parentNode = getParentNode2(node.value, cascaderOptions)
+    //   console.log('父节点', parentNode)
+    // }
   }
 
   // const updateOptionCheckedStatus = (options, targetValue: string | number, checked: boolean) => {
@@ -185,21 +198,28 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
   /**
    * 更新父节点
    */
-  const updateParentNodeStatus = (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => {
-    if (ulIndex < 0) return
+   const findChildrenCheckedStatusToUpdateParent = (node) => {
     const checkedChild = node?.children?.find(t => t['checked'])
     const halfcheckedChild = node?.children?.find(t => t['halfChecked'])
     const uncheckedChild = node?.children?.find(t => !t['halfChecked'] && !t['checked'])
+    console.log('check', node, checkedChild, halfcheckedChild, uncheckedChild)
     if (halfcheckedChild || (checkedChild && uncheckedChild)) {
+      console.log('半选')
       node['checked'] = false
       node['halfChecked'] = true
     } else if (!checkedChild && !halfcheckedChild) {
+      console.log('空')
       node['checked'] = false
       node['halfChecked'] = false
     } else {
+      console.log('选中')
       node['checked'] = true
       node['halfChecked'] = false
     }
+  }
+  const updateParentNodeStatus = (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => {
+    if (ulIndex < 0) return
+    findChildrenCheckedStatusToUpdateParent(node)
     console.log('childNode', node, ulIndex)
     ulIndex -= 1
     const parentNode = getParentNode(node.value, options, ulIndex)
diff --git a/packages/devui-vue/devui/cascader/src/cascader-types.ts b/packages/devui-vue/devui/cascader/src/cascader-types.ts
index f2d175b6..e228c615 100644
--- a/packages/devui-vue/devui/cascader/src/cascader-types.ts
+++ b/packages/devui-vue/devui/cascader/src/cascader-types.ts
@@ -128,7 +128,7 @@ export interface UseCascaderMultipleCallback {
   addTagList: (a: CascaderItem[], b: CascaderItem) => void
   deleteTagList: (a: CascaderItem[], b: CascaderItem) => void
   initTagList: (a: CascaderItem[]) => void
-  getMultipleCascaderItem: (a: CascaderItem[], b: number[], c: number, d: any) => void
+  getMultipleCascaderItem: (a: number[], b: CascaderItem[]) => void
   updateCheckOptionStatus: (a: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => void
   initActiveIndexs: (a: CascaderValueType, b: CascaderItem[], c: number, d: number[]) => void
   updateCheckStatusLoop: (a: CascaderItem, b: CheckedType, c?: boolean) => void
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index 6635bee5..9ab2bf63 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -59,7 +59,6 @@ export default defineComponent({
       } else {
         // 当最新的ul(级)没有下一级时删除之前选中ul的数据
         cascaderOptions.splice(index + 1, cascaderOptions.length - 1)
-        console.log('删除', cascaderOptions)
       }
     }
     /**
@@ -84,8 +83,8 @@ export default defineComponent({
       } else {
         // 多选模式
         console.log('cascaderOptions2', [ ...props?.options ])
-        value.forEach((singleValues) => {
-          getMultipleCascaderItem(currentOption, singleValues, index, [ ...props?.options ])
+        value.forEach((targetValue) => {
+          getMultipleCascaderItem(targetValue, cascaderOptions[0])
         })
       }
     }
@@ -116,7 +115,7 @@ export default defineComponent({
       menuShow.value = false
       // 点击确定过后禁止再次选中
       updateStopDefaultType()
-       // 更新值
+      // 更新值
       updateCascaderValue(cascaderItemNeedProps.value, cascaderOptions[0], 0)
       inputValue.value = cascaderItemNeedProps.inputValueCache.value
       // 因为初始化了value，所以默认回显视图的选中态
diff --git a/packages/devui-vue/docs/components/cascader/index.md b/packages/devui-vue/docs/components/cascader/index.md
index 44e84a4a..b4509c6c 100644
--- a/packages/devui-vue/docs/components/cascader/index.md
+++ b/packages/devui-vue/docs/components/cascader/index.md
@@ -354,8 +354,8 @@ export default defineComponent({
         icon: 'folder'
       }
     ])
-    // const value1 = [[1, 4, 8], [1, 4, 9, 81], [1, 41]]
-    const value1 = []
+    const value1 = [[1, 4, 8], [1, 4, 9, 81], [1, 41]]
+    // const value1 = []
     const onToggleChange = (event) => {
       console.log(event)
     }
-- 
Gitee


From 26adcd034689a4a06d7192f4970042770b6312ad Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Wed, 10 Nov 2021 20:22:15 +0800
Subject: [PATCH 14/18] feat: add feature

---
 .../components/cascader-item/index.tsx        |   6 +-
 .../components/cascader-multiple/index.tsx    |   2 +-
 .../components/cascader-tag/index.tsx         |   6 +-
 .../devui/cascader/hooks/use-cascader-item.ts |  20 +--
 .../cascader/hooks/use-cascader-multiple.ts   | 157 ++++++++----------
 .../devui/cascader/src/cascader-types.ts      |  12 +-
 .../devui-vue/devui/cascader/src/cascader.tsx |  15 +-
 7 files changed, 94 insertions(+), 124 deletions(-)

diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
index 163961eb..c52fa9f1 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
@@ -7,10 +7,10 @@ import './index.scss'
 export const DCascaderItem = (props: CascaderItemPropsType) => {
   // console.log('item index',props)
   const { cascaderItem, ulIndex, liIndex, cascaderItemNeedProps, cascaderOptions } = props
-  const { multiple, stopDefault, valueCache, activeIndexs, trigger, confirmInputValueFlg } = cascaderItemNeedProps
+  const { multiple, stopDefault, valueCache, activeIndexs, trigger, confirmInputValueFlg, tagList} = cascaderItemNeedProps
   const triggerHover = trigger === 'hover'
   const { singleChoose } = useSingle()
-  const { updateCheckOptionStatus, getParentNode, updateParentNodeStatus } = useMultiple()
+  const { updateCheckOptionStatus } = useMultiple(cascaderItemNeedProps)
   const { getRootClass } = useClassName()
   const disbaled = computed(() => cascaderItem?.disabled) // 当前项是否被禁用
   const rootClasses = getRootClass(props)
@@ -43,7 +43,7 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
     }
   }
   const checkboxChange = () => {
-    updateCheckOptionStatus(cascaderItem, cascaderOptions, ulIndex)
+    updateCheckOptionStatus(cascaderItem, cascaderOptions, ulIndex, tagList)
     // const parentNode = getParentNode(cascaderItem.value, cascaderOptions, ulIndex - 1)
     // updateParentNodeStatus(parentNode, cascaderOptions, ulIndex - 1)
     // if (!cascaderItem.children || cascaderItem?.children?.length === 0) {
diff --git a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
index 51d053d9..e80c821b 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
@@ -10,7 +10,7 @@ export const DMultipleBox = (props: MultiplePropsType) => {
       <div class="devui-tags-box">
         { props.activeOptions.length > 0
           ? props.activeOptions.map(item => {
-              return <DTag item={item}></DTag>
+              return <DTag item={item} tagList={props.activeOptions}></DTag>
             })
           : <div class="devui-tags-placeholder">{ props.placeholder }</div>
         }
diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
index c60211a8..db6c368a 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
@@ -7,12 +7,12 @@ import { useMultiple } from '../../hooks/use-cascader-multiple'
 import './index.scss'
 interface PropsType {
   item: CascaderItem
+  tagList: CascaderItem[]
 }
 export const DTag = (props: PropsType) => {
-  const { item } = props
-  const { tagList, deleteTagList } = useMultiple()
+  const { tagList, item } = props
+  const { deleteTagList } = useMultiple()
   const deleteCurrentTag = (e: Event) => {
-    console.log(11)
     e.stopPropagation()
     deleteTagList(tagList, item)
   }
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
index ff32d704..41ffc158 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
@@ -5,7 +5,7 @@ import { CascaderProps, UseCascaderItemCallback, CascaderItem } from '../src/cas
 import { ref, reactive, Ref } from 'vue'
 import { cloneDeep } from 'lodash-es'
 
-export const useCascaderItem = (props: CascaderProps, stopDefault: Ref<boolean>): UseCascaderItemCallback => {
+export const useCascaderItem = (props?: CascaderProps, stopDefault?: Ref<boolean>, tagList?: CascaderItem[]): UseCascaderItemCallback => {
   /**
    * 传递给cascader-item/index.ts组件的数据
    */
@@ -17,24 +17,12 @@ export const useCascaderItem = (props: CascaderProps, stopDefault: Ref<boolean>)
     value: reactive(cloneDeep(props.value)), // 每级的value
     multiple: props.multiple,
     activeIndexs: reactive<number[]>([]), // 维护用于视图更新的选中下标
+    tagList, // 多选模式下选中的值数组，用于生成tag
     stopDefault,
   }
-  /**
-   * 下拉框中输出内容
-   * 需要判断是否是多选
-   * 需要判断单选模式下是否showPath
-   * @param label 当前current的内容
-   * @param arr 当前选中项current的children数组
-   */
-    const getInputValue = (label: string, arr?: CascaderItem[]) => {
-      if (!props.showPath) {
-        cascaderItemNeedProps.inputValueCache.value = label
-      } else {
-        cascaderItemNeedProps.inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
-      }
-    }
+
   return {
     cascaderItemNeedProps,
-    getInputValue
+    // getInputValue
   }
 }
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
index 0e37dbcd..8ddb64e1 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
@@ -1,10 +1,26 @@
 /**
  * 多选模式下的一些函数
  */
-import { CascaderItem, CascaderValueType, CaascaderOptionsType, UseCascaderMultipleCallback, CheckedType } from '../src/cascader-types'
-import { reactive } from 'vue'
-const tagList = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
-export const useMultiple = (): UseCascaderMultipleCallback => {
+import { CascaderItem, CascaderValueType, CaascaderOptionsType, UseCascaderMultipleCallback, CheckedType, CascaderItemNeedType } from '../src/cascader-types'
+// import { useCascaderItem } from './use-cascader-item'
+import { Ref } from 'vue'
+export const useMultiple = (cascaderItemNeedProps?: CascaderItemNeedType): UseCascaderMultipleCallback => {
+  // const { cascaderItemNeedProps } = useCascaderItem()
+  /**
+   * 下拉框中输出内容
+   * 需要判断是否是多选
+   * 需要判断单选模式下是否showPath
+   * @param label 当前current的内容
+   * @param arr 当前选中项current的children数组
+   */
+   const getInputValue = (label: string, arr: CascaderItem[], inputValueCache: Ref<string>, showPath?: boolean) => {
+    //  console.log('输出tag')
+    if (!showPath) {
+      inputValueCache.value = label
+    } else {
+      inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
+    }
+  }
   /**
    * 添加选中项
    * @param arr 当前选中的数组集合
@@ -21,6 +37,7 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
    * 
    */
   const deleteTagList = (arr: CascaderItem[], singleItem: CascaderItem) => {
+    // console.log(arr)
     const i = arr.findIndex(item => item.value === singleItem.value)
     arr.splice(i, 1)
   }
@@ -31,52 +48,42 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
   const initTagList = (arr: CascaderItem[]) => {
     arr.splice(0, arr.length)
   }
-  /**
-   * 获取选中的节点
-   */
-  const getMultipleCascaderItem = (targetValues: number[], cascaderOptions: CascaderItem[]) => {
-    console.log('init', targetValues, cascaderOptions)
-    // const node = currentOption.find(item => item.value === cascaderUlValues[index])
-    // 找出
 
-    const findNextColumn = (targetValues, options, index) => {
+  // const deleteUncheckedValues = (value, index) => {
+  //   console.log(value)
+  //   value.splice(index, value.length - 1)
+  // }
 
-      const targetNode = options.find(t => t.value === targetValues[index])
-      console.log('target', targetNode)
-      // if (targetNode?.halfChecked) { // 更新半选状态
-      //   targetNode['halfChecked'] = false
-      //   targetNode['checked'] = false
-      // } else {
-      //   targetNode['checked'] = !targetNode.checked
-      //   // 更新是否选中状态
-      // }
-      if (targetNode?.children?.length > 0) {
-        index += 1
-        findChildrenCheckedStatusToUpdateParent(targetNode)
-        findNextColumn(targetValues, targetNode.children, index)
-      } else {
-        targetNode['checked'] = true
-      }
+  /**
+   * 多选模式初始化选中的节点
+   */
+  const initMultipleCascaderItem = (targetValues: number[], cascaderOptions: CascaderItem[], tagList: CascaderItem[]) => {
+    findNextColumn(targetValues, cascaderOptions, 0, tagList)
+  }
+  const findNextColumn = (targetValues, options, index, tagList) => {
+    let targetNode = options.find(t => t.value === targetValues[index]) // 根据value获取当前选中的项
+    if (targetNode?.children?.length > 0) {
+      index += 1 // 进入下一级
+      targetNode = setChildrenParent(targetNode) // 为children设置parent
+      findNextColumn(targetValues, targetNode.children, index, tagList)
+    } else {
+      addTagList(tagList, targetNode) // 初始化tag
+      targetNode['checked'] = true // 此时已经是最终结点了，从最终结点往上寻找父节点更新状态
+      findChildrenCheckedStatusToUpdateParent(targetNode?.parent)
     }
-    findNextColumn(targetValues, cascaderOptions, 0)
-    // console.log(ulIndex)
-    // if (node?.children?.length > 0) {
-    //   // 递归获取选中节点
-    //   index += 1
-    //   getMultipleCascaderItem(node.children, cascaderUlValues, index, cascaderOptions)
-    // } else {
-    //   // 没有子节点了则说明已经是最终节点
-    //   // 从最终子节点往上开始查找父节点状态
-    //   node['checked'] = true
-    //   node['halfChecked'] = false
-    //   const ulIndex = cascaderUlValues.findIndex(item => item === node.value)
-    //   const parentNode = getParentNode2(node.value, cascaderOptions)
-    //   console.log('父节点', parentNode)
-    // }
   }
 
-  // const updateOptionCheckedStatus = (options, targetValue: string | number, checked: boolean) => {
-  // }
+  /**
+   * 
+   * @param parentNode 父节点
+   * @returns parentNode 父节点
+   */
+  const setChildrenParent = (parentNode) => {
+    parentNode?.children.forEach(child => {
+      child.parent = parentNode
+    })
+    return parentNode
+  }
 
   /**
    * 多选模式下当有默认选中值时，初始化视图选中状态
@@ -106,15 +113,17 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
    */
   const updateCheckOptionStatus = (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number): void => {
     // 如果是半选状态，更新为false，其他状态则更新为与checked相反
-    // console.log(node, options, ulIndex)
     if (node?.halfChecked) { // 更新半选状态
       node['halfChecked'] = false
       node['checked'] = false
-      updateCheckStatusLoop(node, 'halfChecked')
+      updateCheckStatusLoop(node, 'halfChecked', ulIndex)
     } else {
       node['checked'] = !node.checked
+      // if (node['checked'] === false) {
+      //   deleteTagList(tagList, node)
+      // }
       // 更新是否选中状态
-      updateCheckStatusLoop(node, 'checked', node.checked)
+      updateCheckStatusLoop(node, 'checked', ulIndex, node.checked)
     }
     ulIndex -= 1
     const parentNode = getParentNode(node.value, options, ulIndex)
@@ -124,7 +133,7 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
    * 父节点改变子节点check状态
    * @param node 节点
    */
-  const updateCheckStatusLoop = (node: CascaderItem, type: CheckedType, status?: boolean) => {
+  const updateCheckStatusLoop = (node: CascaderItem, type: CheckedType,  ulIndex: number, status?: boolean,) => {
     if (node?.children?.length > 0) {
       node.children.forEach(item => {
         // 当需要改变checked时
@@ -133,32 +142,32 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
         if (type === 'checked') {
           item[type] = status
           item['halfChecked'] = false
-          updateCheckStatusLoop(item, type, status)
+          updateCheckStatusLoop(item, type, ulIndex, status)
         } else if (type === 'halfChecked') {
           /**
            * halfChecked为false时，取消子节点所有选中
            */
           item['halfChecked'] = false
           item['checked'] = false
-          !status && updateCheckStatusLoop(item, type)
+          !status && updateCheckStatusLoop(item, type, ulIndex)
         }
       })
     } else {
-      // 更新tagList
-      // console.log('add node', node)
+      // 增加或者删除选中的项
       !node.checked
-      ? deleteTagList(tagList, node)
-      : addTagList(tagList, node)
+      ? deleteTagList(cascaderItemNeedProps.tagList, node)
+      : addTagList(cascaderItemNeedProps.tagList, node)
+
+      // TODO 更新value
+      // deleteUncheckedValues(cascaderItemNeedProps.value, ulIndex)
     }
   }
   /**
    * 子节点获取父节点
    */
   const getParentNode = (childValue: string | number, options: CaascaderOptionsType, ulIndex: number): CascaderItem => {
-    // console.log('getParentNode', options)
     if (ulIndex < 0) return
     const queue = [...options[ulIndex]]
-    // console.log(queue)
     let cur: CascaderItem
     while(queue.length) {
       cur = queue.shift()
@@ -170,31 +179,6 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
     }
     return cur
   }
-  const getParentNode2 = (childValue: string | number, options: any): CascaderItem => {
-    // console.log('childValue', childValue, options)
-    let cur: CascaderItem
-    for (let i = 0; i < options.length; i++) {
-      const queue = [...options[i]?.children]
-      if (childValue === options[i].value) break
-      while(queue.length) {
-        cur = queue.shift()
-        if (cur.value === childValue) {
-          cur = options[i]
-          break
-        }
-        if (cur?.children && cur?.children.find(t => t.value === childValue)) {
-          break
-        } else if (cur?.children) {
-          queue.push(...cur?.children)
-        }
-        cur = null
-      }
-      if (cur) {
-        break
-      }
-    }
-    return cur
-  }
   /**
    * 更新父节点
    */
@@ -202,17 +186,13 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
     const checkedChild = node?.children?.find(t => t['checked'])
     const halfcheckedChild = node?.children?.find(t => t['halfChecked'])
     const uncheckedChild = node?.children?.find(t => !t['halfChecked'] && !t['checked'])
-    console.log('check', node, checkedChild, halfcheckedChild, uncheckedChild)
     if (halfcheckedChild || (checkedChild && uncheckedChild)) {
-      console.log('半选')
       node['checked'] = false
       node['halfChecked'] = true
     } else if (!checkedChild && !halfcheckedChild) {
-      console.log('空')
       node['checked'] = false
       node['halfChecked'] = false
     } else {
-      console.log('选中')
       node['checked'] = true
       node['halfChecked'] = false
     }
@@ -223,16 +203,15 @@ export const useMultiple = (): UseCascaderMultipleCallback => {
     console.log('childNode', node, ulIndex)
     ulIndex -= 1
     const parentNode = getParentNode(node.value, options, ulIndex)
-    // console.log('parentNode', parentNode, ulIndex)
     updateParentNodeStatus(parentNode, options, ulIndex)
   }
   return {
-    tagList,
+    getInputValue,
     addTagList,
     deleteTagList,
     initTagList,
     updateCheckOptionStatus,
-    getMultipleCascaderItem,
+    initMultipleCascaderItem,
     initActiveIndexs,
     updateCheckStatusLoop,
     updateParentNodeStatus,
diff --git a/packages/devui-vue/devui/cascader/src/cascader-types.ts b/packages/devui-vue/devui/cascader/src/cascader-types.ts
index e228c615..6dea93b3 100644
--- a/packages/devui-vue/devui/cascader/src/cascader-types.ts
+++ b/packages/devui-vue/devui/cascader/src/cascader-types.ts
@@ -116,22 +116,24 @@ export interface CascaderItemNeedType extends PickCascader {
   multiple: boolean
   stopDefault: Ref<boolean>
   activeIndexs: number[]
+  tagList: UnwrapNestedRefs<CascaderItem[]>
 }
 export interface UseCascaderItemCallback {
   cascaderItemNeedProps: CascaderItemNeedType
-  getInputValue: (a: string, b?: CascaderItem[]) => void
+  // getInputValue: (a: string, b?: CascaderItem[], c?: Ref<boolean>) => void
 }
 
 export type CheckedType = 'checked' | 'halfChecked'
 export interface UseCascaderMultipleCallback {
-  tagList: UnwrapNestedRefs<CascaderItem[]>
+  // tagList: UnwrapNestedRefs<CascaderItem[]>
   addTagList: (a: CascaderItem[], b: CascaderItem) => void
   deleteTagList: (a: CascaderItem[], b: CascaderItem) => void
   initTagList: (a: CascaderItem[]) => void
-  getMultipleCascaderItem: (a: number[], b: CascaderItem[]) => void
-  updateCheckOptionStatus: (a: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => void
+  initMultipleCascaderItem: (a: number[], b: CascaderItem[], c: CascaderItem[]) => void
+  updateCheckOptionStatus: (a: CascaderItem, options: CaascaderOptionsType, ulIndex: number, tagList: CascaderItem[]) => void
   initActiveIndexs: (a: CascaderValueType, b: CascaderItem[], c: number, d: number[]) => void
-  updateCheckStatusLoop: (a: CascaderItem, b: CheckedType, c?: boolean) => void
+  updateCheckStatusLoop: (a: CascaderItem, b: CheckedType, ulIndex: number, c?: boolean) => void
   getParentNode: (a: string | number, b: [CascaderItem[]], c: number) => CascaderItem
   updateParentNodeStatus: (a: CascaderItem, b: CaascaderOptionsType, c: number) => void
+  getInputValue: (a: string, b: CascaderItem[], c: Ref<string>, d?: boolean) => void
 }
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index 9ab2bf63..aaf2e32e 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -21,11 +21,10 @@ export default defineComponent({
     const cascaderOptions = reactive<[CascaderItem[]]>(cloneDeep([ props?.options ]))
     const multiple = toRef(props, 'multiple')
     const inputValue = ref('')
-    const { tagList, updateCheckOptionStatus, initTagList, getMultipleCascaderItem, initActiveIndexs } = useMultiple()
+    const tagList = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
     const { initSingleIptValue } = useSingle()
-    // const tagList = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
     let initIptValue = props.value.length > 0 ? true : false // 有value默认值时，初始化输出内容
-    // console.log('init', props.value)
+
     const position = reactive({
       originX: 'left',
       originY: 'bottom',
@@ -37,7 +36,9 @@ export default defineComponent({
     // 配置class
     const rootClasses = getRootClass(props, menuShow)
     // 传递给cascaderItem的props
-    const { cascaderItemNeedProps, getInputValue } = useCascaderItem(props, stopDefault)
+    const { cascaderItemNeedProps } = useCascaderItem(props, stopDefault, tagList)
+    const { initTagList, initMultipleCascaderItem, initActiveIndexs, getInputValue } = useMultiple(cascaderItemNeedProps)
+
     /**
      * 控制视图更新
      * 注意视图更新不区分单选或者多选
@@ -76,15 +77,15 @@ export default defineComponent({
         // 当前的子级
         const current = getCurrentOption(currentOption, i)
         const children = current?.children
-        getInputValue(current.label, children)
+        getInputValue(current.label, children, cascaderItemNeedProps.inputValueCache, props.showPath)
         if (children?.length > 0) {
           updateCascaderValue(value, children, index + 1)
         }
       } else {
         // 多选模式
-        console.log('cascaderOptions2', [ ...props?.options ])
         value.forEach((targetValue) => {
-          getMultipleCascaderItem(targetValue, cascaderOptions[0])
+          console.log(tagList)
+          initMultipleCascaderItem(targetValue, cascaderOptions[0], tagList)
         })
       }
     }
-- 
Gitee


From f08dff3ea88840faf90cae1de0d9ffece5ed4ac2 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Wed, 10 Nov 2021 20:27:10 +0800
Subject: [PATCH 15/18] fix: clear console

---
 .../devui-vue/devui/cascader/components/cascader-item/index.tsx | 2 +-
 .../devui-vue/devui/cascader/hooks/use-cascader-multiple.ts     | 2 +-
 packages/devui-vue/devui/cascader/src/cascader.tsx              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
index c52fa9f1..3fb824fb 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
@@ -21,7 +21,7 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
     activeIndexs.splice(ulIndex, activeIndexs.length - ulIndex)
     // 更新当前渲染视图的下标数组
     activeIndexs[ulIndex] = liIndex
-    console.log('activeIndexs更新', activeIndexs)
+    // console.log('activeIndexs更新', activeIndexs)
     if (!multiple) { // 单选点击选项就更新，多选是通过点击checkbox触发数据更新
       singleChoose(ulIndex, valueCache, cascaderItem)
     }
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
index 8ddb64e1..d96fdb57 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
@@ -200,7 +200,7 @@ export const useMultiple = (cascaderItemNeedProps?: CascaderItemNeedType): UseCa
   const updateParentNodeStatus = (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => {
     if (ulIndex < 0) return
     findChildrenCheckedStatusToUpdateParent(node)
-    console.log('childNode', node, ulIndex)
+    // console.log('childNode', node, ulIndex)
     ulIndex -= 1
     const parentNode = getParentNode(node.value, options, ulIndex)
     updateParentNodeStatus(parentNode, options, ulIndex)
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index aaf2e32e..540bb62f 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -84,7 +84,7 @@ export default defineComponent({
       } else {
         // 多选模式
         value.forEach((targetValue) => {
-          console.log(tagList)
+          // console.log(tagList)
           initMultipleCascaderItem(targetValue, cascaderOptions[0], tagList)
         })
       }
-- 
Gitee


From 454bc0401a0980a64d9a5d21c2fd77ffce6126d3 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Sat, 13 Nov 2021 10:57:26 +0800
Subject: [PATCH 16/18] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=A3=80?=
 =?UTF-8?q?=E8=A7=86=E6=84=8F=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cascader-item/cascader-item-types.ts      |  2 +-
 .../components/cascader-item/index.tsx        |  6 +--
 .../components/cascader-item/use-class.ts     |  8 ++--
 .../cascader-list/cascader-list-types.ts      | 14 ++++--
 .../components/cascader-multiple/index.tsx    |  2 +-
 .../components/cascader-tag/index.tsx         |  8 ++--
 .../devui/cascader/hooks/use-cascader-item.ts |  2 +-
 .../cascader/hooks/use-cascader-multiple.ts   |  2 +-
 .../devui/cascader/src/cascader-types.ts      | 44 ++++++++++---------
 .../docs/components/cascader/index.md         |  1 -
 10 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts b/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts
index 8688dab6..6e7a13ca 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts
@@ -1,5 +1,5 @@
 import { ComputedRef } from 'vue'
 import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
 export interface UseClassNameType {
-  getRootClass: (j: CascaderItemPropsType) => ComputedRef
+  getRootClass: (props: CascaderItemPropsType) => ComputedRef
 }
diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
index 3fb824fb..75ea916e 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
@@ -1,6 +1,6 @@
+import { computed, ref } from 'vue'
 import { useClassName } from './use-class'
 import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
-import { computed, ref } from 'vue'
 import { useSingle } from '../../hooks/use-cascader-single'
 import { useMultiple } from '../../hooks/use-cascader-multiple'
 import './index.scss'
@@ -8,7 +8,7 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
   // console.log('item index',props)
   const { cascaderItem, ulIndex, liIndex, cascaderItemNeedProps, cascaderOptions } = props
   const { multiple, stopDefault, valueCache, activeIndexs, trigger, confirmInputValueFlg, tagList} = cascaderItemNeedProps
-  const triggerHover = trigger === 'hover'
+  const isTriggerHover = trigger === 'hover'
   const { singleChoose } = useSingle()
   const { updateCheckOptionStatus } = useMultiple(cascaderItemNeedProps)
   const { getRootClass } = useClassName()
@@ -32,7 +32,7 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
     updateValues()
   }
   const mouseenter = {
-    [ triggerHover && 'onMouseenter' ]: mouseEnter
+    [ isTriggerHover && 'onMouseenter' ]: mouseEnter
   }
   // 鼠标click
   const mouseClick = () => {
diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts b/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
index 6aa44a57..494496ee 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
@@ -7,12 +7,12 @@ import { UseClassNameType } from './cascader-item-types'
 export const useClassName = (): UseClassNameType => {
   const getRootClass = (props: CascaderItemPropsType): ComputedRef => {
     const itemProps = props?.cascaderItemNeedProps
-    const activeFlg = itemProps?.valueCache[props.ulIndex] === props.cascaderItem?.value
-    const disabledFlg = props.cascaderItem?.disabled
+    const isActive = itemProps?.valueCache[props.ulIndex] === props.cascaderItem?.value
+    const isDisabled = props.cascaderItem?.disabled
     return computed(() => ({
       'devui-cascader-li devui-dropdown-item': true,
-      'devui-leaf-active': activeFlg,
-      'disabled': disabledFlg
+      'devui-leaf-active': isActive,
+      'disabled': isDisabled
     }))
   }
   return {
diff --git a/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts b/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts
index 95fb3c98..854c87f1 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts
+++ b/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts
@@ -1,4 +1,4 @@
-import type { PropType, ExtractPropTypes, Ref } from 'vue'
+import type { PropType, ExtractPropTypes } from 'vue'
 import { CascaderItem, CascaderItemNeedType } from '../../src/cascader-types'
 export const cascaderulProps = {
   /**
@@ -8,7 +8,10 @@ export const cascaderulProps = {
    */
   cascaderItems: {
     type: Array as PropType<CascaderItem[]>,
-    default: [],
+    default: ():CascaderItem[] => ([{
+      label: '',
+      value: null
+    }]),
   },
   /**
    * 当前选中的ul下标
@@ -21,7 +24,7 @@ export const cascaderulProps = {
   },
   cascaderItemNeedProps: {
     type: Object as PropType<CascaderItemNeedType>,
-    default: {}
+    default: ():CascaderItemNeedType => ({})
   },
   stopDefault: {
     type: Boolean,
@@ -29,7 +32,10 @@ export const cascaderulProps = {
   },
   cascaderOptions: {
     type: Array as unknown as PropType<[CascaderItem[]]>,
-    default: []
+    default: ():[CascaderItem[]] => ([[{
+      label: '',
+      value: null
+    }]])
   }
 }
 export type CascaderulProps = ExtractPropTypes<typeof cascaderulProps>
diff --git a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
index e80c821b..d181de15 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
@@ -10,7 +10,7 @@ export const DMultipleBox = (props: MultiplePropsType) => {
       <div class="devui-tags-box">
         { props.activeOptions.length > 0
           ? props.activeOptions.map(item => {
-              return <DTag item={item} tagList={props.activeOptions}></DTag>
+              return <DTag tag={item} tagList={props.activeOptions}></DTag>
             })
           : <div class="devui-tags-placeholder">{ props.placeholder }</div>
         }
diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
index db6c368a..810d7cbb 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
@@ -6,19 +6,19 @@ import { CascaderItem } from '../../src/cascader-types'
 import { useMultiple } from '../../hooks/use-cascader-multiple'
 import './index.scss'
 interface PropsType {
-  item: CascaderItem
+  tag: CascaderItem
   tagList: CascaderItem[]
 }
 export const DTag = (props: PropsType) => {
-  const { tagList, item } = props
+  const { tagList, tag } = props
   const { deleteTagList } = useMultiple()
   const deleteCurrentTag = (e: Event) => {
     e.stopPropagation()
-    deleteTagList(tagList, item)
+    deleteTagList(tagList, tag)
   }
   return (
     <div class="devui-tag">
-      <span>{ item?.label }</span>
+      <span>{ tag?.label }</span>
       <div class="devui-tag__close" onClick={deleteCurrentTag}>
         <d-icon name="close"></d-icon>
       </div>
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
index 41ffc158..bcc30d4b 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
@@ -1,9 +1,9 @@
 /**
  * 处理cascader-item中需要的参数
  */
-import { CascaderProps, UseCascaderItemCallback, CascaderItem } from '../src/cascader-types'
 import { ref, reactive, Ref } from 'vue'
 import { cloneDeep } from 'lodash-es'
+import { CascaderProps, UseCascaderItemCallback, CascaderItem } from '../src/cascader-types'
 
 export const useCascaderItem = (props?: CascaderProps, stopDefault?: Ref<boolean>, tagList?: CascaderItem[]): UseCascaderItemCallback => {
   /**
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
index d96fdb57..0d086c80 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
@@ -133,7 +133,7 @@ export const useMultiple = (cascaderItemNeedProps?: CascaderItemNeedType): UseCa
    * 父节点改变子节点check状态
    * @param node 节点
    */
-  const updateCheckStatusLoop = (node: CascaderItem, type: CheckedType,  ulIndex: number, status?: boolean,) => {
+  const updateCheckStatusLoop = (node: CascaderItem, type: CheckedType,  ulIndex: number, status?: boolean) => {
     if (node?.children?.length > 0) {
       node.children.forEach(item => {
         // 当需要改变checked时
diff --git a/packages/devui-vue/devui/cascader/src/cascader-types.ts b/packages/devui-vue/devui/cascader/src/cascader-types.ts
index 6dea93b3..869c87b4 100644
--- a/packages/devui-vue/devui/cascader/src/cascader-types.ts
+++ b/packages/devui-vue/devui/cascader/src/cascader-types.ts
@@ -106,17 +106,19 @@ export interface OptionsCallback {
   changeCascaderIndexs: (optionItem: CascaderItem, ulIndex: number) => void
 }
 
-type cascaderItemExtendsProps = 'trigger'
-export type PickCascader = Pick<CascaderProps, cascaderItemExtendsProps>
-export interface CascaderItemNeedType extends PickCascader {
-  valueCache: CascaderValueType
-  value: CascaderValueType
-  inputValueCache: Ref<string>
-  confirmInputValueFlg: Ref<boolean>
-  multiple: boolean
-  stopDefault: Ref<boolean>
-  activeIndexs: number[]
-  tagList: UnwrapNestedRefs<CascaderItem[]>
+// type cascaderItemExtendsProps = 'trigger'
+// export type PickCascader = Pick<CascaderProps, cascaderItemExtendsProps>
+// export interface CascaderItemNeedType extends PickCascader {
+  export interface CascaderItemNeedType {
+  valueCache?: CascaderValueType
+  trigger?: TriggerTypes
+  value?: CascaderValueType
+  inputValueCache?: Ref<string>
+  confirmInputValueFlg?: Ref<boolean>
+  multiple?: boolean
+  stopDefault?: Ref<boolean>
+  activeIndexs?: number[]
+  tagList?: UnwrapNestedRefs<CascaderItem[]>
 }
 export interface UseCascaderItemCallback {
   cascaderItemNeedProps: CascaderItemNeedType
@@ -126,14 +128,14 @@ export interface UseCascaderItemCallback {
 export type CheckedType = 'checked' | 'halfChecked'
 export interface UseCascaderMultipleCallback {
   // tagList: UnwrapNestedRefs<CascaderItem[]>
-  addTagList: (a: CascaderItem[], b: CascaderItem) => void
-  deleteTagList: (a: CascaderItem[], b: CascaderItem) => void
-  initTagList: (a: CascaderItem[]) => void
-  initMultipleCascaderItem: (a: number[], b: CascaderItem[], c: CascaderItem[]) => void
-  updateCheckOptionStatus: (a: CascaderItem, options: CaascaderOptionsType, ulIndex: number, tagList: CascaderItem[]) => void
-  initActiveIndexs: (a: CascaderValueType, b: CascaderItem[], c: number, d: number[]) => void
-  updateCheckStatusLoop: (a: CascaderItem, b: CheckedType, ulIndex: number, c?: boolean) => void
-  getParentNode: (a: string | number, b: [CascaderItem[]], c: number) => CascaderItem
-  updateParentNodeStatus: (a: CascaderItem, b: CaascaderOptionsType, c: number) => void
-  getInputValue: (a: string, b: CascaderItem[], c: Ref<string>, d?: boolean) => void
+  addTagList: (arr: CascaderItem[], singleItem: CascaderItem) => void
+  deleteTagList: (arr: CascaderItem[], singleItem: CascaderItem) => void
+  initTagList: (arr: CascaderItem[]) => void
+  initMultipleCascaderItem: (targetValues: number[], cascaderOptions: CascaderItem[], tagList: CascaderItem[]) => void
+  updateCheckOptionStatus: (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => void
+  initActiveIndexs: (values: CascaderValueType, currentOption: CascaderItem[], index: number, activeIndexs: number[]) => void
+  updateCheckStatusLoop: (node: CascaderItem, type: CheckedType,  ulIndex: number, status?: boolean) => void
+  getParentNode: (childValue: string | number, options: CaascaderOptionsType, ulIndex: number) => CascaderItem
+  updateParentNodeStatus: (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => void
+  getInputValue: (label: string, arr: CascaderItem[], inputValueCache: Ref<string>, showPath?: boolean) => void
 }
diff --git a/packages/devui-vue/docs/components/cascader/index.md b/packages/devui-vue/docs/components/cascader/index.md
index b4509c6c..78ba7ae2 100644
--- a/packages/devui-vue/docs/components/cascader/index.md
+++ b/packages/devui-vue/docs/components/cascader/index.md
@@ -402,7 +402,6 @@ export default defineComponent({
 interface CascaderItem {
   label: string;
   value: number | string;
-  isLeaf?: boolean;
   children?: CascaderItem[];
   disabled?: boolean;
   icon?: string;
-- 
Gitee


From 4981e8aad717d13784c01a8877ac16e9a2727be2 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Sat, 13 Nov 2021 11:00:05 +0800
Subject: [PATCH 17/18] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=A3=80?=
 =?UTF-8?q?=E8=A7=86=E6=84=8F=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts  | 2 +-
 .../devui-vue/devui/cascader/hooks/use-cascader-multiple.ts   | 2 +-
 packages/devui-vue/devui/cascader/index.ts                    | 2 +-
 packages/devui-vue/devui/cascader/src/cascader.tsx            | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
index bcc30d4b..603d7b4a 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
@@ -1,8 +1,8 @@
 /**
  * 处理cascader-item中需要的参数
  */
-import { ref, reactive, Ref } from 'vue'
 import { cloneDeep } from 'lodash-es'
+import { ref, reactive, Ref } from 'vue'
 import { CascaderProps, UseCascaderItemCallback, CascaderItem } from '../src/cascader-types'
 
 export const useCascaderItem = (props?: CascaderProps, stopDefault?: Ref<boolean>, tagList?: CascaderItem[]): UseCascaderItemCallback => {
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
index 0d086c80..537ee94c 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
@@ -1,9 +1,9 @@
 /**
  * 多选模式下的一些函数
  */
+import { Ref } from 'vue'
 import { CascaderItem, CascaderValueType, CaascaderOptionsType, UseCascaderMultipleCallback, CheckedType, CascaderItemNeedType } from '../src/cascader-types'
 // import { useCascaderItem } from './use-cascader-item'
-import { Ref } from 'vue'
 export const useMultiple = (cascaderItemNeedProps?: CascaderItemNeedType): UseCascaderMultipleCallback => {
   // const { cascaderItemNeedProps } = useCascaderItem()
   /**
diff --git a/packages/devui-vue/devui/cascader/index.ts b/packages/devui-vue/devui/cascader/index.ts
index 0bb14975..1e95f912 100644
--- a/packages/devui-vue/devui/cascader/index.ts
+++ b/packages/devui-vue/devui/cascader/index.ts
@@ -10,7 +10,7 @@ export { Cascader }
 export default {
   title: 'Cascader 级联菜单',
   category: '数据录入',
-  status: '10%',
+  status: '30%',
   install(app: App): void {
     app.use(Cascader as any)
   }
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index 540bb62f..4acd2ab0 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -1,4 +1,5 @@
-import { defineComponent, ref, reactive, watch, toRef, Ref } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { defineComponent, ref, reactive, watch, toRef } from 'vue'
 import { cascaderProps, CascaderItem, CascaderProps, CascaderValueType } from './cascader-types'
 import { getRootClass } from '../hooks/use-cascader-class'
 import { popupHandles } from '../hooks/use-cascader-popup'
@@ -8,7 +9,6 @@ import { useCascaderItem } from '../hooks/use-cascader-item'
 import { DMultipleBox } from '../components/cascader-multiple/index' 
 import { useMultiple } from '../hooks/use-cascader-multiple'
 import { useSingle } from '../hooks/use-cascader-single'
-import { cloneDeep } from 'lodash-es'
 import './cascader.scss'
 // import { UnwrapNestedRefs } from '@vue/reactivity'
 // type OptionsType = UnwrapNestedRefs<[CascaderItem[]]>
-- 
Gitee


From 4bca59b3dafbdbbb55d56b65672de61c85f4c56b Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Sat, 20 Nov 2021 22:02:26 +0800
Subject: [PATCH 18/18] refactor: refactor some code

---
 .../cascader-item/cascader-item-types.ts      |   5 -
 .../components/cascader-item/index.tsx        |  22 +-
 .../components/cascader-item/use-class.ts     |  21 --
 .../cascader-list/cascader-list-types.ts      |  47 ---
 .../components/cascader-list/index.scss       |   1 -
 .../components/cascader-list/index.tsx        |  13 +-
 .../components/cascader-list/use-class.ts     |  13 -
 .../components/cascader-multiple/index.tsx    |   6 +-
 .../components/cascader-multiple/use-type.ts  |   6 -
 .../components/cascader-tag/index.tsx         |   7 +-
 .../cascader/hooks/use-cascader-class.ts      |  31 +-
 .../cascader/hooks/use-cascader-multiple.ts   | 287 ++++++++----------
 .../cascader/hooks/use-cascader-popup.ts      |   4 +-
 .../cascader/hooks/use-cascader-single.ts     |  64 ++--
 .../cascader/hooks/use-cascader-style.ts      |  17 ++
 .../devui/cascader/src/cascader-types.ts      | 101 +++++-
 .../devui-vue/devui/cascader/src/cascader.tsx |  50 +--
 .../docs/components/cascader/index.md         |   8 +-
 18 files changed, 363 insertions(+), 340 deletions(-)
 delete mode 100644 packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts
 delete mode 100644 packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
 delete mode 100644 packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts
 delete mode 100644 packages/devui-vue/devui/cascader/components/cascader-list/use-class.ts
 delete mode 100644 packages/devui-vue/devui/cascader/components/cascader-multiple/use-type.ts
 create mode 100644 packages/devui-vue/devui/cascader/hooks/use-cascader-style.ts

diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts b/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts
deleted file mode 100644
index 6e7a13ca..00000000
--- a/packages/devui-vue/devui/cascader/components/cascader-item/cascader-item-types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ComputedRef } from 'vue'
-import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
-export interface UseClassNameType {
-  getRootClass: (props: CascaderItemPropsType) => ComputedRef
-}
diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
index 75ea916e..c221a86a 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.tsx
@@ -1,19 +1,17 @@
 import { computed, ref } from 'vue'
-import { useClassName } from './use-class'
-import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
-import { useSingle } from '../../hooks/use-cascader-single'
-import { useMultiple } from '../../hooks/use-cascader-multiple'
+import { CascaderItemPropsType } from '../../src/cascader-types'
+import { useListClassName } from '../../hooks/use-cascader-class'
+import { updateCheckOptionStatus } from '../../hooks/use-cascader-multiple'
+import { singleChoose } from '../../hooks/use-cascader-single'
 import './index.scss'
 export const DCascaderItem = (props: CascaderItemPropsType) => {
   // console.log('item index',props)
   const { cascaderItem, ulIndex, liIndex, cascaderItemNeedProps, cascaderOptions } = props
   const { multiple, stopDefault, valueCache, activeIndexs, trigger, confirmInputValueFlg, tagList} = cascaderItemNeedProps
   const isTriggerHover = trigger === 'hover'
-  const { singleChoose } = useSingle()
-  const { updateCheckOptionStatus } = useMultiple(cascaderItemNeedProps)
-  const { getRootClass } = useClassName()
+  const rootClasses = useListClassName(props)
+  const { updateStatus } = updateCheckOptionStatus(tagList)
   const disbaled = computed(() => cascaderItem?.disabled) // 当前项是否被禁用
-  const rootClasses = getRootClass(props)
   // 触发联动更新
   const updateValues = () => {
     if (stopDefault.value) return
@@ -21,7 +19,6 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
     activeIndexs.splice(ulIndex, activeIndexs.length - ulIndex)
     // 更新当前渲染视图的下标数组
     activeIndexs[ulIndex] = liIndex
-    // console.log('activeIndexs更新', activeIndexs)
     if (!multiple) { // 单选点击选项就更新，多选是通过点击checkbox触发数据更新
       singleChoose(ulIndex, valueCache, cascaderItem)
     }
@@ -43,12 +40,7 @@ export const DCascaderItem = (props: CascaderItemPropsType) => {
     }
   }
   const checkboxChange = () => {
-    updateCheckOptionStatus(cascaderItem, cascaderOptions, ulIndex, tagList)
-    // const parentNode = getParentNode(cascaderItem.value, cascaderOptions, ulIndex - 1)
-    // updateParentNodeStatus(parentNode, cascaderOptions, ulIndex - 1)
-    // if (!cascaderItem.children || cascaderItem?.children?.length === 0) {
-    //   confirmInputValueFlg.value = !confirmInputValueFlg.value
-    // }
+    updateStatus(cascaderItem, cascaderOptions, ulIndex)
   }
   return (
     <li class={rootClasses.value}>
diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts b/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
deleted file mode 100644
index 494496ee..00000000
--- a/packages/devui-vue/devui/cascader/components/cascader-item/use-class.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * 定义组件class
- */
-import { computed, ComputedRef } from 'vue';
-import { CascaderItemPropsType } from '../cascader-list/cascader-list-types'
-import { UseClassNameType } from './cascader-item-types'
-export const useClassName = (): UseClassNameType => {
-  const getRootClass = (props: CascaderItemPropsType): ComputedRef => {
-    const itemProps = props?.cascaderItemNeedProps
-    const isActive = itemProps?.valueCache[props.ulIndex] === props.cascaderItem?.value
-    const isDisabled = props.cascaderItem?.disabled
-    return computed(() => ({
-      'devui-cascader-li devui-dropdown-item': true,
-      'devui-leaf-active': isActive,
-      'disabled': isDisabled
-    }))
-  }
-  return {
-    getRootClass
-  }
-}
diff --git a/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts b/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts
deleted file mode 100644
index 854c87f1..00000000
--- a/packages/devui-vue/devui/cascader/components/cascader-list/cascader-list-types.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { PropType, ExtractPropTypes } from 'vue'
-import { CascaderItem, CascaderItemNeedType } from '../../src/cascader-types'
-export const cascaderulProps = {
-  /**
-   * 每个ul中的li
-   * @type {CascaderItem[]}
-   * @default []
-   */
-  cascaderItems: {
-    type: Array as PropType<CascaderItem[]>,
-    default: ():CascaderItem[] => ([{
-      label: '',
-      value: null
-    }]),
-  },
-  /**
-   * 当前选中的ul下标
-   * @type {Number}
-   * @default 0
-   */
-  ulIndex: {
-    type: Number,
-    default: 0
-  },
-  cascaderItemNeedProps: {
-    type: Object as PropType<CascaderItemNeedType>,
-    default: ():CascaderItemNeedType => ({})
-  },
-  stopDefault: {
-    type: Boolean,
-    default: false
-  },
-  cascaderOptions: {
-    type: Array as unknown as PropType<[CascaderItem[]]>,
-    default: ():[CascaderItem[]] => ([[{
-      label: '',
-      value: null
-    }]])
-  }
-}
-export type CascaderulProps = ExtractPropTypes<typeof cascaderulProps>
-
-export interface CascaderItemPropsType extends CascaderulProps {
-  cascaderItem: CascaderItem
-  liIndex: number
-  cascaderItemNeedProps: CascaderItemNeedType
-}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/components/cascader-list/index.scss b/packages/devui-vue/devui/cascader/components/cascader-list/index.scss
index 5c35c258..76a260c8 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-list/index.scss
+++ b/packages/devui-vue/devui/cascader/components/cascader-list/index.scss
@@ -3,7 +3,6 @@
 @import '../../../style/theme/font';
 
 .devui-cascader-ul {
-  width: 200px;
   height: 180px;
   background: $devui-connected-overlay-bg;
   display: block;
diff --git a/packages/devui-vue/devui/cascader/components/cascader-list/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-list/index.tsx
index 2c10267e..fb367f22 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-list/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-list/index.tsx
@@ -1,16 +1,19 @@
 import { defineComponent } from 'vue'
-import { getRootClass } from './use-class'
-import './index.scss'
-import { cascaderulProps, CascaderulProps } from './cascader-list-types'
+import { useUlClassName } from '../../hooks/use-cascader-class'
+import { useDropdownStyle } from '../../hooks/use-cascader-style'
+import { cascaderulProps, CascaderulProps } from '../../src/cascader-types'
+
 import { DCascaderItem } from '../cascader-item'
+import './index.scss'
 export default defineComponent({
   name: 'DCascaderList',
   props: cascaderulProps,
   setup(props: CascaderulProps) {
-    const rootClasses = getRootClass(props)
+    const ulClass = useUlClassName(props)
+    const ulStyle = useDropdownStyle(props)
     // console.log('props', props)
     return () => (
-      <ul class={rootClasses.value}>
+      <ul class={ulClass.value} style={ulStyle.dropdownWidth}>
         {
           props?.cascaderItems?.length > 0
           ? props.cascaderItems.map((item, index) => {
diff --git a/packages/devui-vue/devui/cascader/components/cascader-list/use-class.ts b/packages/devui-vue/devui/cascader/components/cascader-list/use-class.ts
deleted file mode 100644
index 67cdd5fd..00000000
--- a/packages/devui-vue/devui/cascader/components/cascader-list/use-class.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * 定义组件class
- */
- import { computed, ComputedRef } from 'vue';
- import { CascaderulProps } from './cascader-list-types'
-
- export const getRootClass = (props: CascaderulProps): ComputedRef => {
-   return computed(() => ({
-     'devui-cascader-ul': true,
-     'devui-drop-no-data': props?.cascaderItems?.length === 0
-   }))
- }
- 
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
index d181de15..932c4a3f 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.tsx
@@ -1,10 +1,10 @@
 /**
  * 多选模式下的内容框
  */
-import { DTag } from '../cascader-tag/'
-import { MultiplePropsType } from './use-type'
+import DTag from '../cascader-tag/'
+import { MultiplePropsType } from '../../src/cascader-types'
 import './index.scss'
-export const DMultipleBox = (props: MultiplePropsType) => {
+export default (props: MultiplePropsType) => {
   return (
     <div class="devui-tags-input">
       <div class="devui-tags-box">
diff --git a/packages/devui-vue/devui/cascader/components/cascader-multiple/use-type.ts b/packages/devui-vue/devui/cascader/components/cascader-multiple/use-type.ts
deleted file mode 100644
index b734aab1..00000000
--- a/packages/devui-vue/devui/cascader/components/cascader-multiple/use-type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { CascaderItem } from '../../src/cascader-types'
-
-export interface MultiplePropsType {
-  activeOptions: CascaderItem[]
-  placeholder: string
-}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
index 810d7cbb..8c4ff034 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
+++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.tsx
@@ -3,18 +3,17 @@
  * tag组件还未开发完成，所以暂时使用自定义组件
  */
 import { CascaderItem } from '../../src/cascader-types'
-import { useMultiple } from '../../hooks/use-cascader-multiple'
+import { multipleDeleteTag } from '../../hooks/use-cascader-multiple'
 import './index.scss'
 interface PropsType {
   tag: CascaderItem
   tagList: CascaderItem[]
 }
-export const DTag = (props: PropsType) => {
+export default (props: PropsType) => {
   const { tagList, tag } = props
-  const { deleteTagList } = useMultiple()
   const deleteCurrentTag = (e: Event) => {
     e.stopPropagation()
-    deleteTagList(tagList, tag)
+    multipleDeleteTag(tagList, tag)
   }
   return (
     <div class="devui-tag">
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-class.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-class.ts
index 2484742e..576dc61c 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-class.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-class.ts
@@ -2,12 +2,39 @@
  * 定义组件class
  */
 import { computed, ComputedRef, Ref } from 'vue';
-import { CascaderProps } from '../src/cascader-types'
+import { CascaderProps, CascaderulProps, CascaderItemPropsType } from '../src/cascader-types'
+// import { UseClassNameType } from '../components/cascader-item/cascader-item-types'
 
-export const getRootClass = (props: CascaderProps, menuShow: Ref<boolean> ): ComputedRef => {
+// 根节点class
+export const useRootClassName = (props: CascaderProps, menuShow: Ref<boolean> ): ComputedRef => {
   return computed(() => ({
     'devui-cascader devui-dropdown devui-dropdown-animation': true,
     'devui-dropdown__open': menuShow.value,
     'devui-cascader__disbaled': props.disabled,
   }))
 }
+
+// 弹出层项 class
+export const useListClassName = (props: CascaderItemPropsType): ComputedRef => {
+  const itemProps = props?.cascaderItemNeedProps
+  const isActive = itemProps?.valueCache[props.ulIndex] === props.cascaderItem?.value
+  const isDisabled = props.cascaderItem?.disabled
+  return computed(() => ({
+    'devui-cascader-li devui-dropdown-item': true,
+    'devui-leaf-active': isActive,
+    'disabled': isDisabled
+  }))
+}
+
+// 弹出层列 class
+export const useUlClassName = (props: CascaderulProps): ComputedRef => {
+  return computed(() => ({
+    'devui-cascader-ul': true,
+    'devui-drop-no-data': props?.cascaderItems?.length === 0
+  }))
+}
+
+// 为弹出层打开添加全局class
+export const dropdownOpenClass = (status: boolean): string => {
+  return status ? 'devui-drop-menu-wrapper' : ''
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
index 537ee94c..4a2caaf4 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-multiple.ts
@@ -1,79 +1,71 @@
 /**
- * 多选模式下的一些函数
+ * 多选模式
  */
-import { Ref } from 'vue'
-import { CascaderItem, CascaderValueType, CaascaderOptionsType, UseCascaderMultipleCallback, CheckedType, CascaderItemNeedType } from '../src/cascader-types'
-// import { useCascaderItem } from './use-cascader-item'
-export const useMultiple = (cascaderItemNeedProps?: CascaderItemNeedType): UseCascaderMultipleCallback => {
-  // const { cascaderItemNeedProps } = useCascaderItem()
-  /**
-   * 下拉框中输出内容
-   * 需要判断是否是多选
-   * 需要判断单选模式下是否showPath
-   * @param label 当前current的内容
-   * @param arr 当前选中项current的children数组
-   */
-   const getInputValue = (label: string, arr: CascaderItem[], inputValueCache: Ref<string>, showPath?: boolean) => {
-    //  console.log('输出tag')
-    if (!showPath) {
-      inputValueCache.value = label
-    } else {
-      inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
-    }
-  }
-  /**
-   * 添加选中项
-   * @param arr 当前选中的数组集合
-   * @param singleItem 当前选中项
-   * 
-   */
-  const addTagList = (arr: CascaderItem[], singleItem: CascaderItem) => {
-    arr.push(singleItem)
-  }
-  /**
-   * 删除选中项
-   * @param arr 当前选中的数组集合
-   * @param singleItem 当前选中项
-   * 
-   */
-  const deleteTagList = (arr: CascaderItem[], singleItem: CascaderItem) => {
-    // console.log(arr)
-    const i = arr.findIndex(item => item.value === singleItem.value)
-    arr.splice(i, 1)
-  }
-  /**
-   * 初始化选中项，将选中的数组集合置为空
-   * @param arr 当前选中的数组集合
-   */
-  const initTagList = (arr: CascaderItem[]) => {
-    arr.splice(0, arr.length)
-  }
+import { CascaderItem, UpdateStatusCallback, CaascaderOptionsType, CheckedType, CascaderItemNeedType } from '../src/cascader-types'
+
+/**
+ * 初始化选中项，将选中的数组集合置为空
+ * @param tagList 前被选中的tagList集合
+ */
+export const initTagList = (tagList: CascaderItem[]): void => {
+  tagList.splice(0, tagList.length)
+}
+/**
+ * 添加选中项
+ * @param tagList 当前被选中的tagList集合
+ * @param singleItem 当前选中项
+ * 
+ */
+export const multipleAddTag = (tagList: CascaderItem[], singleItem: CascaderItem): void => {
+  tagList.push(singleItem)
+}
 
-  // const deleteUncheckedValues = (value, index) => {
-  //   console.log(value)
-  //   value.splice(index, value.length - 1)
-  // }
+/**
+ * 删除选中项
+ * @param tagList 前被选中的tagList集合
+ * @param singleItem 当前选中项
+ * 
+ */
+export const multipleDeleteTag = (tagList: CascaderItem[], singleItem: CascaderItem): void => {
+  // console.log(arr)
+  const i = tagList.findIndex(item => item.value === singleItem.value)
+  tagList.splice(i, 1)
+}
 
-  /**
-   * 多选模式初始化选中的节点
-   */
-  const initMultipleCascaderItem = (targetValues: number[], cascaderOptions: CascaderItem[], tagList: CascaderItem[]) => {
-    findNextColumn(targetValues, cascaderOptions, 0, tagList)
-  }
-  const findNextColumn = (targetValues, options, index, tagList) => {
-    let targetNode = options.find(t => t.value === targetValues[index]) // 根据value获取当前选中的项
-    if (targetNode?.children?.length > 0) {
-      index += 1 // 进入下一级
-      targetNode = setChildrenParent(targetNode) // 为children设置parent
-      findNextColumn(targetValues, targetNode.children, index, tagList)
-    } else {
-      addTagList(tagList, targetNode) // 初始化tag
-      targetNode['checked'] = true // 此时已经是最终结点了，从最终结点往上寻找父节点更新状态
-      findChildrenCheckedStatusToUpdateParent(targetNode?.parent)
-    }
-  }
+/**
+ * 多选模式初始化选中的节点
+ * @param targetValues 多选模式下的value数组
+ * @param rootNode 选项的第一列
+ * @param tagList 选中的tag集合
+ */
+export const initMultipleCascaderItem = (targetValues: number[], rootColumn: CascaderItem[], tagList: CascaderItem[]): void => {
+  findNextColumn(targetValues, rootColumn, 0, tagList)
+}
 
-  /**
+/**
+ * 根据values集合递归获取选中的节点
+ * @param targetValues 多选模式下的value数组
+ * @param rootNode 选项的第一列
+ * @param index 当前初始化的列下标
+ * @param tagList 选中的tag集合
+ */
+const findNextColumn = (targetValues: number[], options: CascaderItem[], index: number, tagList: CascaderItem[]): void => {
+  let targetNode = options.find(t => t.value === targetValues[index]) // 根据value获取当前选中的项
+  if (targetNode?.children?.length > 0) { // 递归的限制条件，是否还有子级
+    index += 1 // 进入下一级
+    targetNode = setChildrenParent(targetNode) // 为children设置parent，方便后续通过child使用parent
+    findNextColumn(targetValues, targetNode.children, index, tagList)
+  } else { // 没有子节点说明此时已经是最终结点了
+    multipleAddTag(tagList, targetNode) // 新增tag
+
+    targetNode['checked'] = true
+    
+    // 从最终结点往上寻找父节点更新状态
+    // 通过父亲节点查询所有子节点状态从而更新父节点状态
+    findChildrenCheckedStatusToUpdateParent(targetNode?.parent)
+  }
+}
+ /**
    * 
    * @param parentNode 父节点
    * @returns parentNode 父节点
@@ -85,33 +77,27 @@ export const useMultiple = (cascaderItemNeedProps?: CascaderItemNeedType): UseCa
     return parentNode
   }
 
+export const updateCheckOptionStatus = (tagList: CascaderItem[]): UpdateStatusCallback => {
   /**
-   * 多选模式下当有默认选中值时，初始化视图选中状态
-   * 通过value集合获取下标集合
-   * @param values 默认选中的value集合
-   * @param currentOption 当前列
-   * @param index values数组的起始项，最开始为0
-   * @param activeIndexs 渲染视图所需要的下标集合
+   * 更新当前选中状态
+   * @param node 当前结点
+   * @param options column的集合
+   * @param ulIndex 当前column的下标
    */
-  const initActiveIndexs = (values: CascaderValueType, currentOption: CascaderItem[], index: number, activeIndexs: number[]) => {
-    let nextOption = null
-    for (let i = 0; i < currentOption.length; i++) {
-      if (currentOption[i]?.value === values[index]) {
-        nextOption = currentOption[i]?.children
-        activeIndexs[index] = i
-        break
-      }
-    }
-    if (index < values.length - 1 && nextOption) {
-      index += 1
-      initActiveIndexs(values, nextOption, index, activeIndexs)
-    }
+  const updateStatus = (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => {
+    // 更新当前点击的node
+    updateCurNodeStatus(node, ulIndex)
+    ulIndex -= 1
+    // const parentNode = getParentNode(node.value, options, ulIndex)
+    const parentNode = node?.parent
+    updateParentNodeStatus(parentNode, options, ulIndex)
   }
-
   /**
-   * 多选模式点击checkbox
+   * 更新当前选中的结点状态
+   * @param node 当前结点
+   * @param ulIndex 当前column的下标
    */
-  const updateCheckOptionStatus = (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number): void => {
+  const updateCurNodeStatus = (node: CascaderItem, ulIndex: number) => {
     // 如果是半选状态，更新为false，其他状态则更新为与checked相反
     if (node?.halfChecked) { // 更新半选状态
       node['halfChecked'] = false
@@ -119,21 +105,15 @@ export const useMultiple = (cascaderItemNeedProps?: CascaderItemNeedType): UseCa
       updateCheckStatusLoop(node, 'halfChecked', ulIndex)
     } else {
       node['checked'] = !node.checked
-      // if (node['checked'] === false) {
-      //   deleteTagList(tagList, node)
-      // }
       // 更新是否选中状态
       updateCheckStatusLoop(node, 'checked', ulIndex, node.checked)
     }
-    ulIndex -= 1
-    const parentNode = getParentNode(node.value, options, ulIndex)
-    updateParentNodeStatus(parentNode, options, ulIndex)
   }
   /**
    * 父节点改变子节点check状态
    * @param node 节点
    */
-  const updateCheckStatusLoop = (node: CascaderItem, type: CheckedType,  ulIndex: number, status?: boolean) => {
+   const updateCheckStatusLoop = (node: CascaderItem, type: CheckedType,  ulIndex: number, status?: boolean) => {
     if (node?.children?.length > 0) {
       node.children.forEach(item => {
         // 当需要改变checked时
@@ -155,66 +135,57 @@ export const useMultiple = (cascaderItemNeedProps?: CascaderItemNeedType): UseCa
     } else {
       // 增加或者删除选中的项
       !node.checked
-      ? deleteTagList(cascaderItemNeedProps.tagList, node)
-      : addTagList(cascaderItemNeedProps.tagList, node)
-
-      // TODO 更新value
-      // deleteUncheckedValues(cascaderItemNeedProps.value, ulIndex)
-    }
-  }
-  /**
-   * 子节点获取父节点
-   */
-  const getParentNode = (childValue: string | number, options: CaascaderOptionsType, ulIndex: number): CascaderItem => {
-    if (ulIndex < 0) return
-    const queue = [...options[ulIndex]]
-    let cur: CascaderItem
-    while(queue.length) {
-      cur = queue.shift()
-      if (cur.children && cur.children.find(t => t.value === childValue)) {
-        break
-      } else if (cur.children) {
-        queue.push(...cur.children)
-      }
-    }
-    return cur
-  }
-  /**
-   * 更新父节点
-   */
-   const findChildrenCheckedStatusToUpdateParent = (node) => {
-    const checkedChild = node?.children?.find(t => t['checked'])
-    const halfcheckedChild = node?.children?.find(t => t['halfChecked'])
-    const uncheckedChild = node?.children?.find(t => !t['halfChecked'] && !t['checked'])
-    if (halfcheckedChild || (checkedChild && uncheckedChild)) {
-      node['checked'] = false
-      node['halfChecked'] = true
-    } else if (!checkedChild && !halfcheckedChild) {
-      node['checked'] = false
-      node['halfChecked'] = false
-    } else {
-      node['checked'] = true
-      node['halfChecked'] = false
+      ? multipleDeleteTag(tagList, node)
+      : multipleAddTag(tagList, node)
     }
   }
-  const updateParentNodeStatus = (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => {
-    if (ulIndex < 0) return
-    findChildrenCheckedStatusToUpdateParent(node)
-    // console.log('childNode', node, ulIndex)
-    ulIndex -= 1
-    const parentNode = getParentNode(node.value, options, ulIndex)
-    updateParentNodeStatus(parentNode, options, ulIndex)
-  }
   return {
-    getInputValue,
-    addTagList,
-    deleteTagList,
-    initTagList,
-    updateCheckOptionStatus,
-    initMultipleCascaderItem,
-    initActiveIndexs,
-    updateCheckStatusLoop,
-    updateParentNodeStatus,
-    getParentNode,
+    updateStatus,
+  }
+}
+/**
+ * 子节点获取父节点
+ * 已在子节点创建父节点，此段代码不再使用
+ */
+// const getParentNode = (childValue: string | number, options: CaascaderOptionsType, ulIndex: number): CascaderItem => {
+//   if (ulIndex < 0) return
+//   const queue = [...options[ulIndex]]
+//   let cur: CascaderItem
+//   while(queue.length) {
+//     cur = queue.shift()
+//     if (cur.children && cur.children.find(t => t.value === childValue)) {
+//       break
+//     } else if (cur.children) {
+//       queue.push(...cur.children)
+//     }
+//   }
+//   return cur
+// }
+
+/**
+ * 根据当前节点的子节点更新当前节点状态
+ * @param node - 当前节点
+ */
+  const findChildrenCheckedStatusToUpdateParent = (node) => {
+  const checkedChild = node?.children?.find(t => t['checked'])
+  const halfcheckedChild = node?.children?.find(t => t['halfChecked'])
+  const uncheckedChild = node?.children?.find(t => !t['halfChecked'] && !t['checked'])
+  if (halfcheckedChild || (checkedChild && uncheckedChild)) {
+    node['checked'] = false
+    node['halfChecked'] = true
+  } else if (!checkedChild && !halfcheckedChild) {
+    node['checked'] = false
+    node['halfChecked'] = false
+  } else {
+    node['checked'] = true
+    node['halfChecked'] = false
   }
 }
+const updateParentNodeStatus = (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => {
+  if (ulIndex < 0) return
+  findChildrenCheckedStatusToUpdateParent(node)
+  ulIndex -= 1
+  // const parentNode = getParentNode(node.value, options, ulIndex)
+  const parentNode = node?.parent
+  updateParentNodeStatus(parentNode, options, ulIndex)
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-popup.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-popup.ts
index 8e1b4e25..2f4bb5f1 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-popup.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-popup.ts
@@ -3,7 +3,7 @@
  */
 import { ref, watch, computed } from 'vue';
 import { PopupTypes, CascaderProps } from '../src/cascader-types'
-
+import { dropdownOpenClass } from './use-cascader-class'
 export const popupHandles = (props: CascaderProps): PopupTypes => {
   const menuShow = ref(false)
   const menuOpenClass = ref('')
@@ -20,7 +20,7 @@ export const popupHandles = (props: CascaderProps): PopupTypes => {
   }
 
   watch(menuShow, (status) => {
-    menuOpenClass.value = status ? 'devui-drop-menu-wrapper' : ''
+    menuOpenClass.value = dropdownOpenClass(status)
   })
 
   return {
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts
index 8039ca69..52409fa9 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-single.ts
@@ -1,24 +1,48 @@
+/**
+ * 单选模式
+ * */ 
 import { Ref } from 'vue'
-import { CascaderValueType, CascaderItem } from '../src/cascader-types'
-export const useSingle = () => {
-  /**
-   * 单选模式初始化
-   */
-  const initSingleIptValue = (inputValueCache: Ref<string>) => {
-    inputValueCache.value = ''
+import { CascaderItem, CascaderValueType } from '../src/cascader-types'
+/**
+ * 初始化打开时的视图选中状态
+ * 通过value集合获取下标集合
+ * @param values 选中的value集合
+ * @param curColumn 当前列
+ * @param index values数组的起始项，最开始为0
+ * @param activeIndexs 当前渲染到视图列的下标集合
+ */
+export const initActiveIndexs = (values: CascaderValueType, curColumn: CascaderItem[], index: number, activeIndexs: number[]): void => {
+  let nextOption = null
+  for (let i = 0; i < curColumn.length; i++) {
+    if (curColumn[i]?.value === values[index]) {
+      nextOption = curColumn[i]?.children
+      activeIndexs[index] = i
+      break
+    }
   }
-
-  /**
-   * 单选模式选中
-   */
-  const singleChoose = (ulIndex: number, valueCache: CascaderValueType, cascaderItem: CascaderItem) => {
-      // 删除当前联动级之后的所有级
-      valueCache.splice(ulIndex, valueCache.length - ulIndex)
-      // 更新当前active的value数组
-      valueCache[ulIndex] = cascaderItem?.value as number
-  }
-  return {
-    initSingleIptValue,
-    singleChoose
+  if (index < values.length - 1 && nextOption) {
+    index += 1
+    initActiveIndexs(values, nextOption, index, activeIndexs)
   }
+}
+
+/**
+ * 缓存输入框内容
+ * @param inputValueCache 缓存的输入框内容，当最终确定时输出内容
+ */
+export const initSingleIptValue = (inputValueCache: Ref<string>): void => {
+  inputValueCache.value = ''
+}
+
+/**
+ * 单选选中
+ * @param ulIndex 当前操作的列
+ * @param valueCache 缓存的当前操作列的value集合
+ * @param cascaderItem 当前操作项
+ */
+export const singleChoose = (ulIndex: number, valueCache: CascaderValueType, cascaderItem: CascaderItem): void => {
+  // 删除当前联动级之后的所有级
+  valueCache.splice(ulIndex, valueCache.length - ulIndex)
+  // 更新当前active的value数组
+  valueCache[ulIndex] = cascaderItem?.value as number
 }
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-style.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-style.ts
new file mode 100644
index 00000000..e2374e98
--- /dev/null
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-style.ts
@@ -0,0 +1,17 @@
+/**
+ * 定义组件 style
+ */
+import { CascaderProps, RootStyleFeedback, CascaderulProps, DropdownStyleFeedback } from '../src/cascader-types'
+// 根节点样式
+export const useRootStyle = (props: CascaderProps): RootStyleFeedback => {
+  return {
+    inputWidth: `width: ${props.width}px`,
+  }
+}
+
+// 弹出层样式
+export const useDropdownStyle = (props: CascaderulProps): DropdownStyleFeedback => {
+  return {
+    dropdownWidth: `width: ${props?.dropdownWidth}px`
+  }
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/src/cascader-types.ts b/packages/devui-vue/devui/cascader/src/cascader-types.ts
index 869c87b4..f88ae148 100644
--- a/packages/devui-vue/devui/cascader/src/cascader-types.ts
+++ b/packages/devui-vue/devui/cascader/src/cascader-types.ts
@@ -31,6 +31,24 @@ export const cascaderProps = {
     type: String as PropType<TriggerTypes>,
     default: 'hover'
   },
+  /**
+   * 可选，单位 px，用于控制组件输入框宽度和下拉的宽度
+   * @type { Number | String }
+   * @default 200
+   */
+  width: {
+    type: Number || String,
+    default: 200
+  },
+  /**
+   * 可选，单位 px，控制下拉列表的宽度，默认和组件输入框 width 相等
+   * @type { Number | String }
+   * @default 200
+   */
+   dropdownWidth: {
+    type: Number || String,
+    default: 200
+  },
   /**
    * 必选，级联器的菜单信息
    * @type {CascaderItem[]}
@@ -126,16 +144,75 @@ export interface UseCascaderItemCallback {
 }
 
 export type CheckedType = 'checked' | 'halfChecked'
-export interface UseCascaderMultipleCallback {
-  // tagList: UnwrapNestedRefs<CascaderItem[]>
-  addTagList: (arr: CascaderItem[], singleItem: CascaderItem) => void
-  deleteTagList: (arr: CascaderItem[], singleItem: CascaderItem) => void
-  initTagList: (arr: CascaderItem[]) => void
-  initMultipleCascaderItem: (targetValues: number[], cascaderOptions: CascaderItem[], tagList: CascaderItem[]) => void
-  updateCheckOptionStatus: (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => void
-  initActiveIndexs: (values: CascaderValueType, currentOption: CascaderItem[], index: number, activeIndexs: number[]) => void
-  updateCheckStatusLoop: (node: CascaderItem, type: CheckedType,  ulIndex: number, status?: boolean) => void
-  getParentNode: (childValue: string | number, options: CaascaderOptionsType, ulIndex: number) => CascaderItem
-  updateParentNodeStatus: (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => void
-  getInputValue: (label: string, arr: CascaderItem[], inputValueCache: Ref<string>, showPath?: boolean) => void
+
+export interface RootStyleFeedback {
+  inputWidth: string
 }
+
+export const cascaderulProps = {
+  /**
+   * 每个ul中的li
+   * @type {CascaderItem[]}
+   * @default []
+   */
+  cascaderItems: {
+    type: Array as PropType<CascaderItem[]>,
+    default: ():CascaderItem[] => ([{
+      label: '',
+      value: null
+    }]),
+  },
+  /**
+   * 可选，单位 px，控制下拉列表的宽度，默认和组件输入框 width 相等
+   * @type { Number | String }
+   * @default 200
+   */
+   dropdownWidth: {
+    type: Number || String,
+    default: 200
+  },
+  /**
+   * 当前选中的ul下标
+   * @type {Number}
+   * @default 0
+   */
+  ulIndex: {
+    type: Number,
+    default: 0
+  },
+  cascaderItemNeedProps: {
+    type: Object as PropType<CascaderItemNeedType>,
+    default: ():CascaderItemNeedType => ({})
+  },
+  stopDefault: {
+    type: Boolean,
+    default: false
+  },
+  cascaderOptions: {
+    type: Array as unknown as PropType<[CascaderItem[]]>,
+    default: ():[CascaderItem[]] => ([[{
+      label: '',
+      value: null
+    }]])
+  }
+}
+export type CascaderulProps = ExtractPropTypes<typeof cascaderulProps>
+
+export interface CascaderItemPropsType extends CascaderulProps {
+  cascaderItem: CascaderItem
+  liIndex: number
+  cascaderItemNeedProps: CascaderItemNeedType
+}
+
+export interface DropdownStyleFeedback {
+  dropdownWidth: string
+}
+
+export interface MultiplePropsType {
+  activeOptions: CascaderItem[]
+  placeholder: string
+}
+
+export interface UpdateStatusCallback {
+  updateStatus: (node: CascaderItem, options: CaascaderOptionsType, ulIndex: number) => void
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index 4acd2ab0..2cc6e437 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -1,18 +1,20 @@
+// 公共库
 import { cloneDeep } from 'lodash-es'
-import { defineComponent, ref, reactive, watch, toRef } from 'vue'
-import { cascaderProps, CascaderItem, CascaderProps, CascaderValueType } from './cascader-types'
-import { getRootClass } from '../hooks/use-cascader-class'
-import { popupHandles } from '../hooks/use-cascader-popup'
+import { defineComponent, ref, Ref, reactive, watch, toRef } from 'vue'
+
+// 组件
 import DCascaderList from '../components/cascader-list'
-// import { optionsHandles } from '../hooks/use-cascader-options'
+import DMultipleBox from '../components/cascader-multiple/index' 
+
+// 事件
+import { cascaderProps, CascaderItem, CascaderProps, CascaderValueType } from './cascader-types'
 import { useCascaderItem } from '../hooks/use-cascader-item'
-import { DMultipleBox } from '../components/cascader-multiple/index' 
-import { useMultiple } from '../hooks/use-cascader-multiple'
-import { useSingle } from '../hooks/use-cascader-single'
+import { useRootClassName } from '../hooks/use-cascader-class'
+import { useRootStyle } from '../hooks/use-cascader-style'
+import { popupHandles } from '../hooks/use-cascader-popup'
+import { initMultipleCascaderItem, initTagList } from '../hooks/use-cascader-multiple'
+import { initSingleIptValue, initActiveIndexs } from '../hooks/use-cascader-single'
 import './cascader.scss'
-// import { UnwrapNestedRefs } from '@vue/reactivity'
-// type OptionsType = UnwrapNestedRefs<[CascaderItem[]]>
-
 export default defineComponent({
   name: 'DCascader',
   props: cascaderProps,
@@ -22,9 +24,9 @@ export default defineComponent({
     const multiple = toRef(props, 'multiple')
     const inputValue = ref('')
     const tagList = reactive<CascaderItem[]>([]) // 多选模式下选中的值数组，用于生成tag
-    const { initSingleIptValue } = useSingle()
+    const rootStyle = useRootStyle(props)
     let initIptValue = props.value.length > 0 ? true : false // 有value默认值时，初始化输出内容
-
+    
     const position = reactive({
       originX: 'left',
       originY: 'bottom',
@@ -34,11 +36,16 @@ export default defineComponent({
     // popup弹出层
     const { menuShow, menuOpenClass, openPopup, stopDefault, updateStopDefaultType } = popupHandles(props)
     // 配置class
-    const rootClasses = getRootClass(props, menuShow)
+    const rootClasses = useRootClassName(props, menuShow)
     // 传递给cascaderItem的props
     const { cascaderItemNeedProps } = useCascaderItem(props, stopDefault, tagList)
-    const { initTagList, initMultipleCascaderItem, initActiveIndexs, getInputValue } = useMultiple(cascaderItemNeedProps)
-
+    const getInputValue = (label: string, arr: CascaderItem[], inputValueCache: Ref<string>, showPath?: boolean) => {
+      if (!showPath) {
+        inputValueCache.value = label
+      } else {
+        inputValueCache.value += (label + (arr?.length > 0 ? ' / ' : ''))
+      }
+    }
     /**
      * 控制视图更新
      * 注意视图更新不区分单选或者多选
@@ -83,9 +90,9 @@ export default defineComponent({
         }
       } else {
         // 多选模式
+        const rootColumn = cascaderOptions[0] || [] // 第一列
         value.forEach((targetValue) => {
-          // console.log(tagList)
-          initMultipleCascaderItem(targetValue, cascaderOptions[0], tagList)
+          initMultipleCascaderItem(targetValue, rootColumn, tagList)
         })
       }
     }
@@ -119,7 +126,7 @@ export default defineComponent({
       // 更新值
       updateCascaderValue(cascaderItemNeedProps.value, cascaderOptions[0], 0)
       inputValue.value = cascaderItemNeedProps.inputValueCache.value
-      // 因为初始化了value，所以默认回显视图的选中态
+      // 单选模式默认回显视图的选中态
       // 多选模式不默认视图打开状态，因为选中了太多个，无法确定展示哪一种选中态
       if (initIptValue && !multiple.value) {
         initActiveIndexs(props.value, cascaderOptions[0], 0, cascaderItemNeedProps.activeIndexs)
@@ -131,7 +138,7 @@ export default defineComponent({
 
     return () => (
       <>
-        <div class={rootClasses.value} onClick={openPopup} ref={origin} {...ctx.attrs}>
+        <div class={rootClasses.value} style={rootStyle.inputWidth} onClick={openPopup} ref={origin} {...ctx.attrs}>
           { multiple.value
             ? <DMultipleBox placeholder={props.placeholder} activeOptions={tagList}></DMultipleBox>
             : <d-input
@@ -144,7 +151,7 @@ export default defineComponent({
             <d-icon name="select-arrow" size="12px"></d-icon>
           </div>
         </div>
-        <d-flexible-overlay origin={origin} v-model={[menuShow.value, 'visible']} position={position}>
+        <d-flexible-overlay origin={origin} backgroundStyle={'background: transparent'} v-model={[menuShow.value, 'visible']} position={position}>
           <div class="devui-drop-menu-animation">
             <div class={`${menuOpenClass.value} devui-dropdown-menu`}>
               {cascaderOptions.map((item, index) => {
@@ -153,6 +160,7 @@ export default defineComponent({
                   ul-index={index}
                   cascaderItemNeedProps={cascaderItemNeedProps}
                   cascaderOptions={cascaderOptions}
+                  dropdownWidth={props.dropdownWidth}
                   {...props}
                 ></DCascaderList>
               })}
diff --git a/packages/devui-vue/docs/components/cascader/index.md b/packages/devui-vue/docs/components/cascader/index.md
index 78ba7ae2..e124bc66 100644
--- a/packages/devui-vue/docs/components/cascader/index.md
+++ b/packages/devui-vue/docs/components/cascader/index.md
@@ -242,13 +242,10 @@ export default defineComponent({
     :options="options"
     :value="value1"
     placeholder="请选择"
-    style="width: 200px"
     trigger="click"
     :width="300"
-    :dropdownWidth="200"
+    :dropdownWidth="300"
     :multiple="true"
-    :allowClear="true"
-    @toggleEvent="onToggleChange"
   ></d-cascader>
 </template>
 <script>
@@ -390,7 +387,8 @@ export default defineComponent({
 | disabled    | `boolean` |	false |		可选，级联器是否禁用 |  [基本用法](#基本用法) | |
 | value    | `number[] \| [number[]]` |	[] |		可选，单选时为`number[]`，多选时为`[number[]]`，选中项的value值集合 |  [基本用法](#基本用法) | |
 | multiple    | `boolean` |	false |	可选，级联器是否开启多选模式，开启后为 checkbox 选择 |  [基本用法](#多选模式) | |
-| disabled   | `boolean` | false | 可选，级联器是否禁用 |  [基本用法](#基本用法) | |
+| width   | `number \| string` | 200 | 可选，单位 px，用于控制组件输入框宽度和下拉的宽度 |  [基本用法](#多选模式) | |
+| dropdownWidth   | `number \| string` | 200 | 可选，单位 px，控制下拉列表的宽度，默认和组件输入框 width 相等 |  [基本用法](#多选模式) | |
 
 
 ### 接口 & 类型定义
-- 
Gitee