组合

SelectMenu 提供的各种各样的组件组合应用场景实例

多分组搜索选择

组合了文本搜索、多分组与单项选择等功能的应用场景

Select your NBA team

template

<SelectMenuDropdown>
  <template #trigger>
    <SelectMenuTrigger>{{ selected || 'Open' }}</SelectMenuTrigger>
  </template>

  <SelectMenuBody>
    <SelectMenuSubHeader>NBA teams</SelectMenuSubHeader>
    <SelectMenuSearch @search="handleSearch" />
    <SelectMenuDivider />
    <SelectMenuRadioGroup v-model="selected">
      <SelectMenuGroup>
        <SelectMenuGroupItem
          name="east"
          title="East"
        >
          <SelectMenuSection style="max-height: 250px;">
            <SelectMenuRadioItem
              :key="item.id"
              :value="item.name"
              v-for="item in filteredEastTeams"
            >
              {{ item.name }}
            </SelectMenuRadioItem>
          </SelectMenuSection>
        </SelectMenuGroupItem>
        <SelectMenuGroupItem
          name="west"
          title="West"
        >
          <SelectMenuSection style="max-height: 250px;">
            <SelectMenuRadioItem
              :key="item.id"
              :value="item.name"
              v-for="item in filteredWestTeams"
            >
              {{ item.name }}
            </SelectMenuRadioItem>
          </SelectMenuSection>
        </SelectMenuGroupItem>
      </SelectMenuGroup>
    </SelectMenuRadioGroup>
  </SelectMenuBody>
</SelectMenuDropdown>

<button
  type="button"
  @click="selected = ''"
>Clear selection</button>

js

import { ref, computed } from 'vue'

import {
  SelectMenuDropdown,
  SelectMenuTrigger,
  SelectMenuBody,
  SelectMenuDivider,
  SelectMenuSearch,
  SelectMenuGroup,
  SelectMenuGroupItem,
  SelectMenuRadioGroup,
  SelectMenuRadioItem,
  SelectMenuSection
} from 'v-selectmenu'

import { eastTeams, westTeams } from './data'

const search = ref('')
const selected = ref('')

const filteredEastTeams = computed(() => {
  if (!search.value) return eastTeams
  return eastTeams.filter(val => val.name.includes(search.value))
})
const filteredWestTeams = computed(() => {
  if (!search.value) return westTeams
  return westTeams.filter(val => val.name.includes(search.value))
})

function handleSearch (value) {
  search.value = value
}

data source

export const eastTeams = [
  {id:1 ,name:'Chicago Bulls'},
  {id:2 ,name:'Cleveland Cavaliers'},
  {id:3 ,name:'Detroit Pistons'},
  ...
]
export const westTeams = [
  {id:16,name:'Denver Nuggets'},
  {id:17,name:'Minnesota Timberwolves'},
  {id:18,name:'Oklahoma City Thunder'},
  {id:19,name:'Portland Trail Blazers'},
  ...
]

可选择的多级菜单

Interests: [ "Jobs", "Video games" ]

Language: English

菜单里使用的图标来自于 Bootstrap Icons

template

<SelectMenuDropdown>
  <template #trigger>
    <SelectMenuTrigger>User Setting</SelectMenuTrigger>
  </template>

  <SelectMenuBody>
    <SelectMenuSubHeader>Account: Terry</SelectMenuSubHeader>
    <SelectMenuDivider />
    <SelectMenuItem>
      <template #prepend>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
          <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6"/>
        </svg>
      </template>
      Notifications
    </SelectMenuItem>
    <SelectMenuChildLevel>
      <template #trigger>
        <SelectMenuItem>
          <template #prepend>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-translate" viewBox="0 0 16 16">
              <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z"/>
              <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31"/>
            </svg>
          </template>
          Language
        </SelectMenuItem>
      </template>

      <SelectMenuRadioGroup v-model="language">
        <SelectMenuRadioItem value="Simplified Chinese">Simplified Chinese</SelectMenuRadioItem>
        <SelectMenuRadioItem value="English">English</SelectMenuRadioItem>
        <SelectMenuRadioItem value="German - Deutsch">German - Deutsch</SelectMenuRadioItem>
        <SelectMenuRadioItem value="Dutch - Nederlands">Dutch - Nederlands</SelectMenuRadioItem>
        <SelectMenuRadioItem value="Portuguese - Portugal">Portuguese - Portugal</SelectMenuRadioItem>
      </SelectMenuRadioGroup>
    </SelectMenuChildLevel>
    <SelectMenuChildLevel>
      <template #trigger>
        <SelectMenuItem>
          <template #prepend>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16">
              <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"/>
            </svg>
          </template>
          Interests
        </SelectMenuItem>
      </template>

      <SelectMenuCheckboxGroup v-model="interests">
        <SelectMenuCheckboxItem value="Social News">Social News</SelectMenuCheckboxItem>
        <SelectMenuCheckboxItem value="Events">Events</SelectMenuCheckboxItem>
        <SelectMenuCheckboxItem value="Video games">Video games</SelectMenuCheckboxItem>
        <SelectMenuCheckboxItem value="Jobs">Jobs</SelectMenuCheckboxItem>
      </SelectMenuCheckboxGroup>
    </SelectMenuChildLevel>

    <SelectMenuItem>
      <template #prepend>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle" viewBox="0 0 16 16">
          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
          <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"/>
        </svg>
      </template>
      Helps
    </SelectMenuItem>
    <SelectMenuItem>
      <template #prepend>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
          <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
          <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
        </svg>
      </template>
      More settings
    </SelectMenuItem>
    <SelectMenuDivider />
    <SelectMenuItem>
      <template #prepend>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z"/>
          <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z"/>
        </svg>
      </template>
      Logout
    </SelectMenuItem>
  </SelectMenuBody>
</SelectMenuDropdown>

js

import { ref } from 'vue'

import {
  SelectMenuDropdown,
  SelectMenuTrigger,
  SelectMenuBody,
  SelectMenuSubHeader,
  SelectMenuDivider,
  SelectMenuItem,
  SelectMenuChildLevel,
  SelectMenuRadioGroup,
  SelectMenuRadioItem,
  SelectMenuCheckboxGroup,
  SelectMenuCheckboxItem
} from 'v-selectmenu'

const interests = ref(['Jobs', 'Video games'])
const language = ref('English')