feat(dropdown): [dropdown] add visible attribute to support user-defined panel display. (#2774)

chenxi-20 · web-flow · commit ab0b14ba6139 · 2025-01-15T19:46:27.000+08:00
* feat(dropdown): [dropdown] 增加visible属性，支持用户自定义面板显隐
diff --git a/examples/sites/demos/apis/dropdown.js b/examples/sites/demos/apis/dropdown.js
@@ -218,6 +218,17 @@ export default {
           pcDemo: 'split-button',
           mfDemo: ''
         },
+        {
+          name: 'v-model:visible',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '手动控制下拉弹框显隐，优先级高于trigger',
+            'en-US': 'Manually control the display and hide of the dropdown menu, with priority higher than the trigger'
+          },
+          mode: ['pc'],
+          pcDemo: 'visible'
+        },
         {
           name: 'visible-arrow',
           type: 'boolean',
diff --git a/examples/sites/demos/pc/app/dropdown/visible-composition-api.vue b/examples/sites/demos/pc/app/dropdown/visible-composition-api.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="box">
+    <tiny-dropdown v-model:visible="visible">
+      <div @click="handleClick">点击{{ visible ? '隐藏' : '显示' }}</div>
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item
+            v-for="(item, index) in options"
+            :key="index"
+            :label="item.label"
+            :disabled="item.disabled"
+            :item-data="item"
+          ></tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
+
+const visible = ref(true)
+const options = [
+  {
+    label: '黄金糕'
+  },
+  {
+    label: '狮子头'
+  },
+  {
+    label: '螺蛳粉'
+  },
+  {
+    label: '双皮奶'
+  },
+  {
+    label: '蚵仔煎'
+  }
+]
+const handleClick = () => {
+  visible.value = !visible.value
+}
+</script>
+
+<style scoped>
+.box {
+  height: 150px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/visible.spec.ts b/examples/sites/demos/pc/app/dropdown/visible.spec.ts
@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+
+test('手动控制显隐', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#visible')
+
+  const wrap = page.locator('#visible')
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu').locator('visible=true')
+
+  await wrap.getByText('点击隐藏').click()
+  await expect(dropDownMenu).toHaveCount(0)
+
+  await wrap.getByText('点击显示').click()
+  await expect(dropDownMenu).toHaveCount(1)
+
+  await page.locator('#all-demos-container').click()
+  await expect(dropDownMenu).toHaveCount(1)
+
+  await dropDownMenu.locator('div').filter({ hasText: '黄金糕' }).nth(1).click()
+  await expect(dropDownMenu).toHaveCount(1)
+
+  await wrap.getByText('点击隐藏').click()
+  await expect(dropDownMenu).toHaveCount(0)
+})
diff --git a/examples/sites/demos/pc/app/dropdown/visible.vue b/examples/sites/demos/pc/app/dropdown/visible.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="box">
+    <tiny-dropdown v-model:visible="visible">
+      <div @click="handleClick">点击{{ visible ? '隐藏' : '显示' }}</div>
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item
+            v-for="(item, index) in options"
+            :key="index"
+            :label="item.label"
+            :disabled="item.disabled"
+            :item-data="item"
+          ></tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
+</template>
+
+<script>
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
+  },
+  data() {
+    return {
+      visible: true,
+      options: [
+        {
+          label: '黄金糕'
+        },
+        {
+          label: '狮子头'
+        },
+        {
+          label: '螺蛳粉'
+        },
+        {
+          label: '双皮奶'
+        },
+        {
+          label: '蚵仔煎'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleClick() {
+      this.visible = !this.visible
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box {
+  height: 150px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
@@ -111,6 +111,19 @@ export default {
       },
       codeFiles: ['trigger.vue']
     },
+    {
+      demoId: 'visible',
+      name: {
+        'zh-CN': '手动控制显隐',
+        'en-US': 'Manual control of display and concealment'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>visible</code> 属性手动控制下拉菜单显隐，优先级高于trigger。</p>\n',
+        'en-US':
+          '<p>Manually control the visibility of the dropdown menu through the<code>visible</code>attribute, with priority over trigger.</p>\n'
+      },
+      codeFiles: ['visible.vue']
+    },
     {
       demoId: 'tip',
       name: {
diff --git a/packages/renderless/src/dropdown/index.ts b/packages/renderless/src/dropdown/index.ts
@@ -39,24 +39,28 @@ export const watchFocusing = (parent: IDropdownRenderlessParams['parent']) => (v
 }
 
 export const show =
-  ({ props, state }: Pick<IDropdownRenderlessParams, 'props' | 'state'>) =>
+  ({ props, state, emit }: Pick<IDropdownRenderlessParams, 'props' | 'state' | 'emit'>) =>
   () => {
     if (props.disabled) {
       return
     }
 
-    clearTimeout(Number(state.timeout))
-
-    state.timeout = setTimeout(
-      () => {
-        state.visible = true
-      },
-      state.trigger === 'click' ? 0 : props.showTimeout
-    )
+    if (state.visibleIsBoolean) {
+      emit('update:visible', true)
+    } else {
+      clearTimeout(Number(state.timeout))
+
+      state.timeout = setTimeout(
+        () => {
+          state.visible = true
+        },
+        state.trigger === 'click' ? 0 : props.showTimeout
+      )
+    }
   }
 
 export const hide =
-  ({ api, props, state }: Pick<IDropdownRenderlessParams, 'api' | 'props' | 'state'>) =>
+  ({ api, props, state, emit }: Pick<IDropdownRenderlessParams, 'api' | 'props' | 'state' | 'emit'>) =>
   () => {
     if (props.disabled) {
       return
@@ -68,14 +72,18 @@ export const hide =
       api.resetTabindex(state.triggerElm)
     }
 
-    clearTimeout(Number(state.timeout))
-
-    state.timeout = setTimeout(
-      () => {
-        state.visible = false
-      },
-      state.trigger === 'click' ? 0 : props.hideTimeout
-    )
+    if (state.visibleIsBoolean) {
+      emit('update:visible', false)
+    } else {
+      clearTimeout(Number(state.timeout))
+
+      state.timeout = setTimeout(
+        () => {
+          state.visible = false
+        },
+        state.trigger === 'click' ? 0 : props.hideTimeout
+      )
+    }
   }
 
 export const handleClick =
@@ -85,9 +93,12 @@ export const handleClick =
       return
     }
 
-    emit('handle-click', state.visible)
-
-    state.visible ? api.hide() : api.show()
+    if (state.visibleIsBoolean) {
+      emit('handle-click', props.visible)
+    } else {
+      emit('handle-click', state.visible)
+      state.visible ? api.hide() : api.show()
+    }
   }
 
 export const handleTriggerKeyDown =
@@ -112,7 +123,7 @@ export const handleTriggerKeyDown =
   }
 
 export const handleItemKeyDown =
-  ({ api, props, state }: Pick<IDropdownRenderlessParams, 'api' | 'props' | 'state'>) =>
+  ({ api, props, state, emit }: Pick<IDropdownRenderlessParams, 'api' | 'props' | 'state' | 'emit'>) =>
   (event: KeyboardEvent) => {
     const keyCode = event.keyCode
     const target = event.target
@@ -199,6 +210,10 @@ export const initEvent =
       on(state.triggerElm, 'click', api.toggleFocusOnFalse)
     }
 
+    if (state.visibleIsBoolean) {
+      return
+    }
+
     if (state.trigger === 'hover') {
       on(state.triggerElm, 'mouseenter', api.show)
       on(state.triggerElm, 'mouseleave', api.hide)
@@ -251,7 +266,13 @@ export const handleMainButtonClick =
   }
 
 export const mounted =
-  ({ api, vm, state, broadcast }: Pick<IDropdownRenderlessParams, 'api' | 'vm' | 'state' | 'broadcast'>) =>
+  ({
+    api,
+    vm,
+    state,
+    broadcast,
+    props
+  }: Pick<IDropdownRenderlessParams, 'api' | 'vm' | 'state' | 'broadcast' | 'props'>) =>
   () => {
     if (state.showSelfIcon) {
       state.showIcon = false
@@ -262,7 +283,11 @@ export const mounted =
     vm.$on('selected-index', (selectedIndex) => {
       broadcast('TinyDropdownMenu', 'menu-selected-index', selectedIndex)
     })
-    vm.$on('is-disabled', api.clickOutside)
+    if (!state.visibleIsBoolean) {
+      vm.$on('is-disabled', api.clickOutside)
+    } else if (props.visible) {
+      broadcast('TinyDropdownMenu', 'visible', true)
+    }
   }
 
 export const beforeDistory =
diff --git a/packages/renderless/src/dropdown/vue.ts b/packages/renderless/src/dropdown/vue.ts
@@ -62,7 +62,8 @@ export const renderless = (
     designConfig,
     trigger: computed(() => {
       return props.trigger || designConfig?.props?.trigger || 'hover'
-    })
+    }),
+    visibleIsBoolean: computed(() => typeof props.visible === 'boolean')
   })
 
   provide('dropdownVm', vm)
@@ -71,12 +72,12 @@ export const renderless = (
     state,
     watchVisible: watchVisible({ broadcast, emit, nextTick }),
     watchFocusing: watchFocusing(parent),
-    show: show({ props, state }),
-    hide: hide({ api, props, state }),
-    mounted: mounted({ api, vm, state, broadcast }),
+    show: show({ props, state, emit }),
+    hide: hide({ api, props, state, emit }),
+    mounted: mounted({ api, vm, state, broadcast, props }),
     handleClick: handleClick({ api, props, state, emit }),
     handleTriggerKeyDown: handleTriggerKeyDown({ api, state }),
-    handleItemKeyDown: handleItemKeyDown({ api, props, state }),
+    handleItemKeyDown: handleItemKeyDown({ api, props, state, emit }),
     resetTabindex: resetTabindex(api),
     removeTabindex: removeTabindex(state),
     initAria: initAria({ state, props }),
@@ -91,7 +92,11 @@ export const renderless = (
     toggleFocusOnFalse: toggleFocus({ state, value: false })
   })
 
-  watch(() => state.visible, api.watchVisible)
+  if (typeof props.visible === 'boolean') {
+    watch(() => props.visible, api.watchVisible)
+  } else {
+    watch(() => state.visible, api.watchVisible)
+  }
   watch(() => state.focusing, api.watchFocusing)
 
   onMounted(api.mounted)
diff --git a/packages/renderless/types/dropdown.type.ts b/packages/renderless/types/dropdown.type.ts
@@ -20,14 +20,16 @@ export interface IDropdownState {
   visible: boolean
   timeout: null | NodeJS.Timeout
   focusing: false
-  menuItems: NodeListOf<HTMLElement> | undefined | null
+  menuItems: NodeListOf<HTMLElement> | undefined | null | []
   menuItemsArray: HTMLElement[] | null
   triggerElm: HTMLElement | null
   dropdownElm: HTMLElement | null
   listId: string
   showIcon: boolean
   showSelfIcon: boolean
   designConfig: IDropdownRenderlessParamUtils['designConfig']
+  trigger: 'click' | 'hover'
+  visibleIsBoolean: boolean
 }
 
 export interface IDropdownApi {
diff --git a/packages/vue/src/dropdown/src/index.ts b/packages/vue/src/dropdown/src/index.ts
@@ -4,6 +4,11 @@ import template from 'virtual-template?pc|mobile-first'
 export const dropdownProps = {
   ...$props,
   modelValue: [String, Number],
+  // tiny新增
+  visible: {
+    type: [Boolean, undefined],
+    default: undefined
+  },
   type: String,
   trigger: String, // 默认主题为 'hover'
   size: {
diff --git a/packages/vue/src/dropdown/src/pc.vue b/packages/vue/src/dropdown/src/pc.vue
