admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ DropMenuItem 增加自定 Popup 样式参数

Browse Source
This commit is contained in:
不如摸鱼去 2024-11-25 09:20:54 +08:00
parent 29b97a3e6b
commit 28ad03b7af
3 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
docs/component/drop-menu.md
View File

@ -138,7 +138,6 @@ function handleOpened() {
``` ```
```typescript ```typescript
import { useMessage } from '@/uni_modules/wot-design-uni' import { useMessage } from '@/uni_modules/wot-design-uni'
const messageBox = useMessage() const messageBox = useMessage()
@ -149,7 +148,7 @@ const option = ref<Record<string, any>>([
{ label: '新款商品', value: 1 }, { label: '新款商品', value: 1 },
{ label: '活动商品', value: 2 } { label: '活动商品', value: 2 }
]) ])
// 通过对话框确认是否打开/关闭下拉菜单 // 通过对话框确认是否打开/关闭下拉菜单
const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => { const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
messageBox messageBox
@ -197,19 +196,19 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
## DropMenuItem Attributes ## DropMenuItem Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| --------- | ---------------------------------------------------------------------- | --------------- | ------ | ------ | -------- | | ------------- | ---------------------------------------------------------------------- | ----------------------------- | ------ | ---------- | -------- |
| v-model | 当前选中项对应选中的 value | string / number | - | - | - | | v-model | 当前选中项对应选中的 value | string / number | - | - | - |
| disabled | 禁用菜单 | boolean | - | false | - | | disabled | 禁用菜单 | boolean | - | false | - |
| options | 列表数据，对应数据结构 `[{text: '标题', value: '0', tip: '提示文字'}]` | array | - | - | - | | options | 列表数据，对应数据结构 `[{text: '标题', value: '0', tip: '提示文字'}]` | array | - | - | - |
| icon-name | 选中的图标名称(可选名称在 wd-icon 组件中) | string | - | check | - | | icon-name | 选中的图标名称(可选名称在 wd-icon 组件中) | string | - | check | - |
| title | 菜单标题 | string | - | - | - | | title | 菜单标题 | string | - | - | - |
| icon | 菜单图标 | string | - | arrow-down | - | | icon | 菜单图标 | string | - | arrow-down | - |
| icon-size | 菜单图标尺寸 | string | - | 14px | _ | | icon-size | 菜单图标尺寸 | string | - | 14px | \_ |
| before-toggle | 下拉菜单打开或者关闭前触发，`reslove(true)`时继续执行打开或关闭操作 | function({ status, resolve }) | - | - | 1.3.7 | | before-toggle | 下拉菜单打开或者关闭前触发，`reslove(true)`时继续执行打开或关闭操作 | function({ status, resolve }) | - | - | 1.3.7 |
| value-key | 选项对象中，value 对应的 key | string | - | value | - | | value-key | 选项对象中，value 对应的 key | string | - | value | - |
| label-key | 选项对象中，展示的文本对应的 key | string | - | label | - | | label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
| tip-key | 选项对象中，选项说明对应的 key | string | - | tip | - | | tip-key | 选项对象中，选项说明对应的 key | string | - | tip | - |
## DropdownItem Events ## DropdownItem Events
@ -250,8 +249,10 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
## DropMenuItem 外部样式类 ## DropMenuItem 外部样式类
| 类名 | 说明 | 最低版本 | | 类名 | 说明 | 最低版本 |
| ------------ | --------------------------- | -------- | | ------------------ | --------------------------- | ---------------- |
| custom-class | DropMenuItem 根节点样式 | - | | custom-class | DropMenuItem 根节点样式 | - |
| custom-title | DropMenuItem 左侧文字样式 | - | | custom-title | DropMenuItem 左侧文字样式 | - |
| custom-icon | DropMenuItem 右侧 icon 样式 | - | | custom-icon | DropMenuItem 右侧 icon 样式 | - |
| custom-popup-class | 自定义下拉菜单 popup 样式类 | $LOWEST_VERSION$ |
| custom-popup-style | 自定义下拉菜单 popup 样式 | $LOWEST_VERSION$ |

12
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts
View File

@ -63,7 +63,15 @@ export const dorpMenuItemProps = {
/** /**
* 选项对象中，选项说明对应的 key * 选项对象中，选项说明对应的 key
*/ */
tipKey: makeStringProp('tip') tipKey: makeStringProp('tip'),
/**
* 自定义下拉菜单popup样式类
*/
customPopupClass: makeStringProp(''),
/**
* 自定义下拉菜单popup样式
*/
customPopupStyle: makeStringProp('')
} }
export type DropMenuItemProps = ExtractPropTypes<typeof dorpMenuItemProps> export type DropMenuItemProps = ExtractPropTypes<typeof dorpMenuItemProps>
@ -75,4 +83,4 @@ export type DropMenuItemExpose = {
toggle: () => void toggle: () => void
} }
export type DropMenuItemInstance = ComponentPublicInstance<DropMenuItemProps> export type DropMenuItemInstance = ComponentPublicInstance<DropMenuItemProps, DropMenuItemExpose>

3
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
View File

@ -5,7 +5,8 @@
:z-index="zIndex" :z-index="zIndex"
:duration="duration" :duration="duration"
:position="position" :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-style="position: absolute;"
:modal="modal" :modal="modal"
:close-on-click-modal="false" :close-on-click-modal="false"