diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index 6a5b5eaf..2a1d36f8 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, ref, watch } from 'vue'; +import { computed, defineComponent, ref, unref, watch } from 'vue'; import { isFunction } from 'lodash-es'; import CheckOutlined from '../icon/CheckOutlined'; import getPrefixCls from '../_util/getPrefixCls'; @@ -6,18 +6,19 @@ 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'; +import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../_util/constants'; +import { type DropdownValue, type DropdownOption as Option, dropdownProps } from './props'; const prefixCls = getPrefixCls('dropdown'); export default defineComponent({ name: 'FDropdown', props: dropdownProps, - emits: ['click', 'visibleChange', 'update:visible', 'scroll'], + emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, 'click', 'visibleChange', 'update:visible', 'scroll'], setup(props, { slots, emit }) { useTheme(); - const currentValue = ref(); + const [currentValue, updateCurrentValue] = useNormalModel(props, emit); const [visible, updateVisible] = useNormalModel(props, emit, { prop: 'visible', }); @@ -32,11 +33,14 @@ export default defineComponent({ return; } const value = option[props.valueField] as Option['value']; - currentValue.value = value; + updateCurrentValue(value); updateVisible(false); emit('click', value); }; + watch(currentValue, () => { + emit(CHANGE_EVENT, unref(currentValue)); + }); watch(visible, () => { emit('visibleChange', visible.value); }); diff --git a/components/dropdown/props.ts b/components/dropdown/props.ts index 6f2351f2..c664f70c 100644 --- a/components/dropdown/props.ts +++ b/components/dropdown/props.ts @@ -6,8 +6,10 @@ import type { } from 'vue'; import type { PLACEMENT, TRIGGER } from '../_util/constants'; +export type DropdownValue = string | number; + export interface DropdownOption { - value: string | number; + value: DropdownValue; label: string | number | ((option: DropdownOption) => VNodeTypes); disabled?: boolean; icon?: () => VNodeTypes; @@ -20,6 +22,9 @@ export interface DropdownOption { } export const dropdownProps = { + modelValue: { + type: [String, Number] as PropType, + }, visible: { type: Boolean, default: false, diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index 2965537c..12bb2cdb 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -62,11 +62,6 @@ background: @dropdown-option-hover-color; transition: background-color @animation-duration-fast @ease-base-in; } - &.is-disabled { - color: var(--f-text-color-disabled); - background: var(--f-white); - cursor: not-allowed; - } &.is-selected { color: var(--f-primary-color); transition: color @animation-duration-fast @ease-base-in; @@ -75,5 +70,11 @@ display: inline-block; } } + /* is-disabled 优先级比 is-selected 高 */ + &.is-disabled { + color: var(--f-text-color-disabled); + background: var(--f-white); + cursor: not-allowed; + } } } diff --git a/docs/.vitepress/components/dropdown/check.vue b/docs/.vitepress/components/dropdown/check.vue index 58c494f8..59724e85 100644 --- a/docs/.vitepress/components/dropdown/check.vue +++ b/docs/.vitepress/components/dropdown/check.vue @@ -1,73 +1,83 @@ -