Yy Craft

主题

Dropdown 下拉菜单 ​

基本用法 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const options = ref([
  { label: '选项1', key: '1' },
  { label: '选项2', key: '2' },
  { label: '选项3', key: '3' },
])
</script>

<template>
  <yy-dropdown :options="options">
    <yy-button>下拉菜单</yy-button>
  </yy-dropdown>
</template>

图标 ​

查看示例
vue
<script setup lang="ts">
import { AlarmOutline } from '@vicons/ionicons5'
import { h, ref } from 'vue'

const options = ref([
  {
    label: '选项1',
    key: '1',
    icon: () => h(AlarmOutline),
  },
  {
    label: '选项2',
    key: '2',
    icon: () => h(AlarmOutline),
    type: 'group' as const,
  },
  {
    label: '选项3',
    key: '3',
    icon: () => h(AlarmOutline),
  },
])
</script>

<template>
  <yy-dropdown :options="options">
    <yy-button>带图标</yy-button>
  </yy-dropdown>
</template>

分组 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const options = ref([
  {
    label: '选项1',
    key: '1',
  },
  {
    label: '选项2',
    key: '2',
    type: 'group' as const,
    children: [
      {
        label: '选项2-1',
        key: '2-1',
      },
    ],
  },
])
</script>

<template>
  <yy-dropdown :options="options">
    <yy-button>分组</yy-button>
  </yy-dropdown>
</template>

嵌套 ​

查看示例
vue
<script setup lang="ts">
import { ref } from 'vue'

const options = ref([
  {
    label: '选项1',
    key: '1',
  },
  {
    label: '选项2',
    key: '2',
    children: [
      {
        label: '选项2-1',
        key: '2-1',
      },
    ],
  },
])
</script>

<template>
  <yy-dropdown :options="options">
    <yy-button>嵌套</yy-button>
  </yy-dropdown>
</template>

二级菜单触发位置 ​

查看示例
vue
<script setup lang="ts">
import type { DropdownOption } from 'yy-craft'
import { AlarmOutline } from '@vicons/ionicons5'
import { h } from 'vue'

const basicMenuOptions: DropdownOption[] = [
  {
    label: '曾姐老火锅',
    key: '曾姐老火锅',
  },
  {
    label: '南湖春天冒菜',
    key: '南湖春天冒菜',
    icon: () => h(AlarmOutline),
    children: [
      {
        label: '好吃',
        key: '好吃',
        icon: () => h(AlarmOutline),
        children: [
          {
            label: '什么都没有1',
            key: '什么都没有1',
          },
          {
            label: '什么都没有2',
            key: '什么都没有2',
            icon: () => h(AlarmOutline),
          },
        ],
      },
      {
        label: '把这个item撑大一点',
        key: '把这个item撑大一点',
      },
    ],
  },
  {
    label: '剁椒鱼头',
    key: '剁椒鱼头',
    children: [
      {
        label: '大餐',
        key: '大餐',
        type: 'group',
        children: [
          {
            label: '剁椒',
            key: '剁椒',
          },
          {
            label: '鱼头',
            key: '鱼头',
          },
        ],
      },
    ],
  },
  {
    label: '南湖春天串串',
    key: '南湖春天串串',
  },
  {
    label: '南瓜土豆汤',
    key: '南瓜土豆汤',
    icon: () => h(AlarmOutline),
  },
]
</script>

<template>
  <yy-dropdown sub-placement="bottom-start" :options="basicMenuOptions">
    <yy-button>点我</yy-button>
  </yy-dropdown>
</template>

可选中 ​

查看示例
vue
<script setup lang="ts">
import type { DropdownOption } from 'yy-craft'
import { AlarmOutline } from '@vicons/ionicons5'
import { h } from 'vue'

const basicMenuOptions: DropdownOption[] = [
  {
    label: '曾姐老火锅',
    key: '曾姐老火锅',
  },
  {
    label: '南湖春天冒菜',
    key: '南湖春天冒菜',
    icon: () => h(AlarmOutline),
    children: [
      {
        label: '好吃',
        key: '好吃',
        icon: () => h(AlarmOutline),
        children: [
          {
            label: '什么都没有1',
            key: '什么都没有1',
          },
          {
            label: '什么都没有2',
            key: '什么都没有2',
            icon: () => h(AlarmOutline),
          },
        ],
      },
      {
        label: '把这个item撑大一点',
        key: '把这个item撑大一点',
      },
    ],
  },
  {
    label: '剁椒鱼头',
    key: '剁椒鱼头',
    children: [
      {
        label: '大餐',
        key: '大餐',
        type: 'group',
        children: [
          {
            label: '剁椒',
            key: '剁椒',
          },
          {
            label: '鱼头',
            key: '鱼头',
          },
        ],
      },
    ],
  },
  {
    label: '南湖春天串串',
    key: '南湖春天串串',
  },
  {
    label: '南瓜土豆汤',
    key: '南瓜土豆汤',
    icon: () => h(AlarmOutline),
  },
]
</script>

<template>
  <yy-dropdown selectable :options="basicMenuOptions">
    <yy-button>点我</yy-button>
  </yy-dropdown>
</template>

默认选中 ​

查看示例
vue
<script setup lang="ts">
import type { DropdownOption } from 'yy-craft'
import { AlarmOutline } from '@vicons/ionicons5'
import { h, ref } from 'vue'

const basicMenuOptions: DropdownOption[] = [
  {
    label: '曾姐老火锅',
    key: '曾姐老火锅',
  },
  {
    label: '南湖春天冒菜',
    key: '南湖春天冒菜',
    icon: () => h(AlarmOutline),
    children: [
      {
        label: '好吃',
        key: '好吃',
        icon: () => h(AlarmOutline),
        children: [
          {
            label: '什么都没有1',
            key: '什么都没有1',
          },
          {
            label: '什么都没有2',
            key: '什么都没有2',
            icon: () => h(AlarmOutline),
          },
        ],
      },
      {
        label: '把这个item撑大一点',
        key: '把这个item撑大一点',
      },
    ],
  },
  {
    label: '剁椒鱼头',
    key: '剁椒鱼头',
    children: [
      {
        label: '大餐',
        key: '大餐',
        type: 'group',
        children: [
          {
            label: '剁椒',
            key: '剁椒',
          },
          {
            label: '鱼头',
            key: '鱼头',
          },
        ],
      },
    ],
  },
  {
    label: '南湖春天串串',
    key: '南湖春天串串',
  },
  {
    label: '南瓜土豆汤',
    key: '南瓜土豆汤',
    icon: () => h(AlarmOutline),
  },
]

const selectedKeys = ref(['什么都没有1'])
</script>

<template>
  <yy-dropdown
    v-model:selected-keys="selectedKeys"
    selectable
    :options="basicMenuOptions"
  >
    <yy-button>点我</yy-button>
  </yy-dropdown>
</template>

触发方式 ​

查看示例
vue
<script setup lang="ts">
import type { DropdownOption } from 'yy-craft'
import { ref } from 'vue'

const basicMenuOptions: DropdownOption[] = [
  {
    label: '选项1',
    key: '选项1',
  },
]

const showDropdown = ref(false)
</script>

<template>
  <yy-flex>
    <yy-dropdown :options="basicMenuOptions">
      <yy-button>点击</yy-button>
    </yy-dropdown>
    <yy-dropdown trigger="hover" :options="basicMenuOptions">
      <yy-button>悬浮</yy-button>
    </yy-dropdown>
    <yy-dropdown trigger="focus" :options="basicMenuOptions">
      <yy-button>聚焦</yy-button>
    </yy-dropdown>
    <yy-dropdown
      trigger="manual"
      :show-popover="showDropdown"
      :options="basicMenuOptions"
    >
      <yy-button>点我是没有的, 试试旁边的复选框</yy-button>
    </yy-dropdown>

    <yy-checkbox v-model="showDropdown" label="切换手动" />
  </yy-flex>
</template>

手动控制下拉框显示 ​

查看示例
vue
<script setup lang="ts">
import type { DropdownOption } from 'yy-craft'

const basicMenuOptions: DropdownOption[] = [
  {
    label: '选项1',
    key: '选项1',
  },
]
</script>

<template>
  <yy-dropdown placement="right" show-popover :options="basicMenuOptions">
    <yy-button>点我</yy-button>
  </yy-dropdown>
</template>

设置元素的显示位置 ​

查看示例
vue
<script setup lang="ts">
import type { DropdownOption } from 'yy-craft'

const basicMenuOptions: DropdownOption[] = [
  {
    label: '选项1',
    key: '选项1',
  },
]

const allPlacement = [
  'top-start',
  'top',
  'top-end',
  'left-start',
  '', // 不渲染
  'right-start',
  'left',
  '', // 不渲染
  'right',
  'left-end',
  '', // 不渲染
  'right-end',
  'bottom-start',
  'bottom',
  'bottom-end',
] as const
</script>

<template>
  <div style="width: 50%">
    <yy-grid cols="3" :gap="10">
      <yy-gi
        v-for="item in allPlacement"
        :key="item"
        :style="{ display: 'flex', justifyContent: 'center' }"
      >
        <template v-if="item">
          <yy-dropdown
            :placement="item"
            trigger="hover"
            :options="basicMenuOptions"
          >
            <yy-button>{{ item }}</yy-button>
          </yy-dropdown>
        </template>
      </yy-gi>
    </yy-grid>
  </div>
</template>

设置元素的挂载位置 ​

查看示例
vue
<script setup lang="ts">
import type { DropdownOption } from 'yy-craft'

const basicMenuOptions: DropdownOption[] = [
  {
    label: '选项1',
    key: '选项1',
  },
]
</script>

<template>
  <yy-dropdown :to="false" :options="basicMenuOptions">
    <yy-button>点我</yy-button>
  </yy-dropdown>
</template>

设置包裹元素 ​

查看示例
vue
<script setup lang="ts">
import type { DropdownOption } from 'yy-craft'

const basicMenuOptions: DropdownOption[] = [
  {
    label: '选项1',
    key: '选项1',
  },
]
</script>

<template>
  <yy-dropdown
    :to="false"
    wrapper
    :options="basicMenuOptions"
    wrapper-style="width: 200px;"
  >
    <yy-button>点我</yy-button>
  </yy-dropdown>
</template>

不要箭头 ​

查看示例
vue
<script setup lang="ts">
import type { DropdownOption } from 'yy-craft'

const basicMenuOptions: DropdownOption[] = [
  {
    label: '选项1',
    key: '选项1',
  },
]
</script>

<template>
  <yy-dropdown :show-arrow="false" :options="basicMenuOptions">
    <yy-button>点我</yy-button>
  </yy-dropdown>
</template>

设置层级 ​

查看示例
vue
<script setup lang="ts">
import type { DropdownOption } from 'yy-craft'

const basicMenuOptions: DropdownOption[] = [
  {
    label: '选项1',
    key: '选项1',
  },
]
</script>

<template>
  <yy-dropdown :z-index="1" :options="basicMenuOptions">
    <yy-button>点我</yy-button>
  </yy-dropdown>
</template>

Props ​

参数说明类型默认值
options下拉菜单选项DropdownOption[][]
selectable是否可选中boolean-
selectedKeys选中的key值Array<string | number | symbol>[]
subPlacement子菜单弹出位置DefaultPlacement'right-start'
trigger触发方式'click' | 'hover' | 'focus' | 'manual''click'
showPopover手动控制下拉框显示boolean-
showArrow是否显示箭头booleantrue
zIndex弹出层层级number-
placement弹出位置DefaultPlacement'bottom'
to弹出层挂载位置string | RendererElement | boolean'body'
wrapper是否使用包裹元素booleanfalse
wrapperClass包裹元素类名any-
wrapperStyle包裹元素样式StyleValue-

Slots ​

插槽名说明
trigger触发器元素
default触发下拉的元素