Merge pull request #916 from WeBankFinTech/feat-dropdown-model-value

feat(Dropdown): 增加 v-model 配置项
WeBankFinTech · Dec 4, 2024 · 8029e7c · 8029e7c
2 parents 1864e1e + 203f811
commit 8029e7c
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 73 deletions.
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
@@ -1,23 +1,24 @@
-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';
 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<Option['value']>();
+        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
@@ -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<DropdownValue>,
+    },
     visible: {
         type: Boolean,
         default: false,

diff --git 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
@@ -1,73 +1,83 @@
 <template>
-    <FDropdown arrow :options="options" showSelectedOption popperClass="dropdown-content-wrapper" @scroll="handleScroll">
+    <FDropdown
+        v-model="dropdownValue"
+        arrow
+        :options="options"
+        showSelectedOption
+        popperClass="dropdown-content-wrapper"
+        @scroll="handleScroll"
+        @click="handleClick"
+        @change="handleChange"
+    >
         <FButton>下拉菜单</FButton>
     </FDropdown>
 </template>
 
-<script>
-export default {
-    setup() {
-        const options = [
-            {
-                value: '1',
-                label: '删除',
-                disabled: true,
-            },
-            {
-                value: '2',
-                label: '修改',
-            },
-            {
-                value: '3',
-                label: '添加',
-            },
-            {
-                value: '4',
-                label: '评论',
-            },
-            {
-                value: '5',
-                label: '收藏',
-            },
-            {
-                value: '6',
-                label: '点赞',
-            },
-            {
-                value: '7',
-                label: '分享',
-            },
-            {
-                value: '8',
-                label: '投诉',
-            },
-            {
-                value: '9',
-                label: '建议',
-            },
-            {
-                value: '10',
-                label: '更新',
-            },
-            {
-                value: '11',
-                label: '编辑',
-            },
-            {
-                value: '12',
-                label: '更多',
-            },
-        ];
+<script setup>
+import { ref } from 'vue';
 
-        const handleScroll = (e) => {
-            console.log('[dropdown.check] handleScroll, e:', e);
-        };
+const dropdownValue = ref('3');
 
-        return {
-            options,
-            handleScroll,
-        };
+const options = [
+    {
+        value: '1',
+        label: '删除',
+        disabled: true,
     },
+    {
+        value: '2',
+        label: '修改',
+    },
+    {
+        value: '3',
+        label: '添加',
+    },
+    {
+        value: '4',
+        label: '评论',
+    },
+    {
+        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);
+};
+const handleClick = (value) => {
+    console.log('[dropdown.check] handleClick, value:', value);
+};
+const handleChange = (value) => {
+    console.log('[dropdown.check] handleChange, value:', value);
 };
 </script>