@fesjs/traction-widget

Appearance

Return to top
On this page

BTagSelector

展示选择器选中的标签

组件注册

js
import { BTagSelector } from '@fesjs/traction-widget';
app.use(BTagSelector);

代码演示

基础用法

传入可选项的数据和绑定用于接收已选项的数组

多个选择器

最后的tag选择器由组件内部提供，其余选择器放入selector插槽

Play
<template>
    <BTagSelector v-model:selectedList="flavour" :options="flavourList.length > 0 ? flavourList : [{ value: '烤鸭我喜欢有葱丝的', label: '葱丝' }, { value: '烤鸭我喜欢有黄瓜丝的', label: '黄瓜丝' }]" label="计数" tagKey="value" @selectorChange="handleChange">
         <template v-slot:header>
             <div class="title-text">选中tag计数: {{ flavour.length }}</div>
         </template>
         <template v-slot:selectors>
            <FSelect
                v-model="city"
                filterable
                :options="[{ value: 'beijing', label: '北京' }, { value: 'shanghai', label: '上海' }]"
                @change="handleCityChange"
            ></FSelect>
            <FSelect
                v-model="food"
                filterable
                clearable
                :options="foodList"
            ></FSelect>
        </template>
    </BTagSelector>
</template>
<script setup lang="ts">
import { BTagSelector } from '@fesjs/traction-widget';
import { FSelect } from '@fesjs/fes-design';
import { ref, computed, onMounted } from 'vue';

// 选择器所绑定的数据
const city = ref<string>('');
const food = ref<string>('');
const flavour = ref<string[]>([]);
// 下拉框数据
const foodList = computed(() => {
    if (city.value === 'beijing') {
        return [{ value: 'bjky', label: '北京烤鸭' }, { value: 'thl', label: '糖葫芦' }];
    } else if (city.value === 'shanghai') {
        return [{ value: 'sjb', label: '生煎包' }, { value: 'bby', label: '八宝鸭' }];
    } else {
        return [];
    }
});
const flavourList = computed(() => {
    switch (food.value) {
        case 'bjky':
            return [{ value: '烤鸭我喜欢有葱丝的', label: '葱丝' }, { value: '烤鸭我喜欢有黄瓜丝的', label: '黄瓜丝' }];
        case 'thl':
            return [{ value: '糖葫芦我喜欢草莓的', label: '草莓' }, { value: '糖葫芦我喜欢山楂的', label: '山楂' }];
        case 'sjb':
            return [{ value: '生煎包我喜欢牛肉的', label: '牛肉' }, { value: '生煎包我喜欢猪肉的', label: '猪肉' }];
        case 'bby':
            return [{ value: '八宝鸭我喜欢加干贝的', label: '干贝' }, { value: '八宝鸭我喜欢加火腿的', label: '火腿' }];
        default:
            return [];
    }
});
// 选择器联动逻辑
const handleCityChange = () => {
    food.value = '';
};
// 数据变化的回调
const handleChange = (val: any) => {
    console.log(val);
};

onMounted(() => {
    flavour.value = ['烤鸭我喜欢有葱丝的', '烤鸭我喜欢有黄瓜丝的'];
});

</script>
<style scoped>
.title-text {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #0f1222;
    letter-spacing: 0;
    line-height: 32px;
    font-weight: 500;
}
</style>
查看代码

单个选择器

Play
<template>
    <BTagSelector :clearable="true" v-model:selectedList="thirdVal" :options="[{ value: '我是太阳', label: '太阳' }, { value: '我是月亮', label: '月亮' },{ value: '我是地球', label: '地球' }, { value: '我是火星', label: '火星' },{ value: '我是M87星云', label: 'M87星云' }, { value: '我是木星', label: '木星' }, { value: '我是呀哈哈', label: '呀哈哈' }, { value: '我是金星', label: '金星' }]" label="计数" tagKey="value" @selectorChange="handleChange" @clearAll="handleClear">
         <template v-slot:header>
             <div class="title-text">选中tag计数: {{ thirdVal.length }}</div>
         </template>
    </BTagSelector>
</template>
<script setup lang="ts">
import { BTagSelector } from '@fesjs/traction-widget';

import { ref } from 'vue';
// 选择器所绑定的数据
const thirdVal = ref<string[]>([]);
// 数据变化的回调
const handleChange = (val: any) => {
    console.log(val);
};

const handleClear = ()=>{
    console.log('clear all')
}
</script>
<style scoped>
.title-text {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #0f1222;
    letter-spacing: 0;
    line-height: 32px;
    font-weight: 500;
}
</style>
查看代码

不使用头部插槽

Play
<template>
    <BTagSelector v-model:selectedList="thirdVal" :options="[{ value: '我是太阳', label: '太阳' }, { value: '我是月亮', label: '月亮' },{ value: '我是地球', label: '地球' }, { value: '我是火星', label: '火星' },{ value: '我是M87星云', label: 'M87星云' }, { value: '我是木星', label: '木星' }, { value: '我是呀哈哈', label: '呀哈哈' }, { value: '我是金星', label: '金星' }]" label="计数" tagKey="value" @selectorChange="handleChange">
    </BTagSelector>
</template>
<script setup lang="ts">
import { BTagSelector } from '@fesjs/traction-widget';

import { ref } from 'vue';
// 选择器所绑定的数据
const thirdVal = ref<string[]>([]);
// 数据变化的回调
const handleChange = (val: any) => {
    console.log(val);
};
</script>
<style scoped>
.title-text {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #0f1222;
    letter-spacing: 0;
    line-height: 32px;
    font-weight: 500;
}
</style>
查看代码

参数说明

TagSelector Props

属性说明类型默认值是否必须
selectedList已选标签的数组（v-model）Array[]是
options可选项的数组Array[]是
tagKey自定义标签内容，展示options中对象对应key的值String'label'否
clearable是否展示全部删除按钮Booleanfalse否
getContainer标签选择器下拉框挂载的元素，不设置时默认为bodyFunction() => document.body否

TagSelector Events

事件名称说明回调参数
selectorChange改变已选项触发的回调函数当前selectedList的值
clearAll全部删除的触发的回调事件，如果使用插槽插入多条件可能需要对插槽内的select进行特殊处理

TagSelector Slots

名称说明参数
header选择器头部内容-
selector前置的选择器或者输入框-

Released under the MIT License.

Copyright © webank