Skip to content

【Dropdown】添加自定义宽度的功能 #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 15, 2021
Merged

【Dropdown】添加自定义宽度的功能 #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/devui-vue/devui/dropdown/src/dropdown-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,11 @@ export const dropdownProps = {
showAnimation: {
type: Boolean,
default: true
},
width: {
type: [Number, String],
default: '102px'
}

} as const

export type DropdownProps = ExtractPropTypes<typeof dropdownProps>
4 changes: 4 additions & 0 deletions packages/devui-vue/devui/dropdown/src/dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
}
}

.devui-dropdown-menu-wrap .devui-dropdown-menu {
width: 100%;
}

.devui-dropdown-animation span {
&.icon-chevron-down,
&.icon-select-arrow {
Expand Down
42 changes: 24 additions & 18 deletions packages/devui-vue/devui/dropdown/src/dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,24 +43,30 @@ export default defineComponent({
return props.showAnimation ? visible.value : true;
});

return () => {
// let vnodes = ctx.slots.default?.() ?? [];
return (
<>
<FlexibleOverlay
origin={props.origin}
v-model:visible={visible.value}
position={position}
hasBackdrop={false}
const wrapStyle = computed(() => typeof props.width === 'string' ? {
width: props.width,
}: {
width: `${props.width}px`,
});

return () => (
<FlexibleOverlay
origin={props.origin}
v-model:visible={visible.value}
position={position}
hasBackdrop={false}
>
<Transition name="devui-dropdown-fade">
<div
ref={dropdownEl}
class="devui-dropdown-menu-wrap"
style={wrapStyle.value}
v-show={animatedVisible.value}
>
<Transition name="devui-dropdown-fade">
<div v-show={animatedVisible.value} ref={dropdownEl} style="min-width:102px">
{ctx.slots.default?.()}
</div>
</Transition>
</FlexibleOverlay>
</>
)
};
{ctx.slots.default?.()}
</div>
</Transition>
</FlexibleOverlay>
);
}
})
62 changes: 35 additions & 27 deletions packages/devui-vue/docs/components/dropdown/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,38 @@

```vue
<template>
<div style="display:flex">
触发方式：
<d-radio-group direction="row" v-model="trigger">
<d-radio v-for="item in triggerList" :key="item" :value="item">
{{ item }}
</d-radio>
</d-radio-group>
<div class="space-y-s">
<div class="flex items-center">
触发方式：
<d-radio-group direction="row" v-model="trigger">
<d-radio v-for="item in triggerList" :key="item" :value="item">
{{ item }}
</d-radio>
</d-radio-group>
</div>
<div class="flex items-center">
关闭区域：
<d-radio-group direction="row" v-model="closeScope">
<d-radio v-for="item in closeScopeAreas" :key="item" :value="item">
{{ item }}
</d-radio>
</d-radio-group>
</div>

<div class="flex items-center">
仅当鼠标从菜单移除时才关闭：
<d-switch v-model:checked="closeOnMouseLeaveMenu"></d-switch>
</div>

<div class="flex items-center">
动画开关：
<d-switch v-model:checked="showAnimation"></d-switch>
</div>
<div class="flex items-center">
自定义宽度：
<d-input-number v-model="width" :max="400" :min="100" :step="100" /> px
</div>
</div>
<div style="display:flex">
关闭区域：
<d-radio-group direction="row" v-model="closeScope">
<d-radio v-for="item in closeScopeAreas" :key="item" :value="item">
{{ item }}
</d-radio>
</d-radio-group>
</div>

<div style="display:flex">
仅当鼠标从菜单移除时才关闭：
<d-switch v-model:checked="closeOnMouseLeaveMenu"></d-switch>
</div>

<div style="display:flex">
动画开关：
<d-switch v-model:checked="showAnimation"></d-switch>
</div>

<d-button ref="origin" style="margin-top: 20px; margin-right: 10px">More</d-button>
<d-button
v-show="trigger === 'manually'"
Expand All @@ -53,6 +58,7 @@
:closeScope="closeScope"
:closeOnMouseLeaveMenu="closeOnMouseLeaveMenu"
:showAnimation="showAnimation"
:width="width"
>
<ul class="devui-dropdown-menu" role="menu">
<li role="menuitem">
Expand Down Expand Up @@ -84,7 +90,8 @@ export default defineComponent({
closeScope: ref('blank'),
closeScopeAreas: ['all', 'blank', 'none'],
closeOnMouseLeaveMenu: ref(false),
showAnimation: ref(true)
showAnimation: ref(true),
width: ref(100)
}
}
})
Expand Down Expand Up @@ -122,6 +129,7 @@ d-dropdown 参数
| closeScope | `CloseScopeArea` | `all` | 可选，点击关闭区域，blank 点击非菜单空白才关闭, all 点击菜单内外都关闭，none 菜单内外均不关闭仅下拉按键可以关闭 |
| closeOnMouseLeaveMenu | `boolean` | `false` | 可选，是否进入菜单后离开菜单的时候关闭菜单 |
| showAnimation | `boolean` | `true` | 可选，是否开启动画 |
| width | `number \| string` | `102px` | 可选，对 dropdown 内容的宽度进行自定义 |

TriggerType 类型
```typescript
Expand Down