From 32db64a3ebdb337fd3df6bcfcfa794edc2feee1c Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Mon, 11 Nov 2024 18:12:04 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat(Dropdown):=20=E4=B8=8B=E6=8B=89?= =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=AE=B9=E5=99=A8=E8=AE=BE=E7=BD=AE=E6=9C=80?= =?UTF-8?q?=E5=A4=A7=E9=AB=98=E5=BA=A6=EF=BC=8C=E8=B6=85=E5=87=BA=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=BB=9A=E5=8A=A8=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/dropdown/dropdown.tsx | 12 ++++--- components/dropdown/style/index.less | 2 ++ docs/.vitepress/components/dropdown/check.vue | 36 ++++++++++++++++++- docs/.vitepress/components/dropdown/index.md | 1 + 4 files changed, 46 insertions(+), 5 deletions(-) diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index 5354397b..156f619e 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -5,6 +5,7 @@ import getPrefixCls from '../_util/getPrefixCls'; import { useNormalModel } from '../_util/use/useModel'; import { useTheme } from '../_theme/useTheme'; import Popper from '../popper/popper'; +import Scrollbar from '../scrollbar/scrollbar.vue'; import { type DropdownOption as Option, dropdownProps } from './props'; const prefixCls = getPrefixCls('dropdown'); @@ -12,7 +13,7 @@ const prefixCls = getPrefixCls('dropdown'); export default defineComponent({ name: 'FDropdown', props: dropdownProps, - emits: ['click', 'visibleChange', 'update:visible'], + emits: ['click', 'visibleChange', 'update:visible', 'scroll'], setup(props, { slots, emit }) { useTheme(); @@ -41,8 +42,11 @@ export default defineComponent({ }); const renderOptions = () => ( -
{ + emit('scroll', event); + }} + containerClass={[ `${prefixCls}-option-wrapper`, hasIcon.value ? 'has-icon' : '', ]} @@ -85,7 +89,7 @@ export default defineComponent({
); })} - + ); return () => ( diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index bdc056fe..2965537c 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -6,6 +6,7 @@ @dropdown-option-height: @data-input-height-base; @dropdown-option-hover-color: var(--f-hover-color-light); @dropdown-min-width: 100px; +@dropdown-max-height: 274px; .@{dropdown-prefix-cls} { &-popper { @@ -14,6 +15,7 @@ } &-option-wrapper { min-width: @dropdown-min-width; + max-height: @dropdown-max-height; .text(); &:not(.has-icon) { .@{dropdown-prefix-cls}-option { diff --git a/docs/.vitepress/components/dropdown/check.vue b/docs/.vitepress/components/dropdown/check.vue index 5cf5b385..ffe2aab8 100644 --- a/docs/.vitepress/components/dropdown/check.vue +++ b/docs/.vitepress/components/dropdown/check.vue @@ -1,5 +1,5 @@ @@ -29,9 +29,43 @@ export default { value: '5', label: '收藏', }, + { + value: '6', + label: '点赞', + }, + { + value: '7', + label: '分享', + }, + { + value: '8', + label: '投诉', + }, + { + value: '9', + label: '建议', + }, + { + value: '10', + label: '更新', + }, + { + value: '11', + label: '编辑', + }, + { + value: '12', + label: '更多', + }, ]; + + const handleScroll = (e) => { + console.log('[dropdown.check] handleScroll, e:', e); + }; + return { options, + handleScroll, }; }, }; diff --git a/docs/.vitepress/components/dropdown/index.md b/docs/.vitepress/components/dropdown/index.md index 5d8570ff..c597c1b6 100644 --- a/docs/.vitepress/components/dropdown/index.md +++ b/docs/.vitepress/components/dropdown/index.md @@ -83,6 +83,7 @@ disabled.vue | ------------- | ---------------------- | ----------------- | | click | 点击选项的回调 | (value) => void | | visibleChange | 菜单显示状态改变时调用 | (visible) => void | +| scroll | 滚动事件 | (event: Event) | ## Slots From 276b88191140d969de7cc59c292ad642199a59c3 Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Tue, 12 Nov 2024 09:56:52 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat(Dropdown):=20=E5=A2=9E=E5=8A=A0=20popp?= =?UTF-8?q?erClass=20=E9=85=8D=E7=BD=AE=E9=A1=B9=EF=BC=8C=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E5=BC=B9=E5=87=BA=E6=A1=86=E5=AE=B9=E5=99=A8=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/dropdown/dropdown.tsx | 2 +- components/dropdown/props.ts | 1 + docs/.vitepress/components/dropdown/check.vue | 2 +- docs/.vitepress/components/dropdown/index.md | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index 156f619e..6a5b5eaf 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -97,7 +97,7 @@ export default defineComponent({ v-model={visible.value} trigger={props.trigger} placement={props.placement} - popperClass={`${prefixCls}-popper`} + popperClass={[`${prefixCls}-popper`, props.popperClass]} appendToContainer={props.appendToContainer} getContainer={props.getContainer} offset={props.offset} diff --git a/components/dropdown/props.ts b/components/dropdown/props.ts index 18c51ed2..6f2351f2 100644 --- a/components/dropdown/props.ts +++ b/components/dropdown/props.ts @@ -69,6 +69,7 @@ export const dropdownProps = { type: Boolean, default: false, }, + popperClass: [String, Array, Object] as PropType, } as const satisfies ComponentObjectPropsOptions; export type DropdownProps = ExtractPublicPropTypes; diff --git a/docs/.vitepress/components/dropdown/check.vue b/docs/.vitepress/components/dropdown/check.vue index ffe2aab8..82c88091 100644 --- a/docs/.vitepress/components/dropdown/check.vue +++ b/docs/.vitepress/components/dropdown/check.vue @@ -1,5 +1,5 @@ diff --git a/docs/.vitepress/components/dropdown/index.md b/docs/.vitepress/components/dropdown/index.md index c597c1b6..6980daf9 100644 --- a/docs/.vitepress/components/dropdown/index.md +++ b/docs/.vitepress/components/dropdown/index.md @@ -76,6 +76,7 @@ disabled.vue | disabled | 是否禁用 | boolean | `false` | | arrow | 是否显示箭头 | boolean | `false` | | showSelectedOption | 是否显示选中选项 | boolean | `false` | +| popperClass | 弹出框容器样式 | string | - | ## Events From e458329a7975fdcbbf3c84c872456a54baab7304 Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Tue, 12 Nov 2024 10:12:36 +0800 Subject: [PATCH 3/4] =?UTF-8?q?docs(Dropdown):=20=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E8=A1=A5=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/components/dropdown/check.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/.vitepress/components/dropdown/check.vue b/docs/.vitepress/components/dropdown/check.vue index 82c88091..80e1e764 100644 --- a/docs/.vitepress/components/dropdown/check.vue +++ b/docs/.vitepress/components/dropdown/check.vue @@ -70,3 +70,11 @@ export default { }, }; + + From 0499a9aaf73bfdefc3aba3a18b8d69ad24cbd27a Mon Sep 17 00:00:00 2001 From: ocean-gao Date: Tue, 12 Nov 2024 10:17:18 +0800 Subject: [PATCH 4/4] =?UTF-8?q?docs:=20=E6=96=87=E6=A1=A3=E8=A1=A5?= =?UTF-8?q?=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/components/dropdown/index.md | 10 ++++----- docs/.vitepress/components/select/index.md | 22 ++++++++++---------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/.vitepress/components/dropdown/index.md b/docs/.vitepress/components/dropdown/index.md index 6980daf9..d3405153 100644 --- a/docs/.vitepress/components/dropdown/index.md +++ b/docs/.vitepress/components/dropdown/index.md @@ -80,11 +80,11 @@ disabled.vue ## Events -| 事件名称 | 说明 | 回调参数 | -| ------------- | ---------------------- | ----------------- | -| click | 点击选项的回调 | (value) => void | -| visibleChange | 菜单显示状态改变时调用 | (visible) => void | -| scroll | 滚动事件 | (event: Event) | +| 事件名称 | 说明 | 回调参数 | +| ------------- | ---------------------- | ---------------------- | +| click | 点击选项的回调 | (value) => void | +| visibleChange | 菜单显示状态改变时调用 | (visible: Boolean) => void | +| scroll | 滚动事件 | (event: Event) => void | ## Slots diff --git a/docs/.vitepress/components/select/index.md b/docs/.vitepress/components/select/index.md index 34036835..b1996625 100644 --- a/docs/.vitepress/components/select/index.md +++ b/docs/.vitepress/components/select/index.md @@ -165,17 +165,17 @@ selectGroupOption.vue ## Select Events -| 事件名称 | 说明 | 回调参数 | -| ------------- | ---------------------------------------------------------------------------- | ------------------ | -| change | 选择或者清除选中选项时触发 | 目前选中的值 | -| visibleChange | 下拉框出现/隐藏时触发, 出现则为 true，隐藏则为 false | (visible: Boolean) | -| removeTag | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 `multiple` 模式下生效 | 取消选中的值 | -| blur | 当选择器失去焦点时触发 | (event: Event) | -| focus | 当选择器获得焦点时触发 | (event: Event) | -| clear | 点击清除按钮时触发 | (event: Event) | -| scroll | 滚动事件 | (event: Event) | -| search | 搜索事件 | ( query: String) | -| filter | 过滤事件 | ( query: String) | +| 事件名称 | 说明 | 回调参数 | +| ------------- | ---------------------------------------------------------------------------- | -------------------------- | +| change | 选择或者清除选中选项时触发 | (value) => void | +| visibleChange | 下拉框出现/隐藏时触发, 出现则为 true，隐藏则为 false | (visible: Boolean) => void | +| removeTag | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 `multiple` 模式下生效 | 取消选中的值 | +| blur | 当选择器失去焦点时触发 | (event: Event) => void | +| focus | 当选择器获得焦点时触发 | (event: Event) => void | +| clear | 点击清除按钮时触发 | (event: Event) => void | +| scroll | 滚动事件 | (event: Event) => void | +| search | 搜索事件 | ( query: String) => void | +| filter | 过滤事件 | ( query: String) => void | ## Select Slots