FitsIconSelect 图标选择

基本用法

基本用法

基础的图标选择组件展示。组件默认开启内部输入框搜索过滤。

<template>
    <fits-icon-select :options="state" />
</template>

<script lang="ts" setup>
import { FitsIconSelect } from '@/fits-components';
import { FitsIconSelectModel } from '@/fits-components/type'
const state = reactive(new FitsIconSelectModel({
    select: {
        clearable: true,
    },
}))
</script>
<style lang="scss" scoped>

</style>

<style lang="scss">

</style>

默认值

默认值

通过传递modelValue属性可以给图标选择组件传递默认值，该值必须是图标的名称。

<template>
    <fits-icon-select modelValue="edit" />
</template>

<script lang="ts" setup>
import { FitsIconSelect } from '@/fits-components';
</script>
<style lang="scss" scoped>

</style>

<style lang="scss">

</style>

多选

多选

通过设置select.multiple开启多选模式。多选模式下，默认会展示出所有的选项。可以通过设置select.collapseTags将选中值按文字的形式展示，设置select.collapseTagsTooltip决定鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。

<template>
    <div class="iconSelectMultiple">
        <div class="box">
            <div class="innerTitle">基础多选</div>
            <fits-icon-select :options="state1" />
        </div>
        <div class="box">
            <div class="innerTitle">多选项通过文字展示</div>
            <fits-icon-select :options="state2" />
        </div>
    </div>
    <div class="outerBox">
        <div class="innerTitle">鼠标悬浮文字出现多选项标签</div>
        <fits-icon-select :options="state3" />
    </div>
</template>

<script lang="ts" setup>
import { FitsIconSelect } from '@/fits-components';
import { FitsIconSelectModel } from '@/fits-components/type';
import { reactive } from 'vue'

const state1 = reactive(new FitsIconSelectModel({
    select: {
        multiple: true,
    },
}))

const state2 = reactive(new FitsIconSelectModel({
    select: {
        multiple: true,
        collapseTags: true
    },
}))

const state3 = reactive(new FitsIconSelectModel({
    select: {
        multiple: true,
        collapseTags: true,
        collapseTagsTooltip: true
    },
}))

</script>
<style lang="scss" scoped>
.iconSelectMultiple {
    display: flex;

    .box {
        flex: 1;

        :deep(.el-select) {
            width: 90%;
        }
    }
}

.outerBox {
    margin-top: 10px;
}
</style>

<style lang="scss">

</style>

隐藏输入框

隐藏输入框

通过设置showInput=false可以隐藏下拉内部输入框。

<template>
    <fits-icon-select :options="state" />
</template>

<script lang="ts" setup>
import { FitsIconSelect } from '@/fits-components';
import { FitsIconSelectModel } from '@/fits-components/type'
const state = reactive(new FitsIconSelectModel({
    showInput: false,
}))
</script>
<style lang="scss" scoped>

</style>

<style lang="scss">

</style>

FitsIconSelectModel属性

属性	说明	类型	可选值	默认值
input	内部过滤框配置	ElInput	非必填	-
select	选择器配置	FitsSelectProps	非必填	-
noListText	没有数据时展示的内容	string	非必填	暂无数据
showInput	是否显示内部过滤输入框	boolean	非必填	true

FitsSelectProps属性

属性	说明	类型	可选值	默认值
disabled	是否禁用树下拉筛选组件	boolean	-	false
size	系统配置	string	large / default / small	default
clearable	是否可以清空选项	boolean	-	false
effect	下拉框的主题	string	dark / light	light
placeholder	占位文字	string	-	请选择
popperClass	下拉框的自定义类名	string	-	-
teleported	是否将下拉框插入至body元素	boolean	-	true
persistent	当下拉选择器未被激活并且persistent设置为false，选择器会被删除	boolean	-	true
clearIcon	自定义清除图标组件	string / SvgComponent	-	CircleClose
fitInputWidth	下拉框的宽度是否与选择器相同	boolean	-	true
suffixIcon	自定义后缀图标组件	string / SvgComponent	-	CaretTop
validateEvent	输入时是否触发表单校验	boolean	-	true
multiple	是否多选	boolean	-	false
collapseTags	多选时是否将选中值按文字的形式展示	boolean	-	false
collapseTagsTooltip	当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。要使用此属性，collapseTags属性必须设定为true	boolean	-	false

事件

事件名	说明	回调参数
update:modelValue	当选中值发生变化时触发	一个参数，为被选中图标的名称。类型为字符串，如果多选则为字符串数组。

插槽

暂无可用的插槽