TagSelect 标签选择

代码演示

基础用法

<script setup>
import { ref } from 'vue'

const options = ref([
  { label: '类目1', value: 1 },
  { label: '类目2', value: 2 },
  { label: '类目3', value: 3 },
  { label: '类目4', value: 4 },
  { label: '类目5', value: 5 },
  { label: '类目6', value: 6 },
])
const options2 = ref([
  {
    value: 'china',
    label: 'China (中国)',
    icon: '🇨🇳',
  },
  {
    value: 'usa',
    label: 'USA (美国)',
    icon: '🇺🇸',
  },
  {
    value: 'japan',
    label: 'Japan (日本)',
    icon: '🇯🇵',
  },
  {
    value: 'korea',
    label: 'Korea (韩国)',
    icon: '🇨🇰',
  },
])
const selectedKeys = ref([])
</script>

<template>
  <a-space
    :size="24"
    direction="vertical"
  >
    <x-tag-select
      v-model="selectedKeys"
      :options="options"
    />
    <x-tag-select
      v-model="selectedKeys"
      :options="options2"
    >
      <template #option="{ label, icon }">
        <span class="mr-4-1">{{ icon }}</span>
        <span>{{ label }}</span>
      </template>
    </x-tag-select>
  </a-space>
</template>

<style lang="less" scoped></style>

多选

<script setup>
import { ref } from 'vue'

const options = ref([
  { label: '类目1', value: 1 },
  { label: '类目2', value: 2 },
  { label: '类目3', value: 3 },
  { label: '类目4', value: 4 },
  { label: '类目5', value: 5 },
  { label: '类目6', value: 6 },
])
const selectedKeys = ref([])
</script>

<template>
  <x-tag-select
    v-model="selectedKeys"
    :options="options"
    multiple
  />
</template>

<style lang="less" scoped></style>

不限

<script setup>
import { ref } from 'vue'

const options = ref([
  { label: '不限', value: 0, unlimited: true },
  { label: '类目1', value: 1 },
  { label: '类目2', value: 2 },
  { label: '类目3', value: 3 },
  { label: '类目4', value: 4 },
  { label: '类目5', value: 5 },
  { label: '类目6', value: 6 },
])
const selectedKeys = ref([0])
</script>

<template>
  <x-tag-select
    v-model="selectedKeys"
    :options="options"
    multiple
  />
</template>

<style lang="less" scoped></style>

折叠

<script setup>
import { ref } from 'vue'

const options = ref([
  { label: '类目1', value: 1 },
  { label: '类目2', value: 2 },
  { label: '类目3', value: 3 },
  { label: '类目4', value: 4 },
  { label: '类目5', value: 5 },
  { label: '类目6', value: 6 },
  { label: '类目7', value: 7 },
  { label: '类目8', value: 8 },
  { label: '类目9', value: 9 },
  { label: '类目10', value: 10 },
  { label: '类目11', value: 11 },
  { label: '类目12', value: 12 },
  { label: '类目13', value: 13 },
  { label: '类目14', value: 14 },
  { label: '类目15', value: 15 },
  { label: '类目16', value: 16 },
  { label: '类目17', value: 17 },
  { label: '类目18', value: 18 },
  { label: '类目19', value: 19 },
  { label: '类目20', value: 20 },
])
const selectedKeys = ref([])
</script>

<template>
  <a-space
    :size="24"
    direction="vertical"
  >
    <x-tag-select
      v-model="selectedKeys"
      :options="options"
    />
    <x-tag-select
      v-model="selectedKeys"
      :options="options"
    >
      <template #collapse="{ collapsed }">
        <template v-if="collapsed">
          更多
        </template>
        <template v-else>
          收起
        </template>
      </template>
    </x-tag-select>
  </a-space>
</template>

<style lang="less" scoped></style>

API

Props

参数	说明	类型	默认值
model-value(v-model)		string number array	-
multiple	是否多选	boolean	false
options	选项	array	[]
collapsible	是否可收起	boolean	true
collapsed(v-model)	收起状态	boolean	true
field-names	自定义节点字段	object	{ label: 'label', value: 'value'}

Events

事件名	说明	回调参数
collapse	折叠发生改变	collapsed
change	选中项发生改变	selectedKeys, selectedOptions

Slots

名称	说明
option	选项
collapse	折叠按钮