更新记录

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

master

平台兼容性

uni-app(4.13)

其他

安装

在市场导入xf-pk-multi-modaluni_modules版本的即可，无需import

组件关联说明

• xf-ts辅助样式;
• xf-scss辅助样式;
• xf-popup;
• xf-pull-refresh-page;
• xf-empty;
• xf-search;
• xf-checkbox-group;
• xf-fm-multi-select;

代码演示

基本用法

• 使用组件代码如下：

普通搜索单选

<template>
    <scroll-view class="xf-col-center" scroll-y>
        <h3>单选</h3>
        <view style="width: 100%;">
            //表单基础用法
            <xf-pk-multiple-select-modal required pickerTitle="表单标题" :apiFn="getList" v-model="selectedList" valueKey="id" labelKey="customerAddr" @confirm="confirm">
            </xf-pk-multiple-select-modal>

            //插槽用法
            <xf-pk-multiple-select-modal :apiFn="getList" v-model="selectedList" valueKey="id" labelKey="customerAddr" 
                v-model:show="show" @confirm="confirm">
                <template #content>
                    <xf-fm-multi-select title="插槽标题" @click="show = true" v-model="selectedList" valueKey="id" labelKey="customerAddr" ></xf-fm-multi-select>
                </template>
            </xf-pk-multiple-select-modal>
        </view>
    </scroll-view>
</template>

可搜可输入

<template>
    <scroll-view class="xf-col-center" scroll-y>
        <h3>单选</h3>
        <view style="width: 100%;">
            <xf-pk-multiple-select-modal required pickerTitle="表单标题" :apiFn="getList" v-model="selectedList"
                valueKey="id" labelKey="customerAddr" isSearchFirst @confirm="confirm">
            </xf-pk-multiple-select-modal>
        </view>
    </scroll-view>
</template>

自定义

<template>
    <scroll-view class="xf-col-center" scroll-y>
        <h3>单选</h3>
        <view style="width: 100%;">
            <xf-pk-multiple-select-modal required pickerTitle="表单标题" :apiFn="getList" v-model="selectedList"
                valueKey="id" labelKey="customerAddr"  @confirm="confirm">
                <template #keyin>
                    <text style="margin-right: 16px;" @click="selfClick">自定义</text>
                </template>
            </xf-pk-multiple-select-modal>
        </view>
    </scroll-view>
</template>

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

    const show = ref(false)
    const selectedList = ref([])
    const list = ref([])
    const confirm = (e) => {
        console.log(selectedList)
    }

    const getList = (search : string,page:number)=>{
        createList()
        return new Promise((resolve)=>{
            setTimeout(()=>{
                let newList = list.value.filter(item=>{
                    if(search){
                        return item.customerAddr.includes(search)
                    }
                    else 
                    return true
                }).filter((item,index)=> {
                return index < page*20 && index >= (page-1)*20
                })
            let result = {
                total: newList.length,
                list: newList
            }
                resolve(result)
            },1000)
        })
    }

    const createList = ()=>{
        if(list.value.length > 0 )
            return
            for(let i = 0;i < 102;i++){
                list.value.push({
                    id: (i + 1) + "",
                    customerAddr: "人力二部" + i
                })
        }
    }
</script>

<style scoped lang="scss">
    view {
        margin-top: 10px;
    }
</style>

API

Props

事件 Emits

插槽 slot