更新记录

1.0.0.2（2026-01-08） 下载此版本

master

1.0.0（2026-01-05） 下载此版本

master

1.0.0.1（2026-01-05） 下载此版本

master

平台兼容性

uni-app(4.13)

其他

安装

在市场导入xf-fm-multi-select uni_modules版本的即可，无需import

组件关联说明

• xf-scss辅助样式;
• xf-fm-select;
• xf-select-tags;

代码演示

插件使用

• 位于 uni_modules/xf-fm-multi-select/components/xf-fm-multi-select
• 导入插件后通过插槽自定义引入内容

<template>
    <xf-fm-multi-select title="标题11" v-model="selectedIds"></xf-fm-multi-select>
</template>

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

    const list = computed(()=>{
        let newList = []
        for(let i = 0;i < 10;i++){
            newList.push({
                label:"tag" + i,
                value: i + 1
            })
        }
        return newList
    })

    let selectedIds = ref(list.value)

</script>

基本用法

• 使用组件代码如下：
• 配合 xf-multiple-cascader级联一起使用；

<scroll-view class="xf-col-center" scroll-y>
    <view style="width: 100%;">
        <xf-fm-multi-select :tip="prompt" title="级联组件1" @click="showCF1 = true" v-model="showCFList1"  labelKey="fullName"></xf-fm-multi-select>
        <xf-multiple-cascader :isRelationship="false"  :apiFn="getTreeData" v-model="showCFList1" 
         v-model:show="showCF1"></xf-multiple-cascader> 
    </view>
</scroll-view>

<script setup lang="ts">
    import { onReady,onShow } from '@dcloudio/uni-app'
    import { onMounted, ref, watch } from 'vue';

    const prompt =ref("提示内容")

    const showCF1 = ref(false)
    const showCFList1 = ref([])

    /**
     * 模拟创建一个接口数据
     */
    const getTreeData = ()=>{
        return new Promise((resolve)=>{
            setTimeout(()=>{
                let list = {
                    list: singleLists.value
                }
                resolve(list)
            },600)
        })
    }

    const singleLists = ref([
        {
            label: 'xxxx',
            value: 1,
            children:[
                { label: '好多好多字好多好多字',value: 1000,
                children:[
                    { label: '好多好多字好多好多字',value: 10001,},
                    { label: '我的生活',value: 10002,},
                    { label: 'xxxx',value: 10003,}
                ]
                },
                { label: '我的生活',value: 1001,},
                { label: 'xxxx',value: 1002,}
            ]
        },
        {
            label: '好多好多字好多好多字好多好多字好多好多字好多好多字',
            value: 2
        },
        {
            label: 'sssss',
            value: 3
        },
        {
            label: 'fffff',
            value: 4
        },
        {
            label: 'sdfadfsdf',
            value: 5
        },
        {
            label: 'fsdfsdf',
            value: 6
        },
        {
            label: 'sfadfsf',
            value: 7
        },
    ]);

</script>

API

Props

事件 Emits