寻北

Appearance

DropDown 下拉菜单 ​

将动作或菜单折叠到下拉菜单中。

基础用法 ​

悬停在下拉菜单上以展开更多操作。

通过组件 slot 来设置下拉触发的元素,默认情况下，只需要悬停在触发菜单的元素上即可，无需点击也会显示下拉菜单。

Dropdown List 
<template>
  <vk-drop-down
      :menu-options="menuOptions"
      placement="bottom"
  >
    Dropdown List
  </vk-drop-down>
</template>

<script lang="ts" setup>
import type {MenuOptions} from 'xb-element/dist/types/components/Dropdown/types'
import {h, ref} from "vue";
const menuOptions:MenuOptions[]=[
  { key: 1, label:h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]
</script>

<style scoped>

</style>

位置 ​

设置 placement 属性，使下拉菜单出现在不同位置。

<template>
  <div class="dropdown-base-box">
    <div class="row center">
      <vk-drop-down
          class="box-item"
          :menu-options="menuOptions"
          placement="top"
      >
        <vk-button style="width: 100%;">top</vk-button>
      </vk-drop-down>
    </div>
    <div class="row">
      <vk-drop-down class="box-item"  :menu-options="menuOptions" placement="left">
        <vk-button style="width: 100%;">left</vk-button>
      </vk-drop-down>
      <vk-drop-down class="box-item"  :menu-options="menuOptions"  placement="right">
        <vk-button style="width: 100%;">right</vk-button>
      </vk-drop-down>
    </div>
    <div class="row center">
      <vk-drop-down
          class="box-item"
          :menu-options="menuOptions"
          placement="bottom"
      >
        <vk-button style="width: 100%;">bottom</vk-button>
      </vk-drop-down>
    </div>
  </div>
</template>
<script setup lang="ts">
import type {MenuOptions} from 'xb-element/dist/types/components/Dropdown/types'
import {h, ref} from "vue";

const menuOptions:MenuOptions[]=[
  { key: 1, label:h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]
</script>

<style>
.dropdown-base-box {
  width: 600px;
}
.dropdown-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dropdown-base-box .center {
  justify-content: center;
}
.dropdown-base-box .box-item {
  width: 90px;
  margin-top: 10px;
}
</style>

受控模式 ​

DropDown 可以通过父组件使用 manual 属性手动来控制它的显示与关闭。

<template>
  <vk-drop-down
      :menu-options="menuOptions"
      placement="bottom"
      ref="dropdownRef"
      manual
  >
    <vk-button @click="open">open</vk-button>
    <vk-button @click="close">close</vk-button>
  </vk-drop-down>
</template>

<script lang="ts" setup>
import type {MenuOptions} from 'xb-element/dist/types/components/Dropdown/types'
import {h, ref} from "vue";
import type {TooltipInstance} from "xb-element/dist/types/components/Tooltip/type";
const dropdownRef=ref<TooltipInstance>()
const menuOptions:MenuOptions[]=[
  { key: 1, label:h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]

const open=()=>{
  dropdownRef.value?.show()
}

const close=()=>{
  dropdownRef.value?.hide()
}
</script>

<style scoped>

</style>

触发方式 ​

DropDown 可以通过父组件使用 trigger 属性手动来切换它的触发方式。

<template>
  <div class="dropdownContainer">
    <vk-drop-down
        :menu-options="menuOptions"
        placement="bottom"
        :trigger="clickTrigger"
    >
      <vk-button>click</vk-button>
    </vk-drop-down>
    <vk-drop-down
        :menu-options="menuOptions"
        placement="bottom"
        :trigger="hoverTrigger"
    >
      <vk-button>Hover</vk-button>
    </vk-drop-down>
  </div>
</template>

<script lang="ts" setup>
import type {MenuOptions} from 'xb-element/dist/types/components/Dropdown/types'
import {h, ref} from "vue";

const clickTrigger = ref('click');
const hoverTrigger = ref('hover');
const menuOptions:MenuOptions[]=[
  { key: 1, label:h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]
</script>

<style scoped>
.dropdownContainer {
  width: 200px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>

菜单隐藏方式 ​

可以通过 hideAfterClick 属性来配置。

下拉菜单默认在点击菜单项后会被隐藏，将 hideAfterClick 属性设置为 false 可以关闭此功能。

Dropdown List 
<template>
  <vk-drop-down
      :menu-options="menuOptions"
      placement="bottom"
      trigger="click"
      :hideAfterClick="false"
  >
    Dropdown List
  </vk-drop-down>
</template>

<script lang="ts" setup>
import type {MenuOptions} from 'xb-element/dist/types/components/Dropdown/types'
import {h, ref} from "vue";
const menuOptions:MenuOptions[]=[
  { key: 1, label:h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]
</script>

<style scoped>

</style>

延迟触发 ​

DropDown 可以通过父组件使用 openDelay 和 closeDelay 属性来 延迟它的显示和隐藏

<template>
  <div class="dropdownContainer">
    <vk-drop-down
        :menu-options="menuOptions"
        placement="bottom"
        :open-delay="500"
        :close-delay="200"
    >
      <vk-button>click</vk-button>
    </vk-drop-down>
  </div>
</template>

<script lang="ts" setup>
import type {MenuOptions} from 'xb-element/dist/types/components/Dropdown/types'
import {h, ref} from "vue";

const menuOptions:MenuOptions[]=[
  { key: 1, label:h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]
</script>

<style scoped>
.dropdownContainer {
  width: 200px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>
属性名说明类型默认值
placementTooltip 出现的位置enum - 'left'| 'top'| 'right'| 'bottom'right
trigger下拉框的触发方式（用于显示），在受控模式下无效。enum - 'hover'| 'click'hover
manual手动触发booleanfalse
popperOptionspopper.js 参数object{}
openDelay延迟显示时间（以毫秒为单位），在受控模式下无效。number0
closeDelay消失延迟时间（以毫秒为单位），在受控模式下无效。number0
事件名说明类型
visible-change切换下拉框显示时和关闭时触发，将触发原因作为参数传入。Function
select在选择下拉框时触发。 将触发原因作为参数传入。Function
show在下拉框显示时触发。 将触发原因作为参数传入。Function
hide在下拉框隐藏时触发。 将触发原因作为参数传入。Function
插槽名描述
default下拉框触发及参考元素，只接受单个根元素。
方法名说明类型
hide提供 hide 方法Function
show提供 show 方法Function
属性名说明类型默认值
disabled是否禁用booleanfalse
divided是否显示分隔符booleanfalse