From 28ad03b7afdd38a86f168d15a7c0f3564d122101 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?= <1780903673@qq.com> Date: Mon, 25 Nov 2024 09:20:54 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20DropMenuItem=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E8=87=AA=E5=AE=9A=20Popup=20=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/component/drop-menu.md | 41 ++++++++++--------- .../components/wd-drop-menu-item/types.ts | 12 +++++- .../wd-drop-menu-item/wd-drop-menu-item.vue | 3 +- 3 files changed, 33 insertions(+), 23 deletions(-) diff --git a/docs/component/drop-menu.md b/docs/component/drop-menu.md index 3841171a..b11f7c88 100644 --- a/docs/component/drop-menu.md +++ b/docs/component/drop-menu.md @@ -138,7 +138,6 @@ function handleOpened() { ``` ```typescript - import { useMessage } from '@/uni_modules/wot-design-uni' const messageBox = useMessage() @@ -149,7 +148,7 @@ const option = ref>([ { label: '新款商品', value: 1 }, { label: '活动商品', value: 2 } ]) - + // 通过对话框确认是否打开/关闭下拉菜单 const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => { messageBox @@ -197,19 +196,19 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => { ## DropMenuItem Attributes -| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | -| --------- | ---------------------------------------------------------------------- | --------------- | ------ | ------ | -------- | -| v-model | 当前选中项对应选中的 value | string / number | - | - | - | -| disabled | 禁用菜单 | boolean | - | false | - | -| options | 列表数据，对应数据结构 `[{text: '标题', value: '0', tip: '提示文字'}]` | array | - | - | - | -| icon-name | 选中的图标名称(可选名称在 wd-icon 组件中) | string | - | check | - | -| title | 菜单标题 | string | - | - | - | -| icon | 菜单图标 | string | - | arrow-down | - | -| icon-size | 菜单图标尺寸 | string | - | 14px | _ | -| before-toggle | 下拉菜单打开或者关闭前触发，`reslove(true)`时继续执行打开或关闭操作 | function({ status, resolve }) | - | - | 1.3.7 | -| value-key | 选项对象中，value 对应的 key | string | - | value | - | -| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - | -| tip-key | 选项对象中，选项说明对应的 key | string | - | tip | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | +| ------------- | ---------------------------------------------------------------------- | ----------------------------- | ------ | ---------- | -------- | +| v-model | 当前选中项对应选中的 value | string / number | - | - | - | +| disabled | 禁用菜单 | boolean | - | false | - | +| options | 列表数据，对应数据结构 `[{text: '标题', value: '0', tip: '提示文字'}]` | array | - | - | - | +| icon-name | 选中的图标名称(可选名称在 wd-icon 组件中) | string | - | check | - | +| title | 菜单标题 | string | - | - | - | +| icon | 菜单图标 | string | - | arrow-down | - | +| icon-size | 菜单图标尺寸 | string | - | 14px | \_ | +| before-toggle | 下拉菜单打开或者关闭前触发，`reslove(true)`时继续执行打开或关闭操作 | function({ status, resolve }) | - | - | 1.3.7 | +| value-key | 选项对象中，value 对应的 key | string | - | value | - | +| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - | +| tip-key | 选项对象中，选项说明对应的 key | string | - | tip | - | ## DropdownItem Events @@ -250,8 +249,10 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => { ## DropMenuItem 外部样式类 -| 类名 | 说明 | 最低版本 | -| ------------ | --------------------------- | -------- | -| custom-class | DropMenuItem 根节点样式 | - | -| custom-title | DropMenuItem 左侧文字样式 | - | -| custom-icon | DropMenuItem 右侧 icon 样式 | - | +| 类名 | 说明 | 最低版本 | +| ------------------ | --------------------------- | ---------------- | +| custom-class | DropMenuItem 根节点样式 | - | +| custom-title | DropMenuItem 左侧文字样式 | - | +| custom-icon | DropMenuItem 右侧 icon 样式 | - | +| custom-popup-class | 自定义下拉菜单 popup 样式类 | $LOWEST_VERSION$ | +| custom-popup-style | 自定义下拉菜单 popup 样式 | $LOWEST_VERSION$ | diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts index 43f6b01f..ebbd9bf2 100644 --- a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts @@ -63,7 +63,15 @@ export const dorpMenuItemProps = { /** * 选项对象中，选项说明对应的 key */ - tipKey: makeStringProp('tip') + tipKey: makeStringProp('tip'), + /** + * 自定义下拉菜单popup样式类 + */ + customPopupClass: makeStringProp(''), + /** + * 自定义下拉菜单popup样式 + */ + customPopupStyle: makeStringProp('') } export type DropMenuItemProps = ExtractPropTypes @@ -75,4 +83,4 @@ export type DropMenuItemExpose = { toggle: () => void } -export type DropMenuItemInstance = ComponentPublicInstance +export type DropMenuItemInstance = ComponentPublicInstance diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue index 218fd66f..cb103f68 100644 --- a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue +++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue @@ -5,7 +5,8 @@ :z-index="zIndex" :duration="duration" :position="position" - custom-style="position: absolute; max-height: 80%;" + :custom-style="`position: absolute; max-height: 80%;${customPopupStyle}`" + :custom-class="customPopupClass" modal-style="position: absolute;" :modal="modal" :close-on-click-modal="false"