Virtualized Select 虚拟化选择器 ​

vue

<template>
  <div class="flex flex-wrap gap-4 items-center">
    <w-select-v2
      v-model="value"
      :options="options"
      placeholder="请选择"
      size="large"
      style="width: 240px"
    />
    <w-select-v2
      v-model="value4"
      :options="options"
      placeholder="请选择"
      style="width: 240px"
    />
    <w-select-v2
      v-model="value"
      :options="options"
      :suffix-icon="CaretBottom"
      placeholder="请选择"
      style="width: 240px"
    />
    <w-select-v2
      v-model="value"
      :suffix-icon="Search"
      :suffix-icon-rotate="false"
      :options="options"
      placeholder="请选择"
      size="small"
      style="width: 240px"
    />
    <w-select-v2
      v-model="value"
      :suffix-icon="Search"
      :suffix-icon-rotate="false"
      :options="options"
      placeholder="请选择"
      size="mini"
      style="width: 240px"
    />
    <w-select-v2
      v-model="value"
      plain
      :options="options"
      placeholder="请选择"
      style="width: 240px"
    />
    <w-select-v2
      v-model="value"
      plain
      disabled
      :options="options"
      placeholder="请选择"
      style="width: 240px"
    />
    <w-select-v2
      v-model="value2"
      disabled
      :options="options"
      placeholder="请选择"
      style="width: 240px"
    />
    <w-select-v2
      v-model="value"
      disabled
      :options="options"
      placeholder="请选择"
      style="width: 240px"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CaretBottom, Search } from '@win-design-next/icons-vue'

const initials = [
  `a-WinDesignNext is a basic UI component library developed based
          on Vue. js 3. x`,
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
]

const value = ref()
const value2 = ref('Option 1')
const value4 = ref('Option 1')
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}))
</script>

<style scoped>
.example-showcase .w3-select-v2 {
  margin-right: 20px;
}
</style>

vue

<template>
  <w-select-v2
    v-model="value"
    :options="options"
    placeholder="请选择"
    style="width: 240px"
    multiple
  />
</template>

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

const initials = [
  `a-WinDesignNext is a basic UI component library developed based
          on Vue. js 3. x`,
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
]
const value = ref([])
const options = ref(
  Array.from({ length: 1000 }).map((_, idx) => ({
    value: `Option ${idx + 1}`,
    label: `${initials[idx % 10]}${idx}`,
  }))
)
</script>

vue

<template>
  <div class="m-4">
    <p>use collapse-tags</p>
    <w-select-v2
      v-model="value"
      :options="options"
      placeholder="请选择"
      style="width: 240px"
      multiple
      collapse-tags
    />
  </div>
  <div class="m-4">
    <p>use collapse-tags-tooltip</p>
    <w-select-v2
      v-model="value2"
      :options="options"
      placeholder="请选择"
      style="width: 240px"
      multiple
      collapse-tags
      collapse-tags-tooltip
    />
  </div>
  <div class="m-4">
    <p>use max-collapse-tags</p>
    <w-select-v2
      v-model="value3"
      :options="options"
      placeholder="请选择"
      style="width: 240px"
      multiple
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="3"
    />
  </div>
</template>

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

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value = ref([])
const value2 = ref([])
const value3 = ref([])
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}))
</script>

vue

<template>
  <w-select-v2
    v-model="value"
    filterable
    :options="options"
    placeholder="请选择"
    style="width: 240px"
    multiple
  />
</template>

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

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value = ref([])
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}))
</script>

vue

<template>
  <div class="flex">
    <div class="mr-4">
      <p>多选 + 面板内搜索</p>
      <w-select-v2
        v-model="value"
        :options="options"
        multiple
        filterable
        filterable-dropdown
        placeholder="请选择"
        style="width: 240px"
        @focus="logEvent('focus')"
        @blur="logEvent('blur')"
        @change="handleChange"
      />
    </div>
    <div>
      <p>远程搜索 + 面板内搜索</p>
      <w-select-v2
        v-model="value1"
        :options="remoteOptions"
        multiple
        filterable
        filterable-dropdown
        remote
        :remote-method="remoteMethod"
        :loading="loading"
        placeholder="请输入关键字"
        style="width: 240px"
      />
    </div>
  </div>
  <p class="focus-event-log">
    {{
      events.length
        ? '焦点事件将在此显示：选中项、Esc 或点击选择区收起面板不会触发 blur，仅焦点离开组件时触发'
        : '点击选择区触发 focus；选中项、按 Esc 或再点选择区收起面板不会触发 blur；点击组件外部才会触发 blur'
    }}
  </p>
  <ul v-if="events.length" class="focus-event-log">
    <li v-for="(item, index) in events" :key="index">{{ item }}</li>
  </ul>
</template>

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

const value = ref([])
const value1 = ref([])

const events = ref<string[]>([])

const logEvent = (name: string) => {
  events.value = [...events.value, name].slice(-6)
}

const handleChange = (val: string | string[]) => {
  logEvent(`change：${Array.isArray(val) ? val.join('、') : val}`)
}

const initials = ['原发性高血压', '2型糖尿病', '冠心病', '肺炎', '脑梗死']

const options = initials.map((label, index) => ({
  value: `Option${index + 1}`,
  label,
}))

const loading = ref(false)
const remoteOptions = ref<typeof options>([])

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      remoteOptions.value = options.filter((item) => item.label.includes(query))
    }, 200)
  } else {
    remoteOptions.value = []
  }
}
</script>

<style scoped>
.focus-event-log {
  margin-top: 8px;
  font-size: 13px;
  color: var(--w3-font-color-secondary);
}
</style>

vue

<template>
  <w-select-v2
    v-model="value"
    filterable
    :options="options"
    placeholder="请选择"
    style="width: 240px; margin-right: 16px; vertical-align: middle"
    multiple
  />
  <w-select-v2
    v-model="value"
    disabled
    filterable
    :options="options"
    placeholder="请选择"
    style="width: 240px; vertical-align: middle"
    multiple
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value = ref([])
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
  disabled: idx % 10 === 0,
}))
</script>

vue

<template>
  <w-select-v2
    v-model="value"
    filterable
    :options="options"
    placeholder="请选择"
    style="width: 240px"
    multiple
  />
</template>

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

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value = ref([])
const options = Array.from({ length: 10 }).map((_, idx) => {
  const label = idx + 1
  return {
    value: `Group ${label}`,
    label: `Group ${label}`,
    options: Array.from({ length: 10 }).map((_, idx) => ({
      value: `Option ${idx + 1 + 10 * label}`,
      label: `${initials[idx % 10]}${idx + 1 + 10 * label}`,
    })),
  }
})
</script>

vue

<template>
  <w-select-v2
    v-model="value1"
    :options="options"
    placeholder="请选择"
    style="width: 240px; margin-right: 16px; vertical-align: middle"
    multiple
    clearable
  />
  <w-select-v2
    v-model="value2"
    :options="options"
    placeholder="请选择"
    style="width: 240px; vertical-align: middle"
    clearable
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value1 = ref([])
const value2 = ref()
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}))
</script>

vue

<template>
  <w-select-v2
    v-model="value"
    filterable
    :options="options"
    placeholder="请选择"
    style="width: 240px"
    multiple
  >
    <template #default="{ item }">
      <span style="margin-right: 8px">{{ item.label }}</span>
      <span style="color: var(--w3-font-color-third); font-size: 13px">
        {{ item.value }}
      </span>
    </template>
  </w-select-v2>
</template>

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

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value = ref([])
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}))
</script>

vue

<template>
  <w-select-v2
    v-model="value"
    :options="options"
    multiple
    clearable
    collapse-tags
    placeholder="Select"
    popper-class="custom-header"
    :max-collapse-tags="1"
    style="width: 240px"
  >
    <template #header>
      <w-checkbox
        v-model="checkAll"
        :indeterminate="indeterminate"
        @change="handleCheckAll"
      >
        All
      </w-checkbox>
    </template>
  </w-select-v2>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

import type { CheckboxValueType } from 'win-design-next'

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const checkAll = ref(false)
const indeterminate = ref(false)
const value = ref<CheckboxValueType[]>([])
const options = ref(
  Array.from({ length: 1000 }).map((_, idx) => ({
    value: `Option ${idx + 1}`,
    label: `${initials[idx % 10]}${idx}`,
  }))
)

watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === options.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  if (val) {
    value.value = options.value.map((_) => _.value)
  } else {
    value.value = []
  }
}
</script>

<style>
.custom-header {
  .w3-checkbox {
    display: flex;
    height: unset;
  }
}
</style>

vue

<template>
  <w-select-v2
    ref="select"
    v-model="value"
    :options="options"
    placeholder="Select"
    style="width: 240px"
  >
    <template #footer>
      <w-button v-if="!isAdding" text bg size="small" @click="onAddOption">
        Add an option
      </w-button>
      <div v-else class="select-footer">
        <w-input
          v-model="optionName"
          class="option-input"
          placeholder="input option name"
          size="small"
        />
        <div>
          <w-button type="primary" size="small" @click="onConfirm">
            confirm
          </w-button>
          <w-button size="small" @click="clear">cancel</w-button>
        </div>
      </div>
    </template>
  </w-select-v2>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'

import type { CheckboxValueType, WSelectV2 } from 'win-design-next'

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const select = ref<InstanceType<typeof WSelectV2>>()
const isAdding = ref(false)
const value = ref<CheckboxValueType[]>([])
const optionName = ref('')
const options = ref(
  Array.from({ length: 1000 }).map((_, idx) => ({
    value: `Option ${idx + 1}`,
    label: `${initials[idx % 10]}${idx}`,
  }))
)

const onAddOption = () => {
  isAdding.value = true
}

const onConfirm = () => {
  if (optionName.value) {
    options.value.push({
      label: optionName.value,
      value: optionName.value,
    })
    clear()
    nextTick(() => {
      select.value?.scrollTo(options.value.length - 1)
    })
  }
}

const clear = () => {
  optionName.value = ''
  isAdding.value = false
}
</script>

<style>
.select-footer {
  display: flex;
  flex-direction: column;

  .option-input {
    width: 100%;
    margin-bottom: 8px;
  }
}
</style>

vue

<template>
  <div style="flex: auto">
    <div>
      <w-select-v2
        v-model="value1"
        :options="options"
        placeholder="请选择"
        style="width: 240px; margin-right: 16px; vertical-align: middle"
        allow-create
        filterable
        multiple
        clearable
      />
      <w-select-v2
        v-model="value2"
        :options="options"
        placeholder="请选择"
        style="width: 240px; vertical-align: middle"
        allow-create
        filterable
        clearable
      />
    </div>
    <div>
      <p style="margin-top: 20px; margin-bottom: 8px">
        set reserve-keyword false
      </p>
      <w-select-v2
        v-model="value3"
        :options="options"
        placeholder="请选择"
        style="width: 240px; margin-right: 16px; vertical-align: middle"
        allow-create
        filterable
        multiple
        clearable
        :reserve-keyword="false"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value1 = ref([])
const value2 = ref()
const value3 = ref([])
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}))
</script>

vue

<template>
  <div class="flex flex-wrap">
    <div class="m-4">
      <w-select-v2
        v-model="value"
        style="width: 240px"
        multiple
        filterable
        remote
        :remote-method="remoteMethod"
        clearable
        :options="options"
        :loading="loading"
        placeholder="请输入关键字搜索"
      />
    </div>
  </div>
</template>

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

const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming',
]
const list = states.map((item): ListItem => {
  return { value: `value:${item}`, label: `label:${item}` }
})

interface ListItem {
  value: string
  label: string
}

const value = ref([])
const options = ref<ListItem[]>([])
const loading = ref(false)

const remoteMethod = (query: string) => {
  if (query !== '') {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = list.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  } else {
    options.value = []
  }
}
</script>

vue

<template>
  <w-select-v2
    v-model="value"
    :options="options"
    placeholder="请选择"
    value-key="name"
    style="width: 240px"
  />
</template>

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

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value = ref({ name: 'Option 1', test: 'test 0' })
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: {
    name: `Option ${idx + 1}`,
    test: `test ${idx % 3}`,
  },
  label: `${initials[idx % 10]}${idx}`,
}))
</script>

<style scoped>
.example-showcase .w3-select-v2 {
  margin-right: 20px;
}
</style>

vue

<template>
  <w-select-v2
    v-model="value"
    :options="options"
    :props="props"
    placeholder="请选择"
    style="width: 240px"
    filterable
    multiple
  />
</template>

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

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const props = {
  label: 'name',
  value: 'id',
}
const value = ref([])
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  id: `Option ${idx + 1}`,
  name: `${initials[idx % 10]}${idx}`,
}))
</script>

vue

<template>
  <w-select-v2
    v-model="value"
    multiple
    placeholder="Select"
    :options="colors"
    style="width: 240px"
  >
    <template #default="{ item }">
      <div class="flex items-center">
        <w-tag :color="item.value" style="margin-right: 8px" size="mini" />
        <span :style="{ color: item.value }">{{ item.label }}</span>
      </div>
    </template>
    <template #tag>
      <w-tag v-for="color in value" :key="color" size="mini" :color="color" />
    </template>
  </w-select-v2>
</template>

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

const value = ref<string[]>([])
const colors = [
  {
    value: '#E63415',
    label: 'red',
  },
  {
    value: '#FF6600',
    label: 'orange',
  },
  {
    value: '#FFDE0A',
    label: 'yellow',
  },
  {
    value: '#1EC79D',
    label: 'green',
  },
  {
    value: '#14CCCC',
    label: 'cyan',
  },
  {
    value: '#4167F0',
    label: 'blue',
  },
  {
    value: '#6222C9',
    label: 'purple',
  },
]
colors.forEach((color) => {
  value.value.push(color.value)
})
</script>

<style scoped>
.w3-tag {
  border: none;
  aspect-ratio: 1;
}
</style>

vue

<template>
  <div class="flex flex-wrap">
    <div class="m-4">
      <p>loading icon1</p>
      <w-select-v2
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="Please enter a keyword"
        :remote-method="remoteMethod"
        :loading="loading"
        :options="options"
        style="width: 240px"
      >
        <template #loading>
          <svg class="circular" viewBox="0 0 50 50">
            <circle class="path" cx="25" cy="25" r="20" fill="none" />
          </svg>
        </template>
      </w-select-v2>
    </div>
    <div class="m-4">
      <p>loading icon2</p>
      <w-select-v2
        v-model="value"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="Please enter a keyword"
        :remote-method="remoteMethod"
        :loading="loading"
        :options="options"
        style="width: 240px"
      >
        <template #loading>
          <w-icon class="is-loading">
            <svg class="circular" viewBox="0 0 20 20">
              <g
                class="path2 loading-path"
                stroke-width="0"
                style="animation: none; stroke: none"
              >
                <circle r="3.375" class="dot1" rx="0" ry="0" />
                <circle r="3.375" class="dot2" rx="0" ry="0" />
                <circle r="3.375" class="dot4" rx="0" ry="0" />
                <circle r="3.375" class="dot3" rx="0" ry="0" />
              </g>
            </svg>
          </w-icon>
        </template>
      </w-select-v2>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

interface ListItem {
  value: string
  label: string
}

const list = ref<ListItem[]>([])
const options = ref<ListItem[]>([])
const value = ref<string[]>([])
const loading = ref(false)

onMounted(() => {
  list.value = states.map((item) => {
    return { value: `value:${item}`, label: `label:${item}` }
  })
})

const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = list.value.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 3000)
  } else {
    options.value = []
  }
}

const states = [
  'Alabama',
  'Alaska',
  'Arizona',
  'Arkansas',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawaii',
  'Idaho',
  'Illinois',
  'Indiana',
  'Iowa',
  'Kansas',
  'Kentucky',
  'Louisiana',
  'Maine',
  'Maryland',
  'Massachusetts',
  'Michigan',
  'Minnesota',
  'Mississippi',
  'Missouri',
  'Montana',
  'Nebraska',
  'Nevada',
  'New Hampshire',
  'New Jersey',
  'New Mexico',
  'New York',
  'North Carolina',
  'North Dakota',
  'Ohio',
  'Oklahoma',
  'Oregon',
  'Pennsylvania',
  'Rhode Island',
  'South Carolina',
  'South Dakota',
  'Tennessee',
  'Texas',
  'Utah',
  'Vermont',
  'Virginia',
  'Washington',
  'West Virginia',
  'Wisconsin',
  'Wyoming',
]
</script>

<style>
.w3-select-dropdown__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--w3-color-primary);
  stroke-linecap: round;
}
.loading-path .dot1 {
  transform: translate(3.75px, 3.75px);
  fill: var(--w3-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
}
.loading-path .dot2 {
  transform: translate(calc(100% - 3.75px), 3.75px);
  fill: var(--w3-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.4s;
}
.loading-path .dot3 {
  transform: translate(3.75px, calc(100% - 3.75px));
  fill: var(--w3-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 1.2s;
}
.loading-path .dot4 {
  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
  fill: var(--w3-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.8s;
}
@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}
@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}
</style>

vue

<template>
  <w-select-v2
    v-model="value"
    :options="options"
    :empty-values="[null, undefined]"
    :value-on-clear="null"
    clearable
    placeholder="Select"
    style="width: 240px"
    @clear="handleClear"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { WMessage } from 'win-design-next'

const value = ref('')

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}))

options.unshift({
  value: '',
  label: 'All',
})

const handleClear = () => {
  WMessage.info(`The clear value is: ${value.value}`)
}
</script>

vue

<template>
  <div class="flex flex-wrap gap-4 items-center">
    <w-select-v2
      v-model="value1"
      :options="options"
      placeholder="Select"
      style="width: 240px"
      clearable
    >
      <template #label="{ label, value }">
        <span>{{ label }}: </span>
        <span style="font-weight: bold">{{ value }}</span>
      </template>
    </w-select-v2>

    <w-select-v2
      v-model="value2"
      :options="options"
      placeholder="Select"
      style="width: 240px"
      clearable
      multiple
    >
      <template #label="{ label, value }">
        <span>{{ label }}: </span>
        <span style="font-weight: bold">{{ value }}</span>
      </template>
    </w-select-v2>
  </div>
</template>

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

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
const value1 = ref<string>('Option 1')
const value2 = ref<string[]>(['Option 1'])
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}))
</script>

<style scoped></style>

vue

<template>
  <div class="flex flex-wrap gap-4 items-center">
    <w-select-v2
      v-model="value"
      :options="options"
      placeholder="请选择"
      style="width: 240px"
      :fit-input-width="false"
    />

    <w-select-v2
      v-model="value"
      :options="options"
      placeholder="请选择"
      style="width: 240px"
      fit-input-width
    />

    <w-select-v2
      v-model="value"
      :options="options"
      placeholder="请选择"
      style="width: 240px"
      :fit-input-width="440"
    >
      <template #default="{ item }">
        <span>{{ item.value + item.label }}</span>
      </template>
    </w-select-v2>
  </div>
</template>

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

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value = ref()
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}${'-'.repeat(Math.ceil(idx / 25))}`,
}))
</script>

vue

<template>
  <w-form label-position="top" label-width="0">
    <div style="display: flex; flex-wrap: wrap; gap: 24px">
      <div style="width: 280px">
        <p class="tips">
          选项按 <code>value</code> 固定渲染为
          <code>下拉选项::&lt;value&gt;</code>；控件未写时回退 form-item。
        </p>
        <w-form-item label="过敏史" aria-label="表单-过敏史">
          <w-select-v2
            v-model="allergy"
            :options="allergyOptions"
            placeholder="选择过敏史"
          />
        </w-form-item>
      </div>
      <div style="width: 280px">
        <p class="tips">
          控件自身的 <code>aria-label</code> 优先；必填用
          <code>aria-required</code> 落到内部 input。
        </p>
        <w-form-item label="城市" required aria-label="表单-城市">
          <w-select-v2
            v-model="city"
            aria-label="选择城市"
            :options="cityOptions"
            placeholder="选择城市"
          />
        </w-form-item>
      </div>
    </div>
  </w-form>
</template>

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

const allergy = ref(null)
const city = ref(null)

const allergyOptions = [
  { value: '1', label: '青霉素' },
  { value: '2', label: '头孢曲松' },
  { value: '3', label: '无' },
]
const cityOptions = [
  { value: '1', label: '厦门' },
  { value: '2', label: '福州' },
]
</script>

<style scoped>
.tips {
  margin-bottom: 8px;
  font-size: 13px;
}
</style>