Xin Design

Appearance

Dropdown 下拉菜单 ​

基础用法 ​

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

通过组件 slot 来设置下拉触发的元素以及传入正确的JavaScript数据结构为 dropdown 来设置下拉菜单. 默认情况下,只需要悬停在触发菜单的元素上即可,无需点击也会显示下拉菜单.

Dropdown List
<script setup lang="ts">
import Dropdown from '../../../src/components/Dropdown/Dropdown.vue'
import { MenuOption } from '../../../src/components/Dropdown/types'

const options: MenuOption[] = [
  { key: 1, label: 'Action1' },
  { key: 2, label: 'Action2' },
  { key: 3, label: 'Action3' },
  { key: 4, label: 'Action4' },
  { key: 5, label: 'Action5' }
]

// 监听dropdown的展开与收起
const visibleChange = (e: boolean) => {
  console.log(e)
}
</script>

<template>
  <Dropdown :menu-options="options" @visible-change="visibleChange">Dropdown List</Dropdown>
</template>

<style scoped></style>

触发方式 ​

可以配置点击激活或者悬停激活.

将 trigger 属性设置为 click 即可, 默认为 hover.

hover to trigger

Dropdown List

click to trigger

Dropdown List
<script setup lang="ts">
import Dropdown from '../../../src/components/Dropdown/Dropdown.vue'
import { MenuOption } from '../../../src/components/Dropdown/types'

const options: MenuOption[] = [
  { key: 1, label: 'Action1' },
  { key: 2, label: 'Action2' },
  { key: 3, label: 'Action3' },
  { key: 4, label: 'Action4' },
  { key: 5, label: 'Action5' }
]
</script>

<template>
  <div class="content">
    <div>
      <p class="title">hover to trigger</p>
      <Dropdown :menu-options="options" trigger="hover">Dropdown List</Dropdown>
    </div>

    <div>
      <p class="title">click to trigger</p>
      <Dropdown :menu-options="options" trigger="click">Dropdown List</Dropdown>
    </div>
  </div>
</template>

<style scoped>
.content {
  display: flex;
  justify-content: space-evenly;
}

.title {
  color: #505154;
  font-size: 14px;
}
</style>

指令事件 ​

点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作.

Message组件正在构思中,还暂未开发,请先使用浏览器控制台查看已选中的值!!

Dropdown List
<script setup lang="ts">
import Dropdown from '../../../src/components/Dropdown/Dropdown.vue'
import { MenuOption } from '../../../src/components/Dropdown/types'

const options: MenuOption[] = [
  { key: 1, label: 'Action1' },
  { key: 2, label: 'Action2' },
  { key: 3, label: 'Action3' },
  { key: 4, label: 'Action4' },
  { key: 5, label: 'Action5' }
]

const handleSelect = (e: MenuOption) => {
  console.log(e)
}
</script>

<template>
  <Dropdown :menu-options="options" trigger="click" @select="handleSelect">Dropdown List</Dropdown>
</template>

<style scoped>
.content {
  display: flex;
  justify-content: space-evenly;
}

.title {
  color: #505154;
  font-size: 14px;
}
</style>

手动控制 ​

您可以手动使用 手动打开 或 手动关闭下拉菜单以打开或关闭.

Dropdown List
<script setup lang="ts">
import { ref } from 'vue'
import Dropdown from '../../../src/components/Dropdown/Dropdown.vue'
import { MenuOption, DropdownInstance } from '../../../src/components/Dropdown/types'
import Button from '../../../src/components/Button/Button.vue'

const options: MenuOption[] = [
  { key: 1, label: 'Action1' },
  { key: 2, label: 'Action2' },
  { key: 3, label: 'Action3' },
  { key: 4, label: 'Action4' },
  { key: 5, label: 'Action5' }
]

const dropdownRef = ref<DropdownInstance | null>(null)

const handleDropdown = () => {
  dropdownRef.value?.showDropdown()
}

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

<template>
  <Dropdown ref="dropdownRef" :menu-options="options" manual>Dropdown List</Dropdown>

  <div>
    <Button @click="handleDropdown">打开Dropdown</Button>
    <Button @click="closeDropdown">关闭Dropdown</Button>
  </div>
</template>

<style scoped></style>
属性名说明类型与可选值默认值
disabled是否禁用booleanfalse
trigger触发下拉的行为enum hover clickhover
placement菜单弹出位置string - top top-start top-end bottom bottom-start bottom-endbottom
popper-optionspopper.js 参数 Object - 请参考 popper.js 文档-
事件名说明参数
selectd点击菜单项触发的事件回调dropdown-item 的指令
visible-change下拉框出现/隐藏时触发出现则为 true，隐藏则为 false
插槽名说明子标签
—下拉菜单的内容.注意:必须是有效的 html DOM 元素（例如 <span>、<button> 等）或 xin-component,以附加监听触发器-

Dropdown Methods ​

方法名说明参数
showDropdown打开下拉菜单-
closeDropdown关闭下拉菜单-
属性名说明类型与可选值默认值
select派发到select回调函数的指令参数string/number/object-
disabled是否禁用booleanfalse
divided是否显示分隔符booleanfalse