DropdownSelect 下拉选择

下拉选择，可用于按钮下拉选择

基本用法

请选择

点击查看代码

<template>
  <s-dropdown-select style="width: 200px;" :options="options" @select="handleDropdownSelect">
    <el-button>下拉选择</el-button>
  </s-dropdown-select>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const options = ref<Record<string, any>>([
    { label: "选项一", value: "item1" },
    { label: "选项二", value: "item2" },
    { label: "选项三", value: "item3" }
  ]);

  const handleDropdownSelect = (value: string) => {
    console.log(value);
  };
</script>

选项分组

请选择

点击查看代码

<template>
  <s-dropdown-select style="width: 200px;" :options="options" @select="handleDropdownSelect">
    <el-button>下拉选择</el-button>
  </s-dropdown-select>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const options = ref<Record<string, any>>([
    { label: "选项一", value: "item1" },
    {
      label: "分组一",
      options: [
        { label: "组一选项一", value: "group1-item1" },
        { label: "组一选项二", value: "group1-item2" }
      ]
    },
    {
      label: "分组二",
      options: [
        { label: "组二选项一", value: "group2-item1" },
        { label: "组二选项二", value: "group2-item2" }
      ]
    }
  ]);

  const handleDropdownSelect = (value: string) => {
    console.log(value);
  };
</script>

Props

Slots

Emits