TagSelect 标签选择

代码演示

基础用法

<template>
    <a-space
        :size="24"
        direction="vertical">
        <x-tag-select
            v-model="selectedKeys"
            :options="options"></x-tag-select>
        <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>

<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>

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

多选

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

<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>

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

不限

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

<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>

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

折叠

<template>
    <a-space
        :size="24"
        direction="vertical">
        <x-tag-select
            v-model="selectedKeys"
            :options="options"></x-tag-select>
        <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>

<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>

<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	折叠按钮