From b721d44190cdb7e6f51f0a74dd61e8ad8e943939 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 2 Oct 2021 17:10:59 +0800 Subject: [PATCH 1/6] feat: init cascader --- .../components/cascader-item/index.scss | 22 ++++++ .../components/cascader-item/index.tsx | 21 ++++++ .../components/cascader-item/use-class.ts | 11 +++ .../cascader-list/cascader-list-types.ts | 23 ++++++ .../components/cascader-list/index.scss | 14 ++++ .../components/cascader-list/index.tsx | 19 +++++ .../components/cascader-list/use-class.ts | 11 +++ devui/cascader/hooks/use-cascader-class.ts | 16 +++++ devui/cascader/hooks/use-cascader-options.ts | 29 ++++++++ devui/cascader/hooks/use-cascader-popup.ts | 31 ++++++++ devui/cascader/index.ts | 18 +++++ devui/cascader/src/cascader-types.ts | 64 +++++++++++++++++ devui/cascader/src/cascader.scss | 71 +++++++++++++++++++ devui/cascader/src/cascader.tsx | 52 ++++++++++++++ 14 files changed, 402 insertions(+) create mode 100644 devui/cascader/components/cascader-item/index.scss create mode 100644 devui/cascader/components/cascader-item/index.tsx create mode 100644 devui/cascader/components/cascader-item/use-class.ts create mode 100644 devui/cascader/components/cascader-list/cascader-list-types.ts create mode 100644 devui/cascader/components/cascader-list/index.scss create mode 100644 devui/cascader/components/cascader-list/index.tsx create mode 100644 devui/cascader/components/cascader-list/use-class.ts create mode 100644 devui/cascader/hooks/use-cascader-class.ts create mode 100644 devui/cascader/hooks/use-cascader-options.ts create mode 100644 devui/cascader/hooks/use-cascader-popup.ts create mode 100644 devui/cascader/index.ts create mode 100644 devui/cascader/src/cascader-types.ts create mode 100644 devui/cascader/src/cascader.scss create mode 100644 devui/cascader/src/cascader.tsx diff --git a/devui/cascader/components/cascader-item/index.scss b/devui/cascader/components/cascader-item/index.scss new file mode 100644 index 00000000..459a9136 --- /dev/null +++ b/devui/cascader/components/cascader-item/index.scss @@ -0,0 +1,22 @@ +@import '../../../style/mixins/flex'; +@import '../../../style/theme/color'; +@import '../../../style/core/font'; + +.devui-cascader-li { + &.devui-dropdown-item { + height: 32px; + padding: 8px 12px; + color: $devui-text; + cursor: pointer; + @include flex(flex-start); + } + + .dropdown-item-label { + display: inline-block; + flex: 1; + width: 0; + overflow: hidden; + text-overflow: ellipsis; + font-size: $devui-font-size; + } +} diff --git a/devui/cascader/components/cascader-item/index.tsx b/devui/cascader/components/cascader-item/index.tsx new file mode 100644 index 00000000..5182dd22 --- /dev/null +++ b/devui/cascader/components/cascader-item/index.tsx @@ -0,0 +1,21 @@ +import { getRootClass } from './use-class' +import { optionsHandles } from '../../hooks/use-cascader-options' +import './index.scss' +export const DCascaderItem = (props) => { + const { cascaderli, ulIndex } = props + const { changeCascaderIndexs } = optionsHandles() + const rootClasses = getRootClass() + const mouseHover = () => { + changeCascaderIndexs(cascaderli, ulIndex) + } + return ( +
  • +
    + { cascaderli.label } +
    + { + cascaderli?.children?.length > 0 && + } +
    • + ) +} diff --git a/devui/cascader/components/cascader-item/use-class.ts b/devui/cascader/components/cascader-item/use-class.ts new file mode 100644 index 00000000..5a5ec3e2 --- /dev/null +++ b/devui/cascader/components/cascader-item/use-class.ts @@ -0,0 +1,11 @@ +/** + * 定义组件class + */ + import { computed, ComputedRef } from 'vue'; + + export const getRootClass = (): ComputedRef => { + return computed(() => ({ + 'devui-cascader-li devui-dropdown-item': true, + })) + } + \ 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 new file mode 100644 index 00000000..1c508b8e --- /dev/null +++ b/devui/cascader/components/cascader-list/cascader-list-types.ts @@ -0,0 +1,23 @@ +import type { PropType, ExtractPropTypes } from 'vue' +import { CascaderItem } from '../../src/cascader-types' +export const cascaderulProps = { + /** + * 每个ul中的li + * @type {CascaderItem[]} + * @default [] + */ + cascaderlis: { + type: Object as PropType, + default: [], + }, + /** + * 当前选中的ul下标 + * @type {Number} + * @default 0 + */ + ulIndex: { + type: Number, + default: 0 + } +} +export type CascaderulProps = ExtractPropTypes diff --git a/devui/cascader/components/cascader-list/index.scss b/devui/cascader/components/cascader-list/index.scss new file mode 100644 index 00000000..a5ff2f80 --- /dev/null +++ b/devui/cascader/components/cascader-list/index.scss @@ -0,0 +1,14 @@ +@import '../../../style/mixins/flex'; +@import '../../../style/theme/color'; + +.devui-cascader-ul { + width: 200px; + height: 180px; + background: $devui-connected-overlay-bg; + display: block; + list-style: none; + margin: 0; + padding: 0; + overflow-y: auto; + border-left: 1px solid $devui-dividing-line; +} diff --git a/devui/cascader/components/cascader-list/index.tsx b/devui/cascader/components/cascader-list/index.tsx new file mode 100644 index 00000000..4fa19244 --- /dev/null +++ b/devui/cascader/components/cascader-list/index.tsx @@ -0,0 +1,19 @@ +import { defineComponent } from 'vue' +import { getRootClass } from './use-class' +import './index.scss' +import { cascaderulProps, CascaderulProps } from './cascader-list-types' +import { DCascaderItem } from '../cascader-item' +export default defineComponent({ + name: 'DCascaderList', + props: cascaderulProps, + setup(props: CascaderulProps) { + const rootClasses = getRootClass() + return () => ( + + ) + } +}) diff --git a/devui/cascader/components/cascader-list/use-class.ts b/devui/cascader/components/cascader-list/use-class.ts new file mode 100644 index 00000000..eb0109c7 --- /dev/null +++ b/devui/cascader/components/cascader-list/use-class.ts @@ -0,0 +1,11 @@ +/** + * 定义组件class + */ + import { computed, ComputedRef } from 'vue'; + + export const getRootClass = (): ComputedRef => { + return computed(() => ({ + 'devui-cascader-ul': true, + })) + } + \ No newline at end of file diff --git a/devui/cascader/hooks/use-cascader-class.ts b/devui/cascader/hooks/use-cascader-class.ts new file mode 100644 index 00000000..706eca5e --- /dev/null +++ b/devui/cascader/hooks/use-cascader-class.ts @@ -0,0 +1,16 @@ +/** + * 定义组件class + */ +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 ): ComputedRef => { + return computed(() => ({ + 'devui-cascader devui-dropdown devui-dropdown-animation': true, + 'devui-dropdown__open': menuShow.value, + 'devui-cascader__disbaled': props.disabled, + })) +} diff --git a/devui/cascader/hooks/use-cascader-options.ts b/devui/cascader/hooks/use-cascader-options.ts new file mode 100644 index 00000000..5aead51f --- /dev/null +++ b/devui/cascader/hooks/use-cascader-options.ts @@ -0,0 +1,29 @@ +/** + * 处理传入options数据 + */ +import { reactive } from 'vue'; +import { CascaderItem } from '../src/cascader-types' +let cascaderOptions +export const optionsHandles = (options?: CascaderItem[]) => { + if (options) { + cascaderOptions = reactive<[CascaderItem[]]>([ options ]) + } + /** + * 将选中的options下标装进cascaderIndexs + * @param optionItem - 项 + * @param ulIndex - 当前选中的第几级 + * + */ + const changeCascaderIndexs = (optionItem: CascaderItem, ulIndex) => { + if (optionItem?.children?.length > 0) { + cascaderOptions[ulIndex + 1] = optionItem.children + } else { + // 选择的项没有子项时清除多余的ul + cascaderOptions.splice(ulIndex + 1, cascaderOptions.length - 1 - ulIndex) + } + } + return { + cascaderOptions, + changeCascaderIndexs + } +} diff --git a/devui/cascader/hooks/use-cascader-popup.ts b/devui/cascader/hooks/use-cascader-popup.ts new file mode 100644 index 00000000..ebda8af4 --- /dev/null +++ b/devui/cascader/hooks/use-cascader-popup.ts @@ -0,0 +1,31 @@ +/** + * 控制窗口打开收起 + */ +import { ref, watch } from 'vue'; +import { PopupTypes } from '../src/cascader-types' + +export const popupHandles = (): PopupTypes => { + const menuShow = ref(false) + const menuOpenClass = ref('') + const openPopup = (e) => { + menuShow.value = !menuShow.value + } + watch(menuShow, (status) => { + switch (status) { + case false: + menuOpenClass.value = '' + break + case true: + menuOpenClass.value = 'devui-drop-menu-wrapper' + break + default: + break + } + }) + + return { + menuShow, + menuOpenClass, + openPopup, + } +} diff --git a/devui/cascader/index.ts b/devui/cascader/index.ts new file mode 100644 index 00000000..81e416df --- /dev/null +++ b/devui/cascader/index.ts @@ -0,0 +1,18 @@ +import type { App } from 'vue' +import Cascader from './src/cascader' + +Cascader.install = function(app: App): void { + app.component(Cascader.name, Cascader) +} + +export { Cascader } + +export default { + title: 'Cascader 级联菜单', + category: '数据录入', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + + app.use(Cascader as any) + } +} diff --git a/devui/cascader/src/cascader-types.ts b/devui/cascader/src/cascader-types.ts new file mode 100644 index 00000000..139cf3c5 --- /dev/null +++ b/devui/cascader/src/cascader-types.ts @@ -0,0 +1,64 @@ +import type { PropType, ExtractPropTypes, Ref } from 'vue' + +type TriggerTypes = 'hover'|'click' + +export interface CascaderItem { + label: string + value: number | string + isLeaf?: boolean + children?: CascaderItem[] + disabled?: boolean + icon?: string + // 用户可以传入自定义属性，并在dropDownItemTemplate中使用 + [prop: string]: any +} + +export const cascaderProps = { + /** + * 可选，指定展开次级菜单方式 + * @description 可选择的值 'hover', 'click' + * @type {('hover'|'click')} + * @default 'hover' + */ + trigger: { + type: String as PropType, + default: 'hover' + }, + /** + * 必选，级联器的菜单信息 + * @type {CascaderItem[]} + * @default [] + */ + options: { + type: Object as PropType, + default: [], + required: true + }, + /** + * 可选，级联器是否禁用 + * @type {boolean} + * @default false + */ + disabled: { + type: Boolean, + default: false + }, + /** + * 可选，没有选择时的输入框展示信息 + * @type {string} + * @default ''' + */ + placeholder: { + type: String, + default: '' + } + +} as const + +export type CascaderProps = ExtractPropTypes + +export interface PopupTypes { + menuShow: Ref + menuOpenClass: Ref + openPopup: (e?: MouseEvent) => void +} \ No newline at end of file diff --git a/devui/cascader/src/cascader.scss b/devui/cascader/src/cascader.scss new file mode 100644 index 00000000..cb49189e --- /dev/null +++ b/devui/cascader/src/cascader.scss @@ -0,0 +1,71 @@ +@import '../../style/mixins/size'; +@import '../../style/mixins/flex'; +@import '../../style/theme/color'; + +.devui-cascader { + @include flex(flex-start); + + position: relative; + + >div:nth-child(1) { + width: 100%; + } + + &__icon { + position: absolute; + right: 5px; + top: 0; + height: 100%; + @include flex; + @include flex-direction; + + .icon { + margin: 0; + } + } + + input { + width: 100%; + padding-right: 16px; + } + + .devui-drop-menu-wrapper { + display: block; + margin: 4px 0; + font-size: 0; + white-space: nowrap; + padding: 0; + } +} + +.devui-drop-icon-animation { + transition: transform 0.2s linear; +} + +.devui-drop-menu-animation { + transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; + // opacity: 0; + // position: absolute; + // float: left; + z-index: 1000; + // transform: scaleY(0.7) translateY(-5px); + margin-top: 1px; + + .devui-dropdown-menu { + width: auto; + padding-bottom: 0; + @include flex('flex-start'); + } +} + +.devui-dropdown__open { + .devui-cascader__icon { + transform: rotate(180deg); + } + + .devui-drop-menu-animation { + transform-origin: 0 0%; + transform: scaleY(0.9999) translateY(0); + opacity: 1; + } +} diff --git a/devui/cascader/src/cascader.tsx b/devui/cascader/src/cascader.tsx new file mode 100644 index 00000000..21e931d9 --- /dev/null +++ b/devui/cascader/src/cascader.tsx @@ -0,0 +1,52 @@ +import './cascader.scss' + +import { defineComponent, ref, reactive } from 'vue' +import { cascaderProps, 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' + + +export default defineComponent({ + name: 'DCascader', + props: cascaderProps, + emits: [], + setup(props: CascaderProps, ctx) { + const origin = ref(null) + const position = reactive({ + originX: 'left', + originY: 'bottom', + overlayX: 'left', + overlayY: 'top' + } as const) + // popup弹出层 + const { menuShow, menuOpenClass, openPopup } = popupHandles() + // 配置class + const rootClasses = getRootClass(props, menuShow) + // 级联菜单操作，变换ul、li等 + const { cascaderOptions } = optionsHandles(props.options) + return () => ( + <> +
    + +
    + +
    +
    + +
    +
    + {cascaderOptions.map((item, index) => { + return + })} +
    +
    +     + + ) + }, +}) -- Gitee From 658f90efc4e102009177ea54ff885197e7ca391f Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 2 Oct 2021 17:12:52 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20cascader=20=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/cascader/index.md | 119 ++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 docs/components/cascader/index.md diff --git a/docs/components/cascader/index.md b/docs/components/cascader/index.md new file mode 100644 index 00000000..9c5e3908 --- /dev/null +++ b/docs/components/cascader/index.md @@ -0,0 +1,119 @@ +# 级联菜单 +下拉级联菜单。 + +:::demo + +```vue + + +``` + +::: \ No newline at end of file -- Gitee From 338350e4ca4d369128f3a39cadd7679ebbeabad3 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 2 Oct 2021 17:30:53 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E5=8E=BB=E9=99=A4=E4=B8=80?= =?UTF-8?q?=E4=BA=9B=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/cascader/hooks/use-cascader-options.ts | 2 +- devui/cascader/hooks/use-cascader-popup.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/devui/cascader/hooks/use-cascader-options.ts b/devui/cascader/hooks/use-cascader-options.ts index 5aead51f..3127342d 100644 --- a/devui/cascader/hooks/use-cascader-options.ts +++ b/devui/cascader/hooks/use-cascader-options.ts @@ -9,7 +9,7 @@ export const optionsHandles = (options?: CascaderItem[]) => { cascaderOptions = reactive<[CascaderItem[]]>([ options ]) } /** - * 将选中的options下标装进cascaderIndexs + * hover时修改展示项 * @param optionItem - 项 * @param ulIndex - 当前选中的第几级 * diff --git a/devui/cascader/hooks/use-cascader-popup.ts b/devui/cascader/hooks/use-cascader-popup.ts index ebda8af4..d8f607ea 100644 --- a/devui/cascader/hooks/use-cascader-popup.ts +++ b/devui/cascader/hooks/use-cascader-popup.ts @@ -7,7 +7,7 @@ import { PopupTypes } from '../src/cascader-types' export const popupHandles = (): PopupTypes => { const menuShow = ref(false) const menuOpenClass = ref('') - const openPopup = (e) => { + const openPopup = () => { menuShow.value = !menuShow.value } watch(menuShow, (status) => { -- Gitee From b3d1d6676966ac7d822feb3d0b9f9a569e897db0 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sun, 3 Oct 2021 21:53:34 +0800 Subject: [PATCH 4/6] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0api=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/cascader/index.md | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/docs/components/cascader/index.md b/docs/components/cascader/index.md index 9c5e3908..88e98169 100644 --- a/docs/components/cascader/index.md +++ b/docs/components/cascader/index.md @@ -1,6 +1,7 @@ # 级联菜单 下拉级联菜单。 +### 基本用法 :::demo ```vue @@ -116,4 +117,29 @@ export default defineComponent({ ``` -::: \ No newline at end of file +::: + +### API + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| :--------: | :------: | :-------: | :---------------------- | --------------------------------- | --------- | +| options | [`CascaderItem[]`](#CascaderItem) | [] | 必选，级联器的菜单信息 | [基本用法](#基本用法) | | +| placeholder | `string` | '' | 可选，没有选择时的输入框展示信息 | [基本用法](#基本用法) | | + +### 接口 & 类型定义 + +- + +#### CascaderItem +```ts +interface CascaderItem { + label: string; + value: number | string; + isLeaf?: boolean; + children?: CascaderItem[]; + disabled?: boolean; + icon?: string; + // 用户可以传入自定义属性，并在dropDownItemTemplate中使用 + [prop: string]: any; +} +``` \ No newline at end of file -- Gitee From cb2a631f9cb0d15bf998c67d585961d9305db9c3 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Mon, 4 Oct 2021 16:26:45 +0800 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/cascader-list/cascader-list-types.ts | 2 +- devui/cascader/hooks/use-cascader-options.ts | 7 ++++--- devui/cascader/hooks/use-cascader-popup.ts | 11 +---------- devui/cascader/src/cascader-types.ts | 9 +++++++-- devui/cascader/src/cascader.tsx | 1 - 5 files changed, 13 insertions(+), 17 deletions(-) diff --git a/devui/cascader/components/cascader-list/cascader-list-types.ts b/devui/cascader/components/cascader-list/cascader-list-types.ts index 1c508b8e..85e2152d 100644 --- a/devui/cascader/components/cascader-list/cascader-list-types.ts +++ b/devui/cascader/components/cascader-list/cascader-list-types.ts @@ -7,7 +7,7 @@ export const cascaderulProps = { * @default [] */ cascaderlis: { - type: Object as PropType, + type: Array as PropType, default: [], }, /** diff --git a/devui/cascader/hooks/use-cascader-options.ts b/devui/cascader/hooks/use-cascader-options.ts index 3127342d..e7a29870 100644 --- a/devui/cascader/hooks/use-cascader-options.ts +++ b/devui/cascader/hooks/use-cascader-options.ts @@ -2,9 +2,9 @@ * 处理传入options数据 */ import { reactive } from 'vue'; -import { CascaderItem } from '../src/cascader-types' +import { CascaderItem, OptionsCallback } from '../src/cascader-types' let cascaderOptions -export const optionsHandles = (options?: CascaderItem[]) => { +export const optionsHandles = (options?: CascaderItem[]): OptionsCallback => { if (options) { cascaderOptions = reactive<[CascaderItem[]]>([ options ]) } @@ -14,7 +14,8 @@ export const optionsHandles = (options?: CascaderItem[]) => { * @param ulIndex - 当前选中的第几级 * */ - const changeCascaderIndexs = (optionItem: CascaderItem, ulIndex) => { + const changeCascaderIndexs = (optionItem: CascaderItem, ulIndex: number) => { + if (!cascaderOptions) return if (optionItem?.children?.length > 0) { cascaderOptions[ulIndex + 1] = optionItem.children } else { diff --git a/devui/cascader/hooks/use-cascader-popup.ts b/devui/cascader/hooks/use-cascader-popup.ts index d8f607ea..8e8f4bdf 100644 --- a/devui/cascader/hooks/use-cascader-popup.ts +++ b/devui/cascader/hooks/use-cascader-popup.ts @@ -11,16 +11,7 @@ export const popupHandles = (): PopupTypes => { menuShow.value = !menuShow.value } watch(menuShow, (status) => { - switch (status) { - case false: - menuOpenClass.value = '' - break - case true: - menuOpenClass.value = 'devui-drop-menu-wrapper' - break - default: - break - } + menuOpenClass.value = status ? 'devui-drop-menu-wrapper' : '' }) return { diff --git a/devui/cascader/src/cascader-types.ts b/devui/cascader/src/cascader-types.ts index 139cf3c5..60521b56 100644 --- a/devui/cascader/src/cascader-types.ts +++ b/devui/cascader/src/cascader-types.ts @@ -1,4 +1,4 @@ -import type { PropType, ExtractPropTypes, Ref } from 'vue' +import type { PropType, ExtractPropTypes, Ref, reactive } from 'vue' type TriggerTypes = 'hover'|'click' @@ -30,7 +30,7 @@ export const cascaderProps = { * @default [] */ options: { - type: Object as PropType, + type: Array as PropType, default: [], required: true }, @@ -61,4 +61,9 @@ export interface PopupTypes { menuShow: Ref menuOpenClass: Ref openPopup: (e?: MouseEvent) => void +} + +export interface OptionsCallback { + cascaderOptions: never | [CascaderItem[]] + changeCascaderIndexs: (optionItem: CascaderItem, ulIndex: number) => void } \ No newline at end of file diff --git a/devui/cascader/src/cascader.tsx b/devui/cascader/src/cascader.tsx index 21e931d9..d0565e61 100644 --- a/devui/cascader/src/cascader.tsx +++ b/devui/cascader/src/cascader.tsx @@ -11,7 +11,6 @@ import { optionsHandles } from '../hooks/use-cascader-options' export default defineComponent({ name: 'DCascader', props: cascaderProps, - emits: [], setup(props: CascaderProps, ctx) { const origin = ref(null) const position = reactive({ -- Gitee From 2bf594a1c4a19dae7522c090d0469dc154413d45 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Mon, 4 Oct 2021 17:18:43 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EUnwrapNestedRefs?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AF=BC=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/cascader/src/cascader-types.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/devui/cascader/src/cascader-types.ts b/devui/cascader/src/cascader-types.ts index 60521b56..13abc1af 100644 --- a/devui/cascader/src/cascader-types.ts +++ b/devui/cascader/src/cascader-types.ts @@ -1,4 +1,5 @@ -import type { PropType, ExtractPropTypes, Ref, reactive } from 'vue' +import type { PropType, ExtractPropTypes, Ref } from 'vue' +import { UnwrapNestedRefs } from '@vue/reactivity' type TriggerTypes = 'hover'|'click' @@ -64,6 +65,6 @@ export interface PopupTypes { } export interface OptionsCallback { - cascaderOptions: never | [CascaderItem[]] + cascaderOptions: never | UnwrapNestedRefs<[CascaderItem[]]> changeCascaderIndexs: (optionItem: CascaderItem, ulIndex: number) => void } \ No newline at end of file -- Gitee