更新记录

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

master

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

master

平台兼容性

uni-app(4.13)

其他

安装

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

组件关联说明

• xf-ts辅助样式;
• xf-scss辅助样式;
• xf-popup;
• xf-pull-refresh-page;
• xf-empty;
• xf-search;
• xf-icon;
• xf-po-addition-modal;
• xf-fm-select;

代码演示

基本用法

• 使用组件代码如下：

普通搜索单选

<template>
    <scroll-view class="xf-col-center" scroll-y>
        <h3>单选</h3>
        <view style="width: 100%;">
            <xf-pk-single-select-modal required pickerTitle="标题可搜索" :isPaging="false" :apiFn="getList" v-model="selectedF3" valueKey="id"
                labelKey="customerAddr" v-model:show="show" @confirm="confirm">
            </xf-pk-single-select-modal>

            //插槽用法
            <xf-pk-single-select-modal :isPaging="false" :apiFn="getList" v-model="selectedF3" valueKey="id"
                labelKey="customerAddr" v-model:show="show" @confirm="confirm">
                <template #content>
                    <xf-fm-select title="自定义插槽可搜" @click="show = true" v-model:value="selectedF3Text"
                        labelKey="customerAddr">
                    </xf-fm-select>
                </template>
            </xf-pk-single-select-modal>
        </view>
    </scroll-view>
</template>

可搜可输入

<template>
    <scroll-view class="xf-col-center" scroll-y>
        <h3>单选</h3>
        <view style="width: 100%;">
            <xf-pk-single-select-modal :isPaging="false" :apiFn="getList" v-model="selectedF3" valueKey="id"
                labelKey="customerAddr" v-model:show="show" @confirm="confirm">
                <template #content>
                    <xf-fm-select title="自定义插槽可搜" @click="show = true" v-model:value="selectedF3Text"
                        labelKey="customerAddr">
                    </xf-fm-select>
                </template>
            </xf-pk-single-select-modal>
        </view>
    </scroll-view>
</template>

只能手动录入

<template>
    <scroll-view class="xf-col-center" scroll-y>
        <h3>单选</h3>
        <view style="width: 100%;">
            <xf-pk-single-select-modal hasInput :isShowSearch="false" :apiFn="getList" v-model="selectedF3" valueKey="id"
                labelKey="customerAddr" v-model:show="show" @confirm="confirm">
                <template #content>
                    <xf-fm-select title="自定义插槽可搜" @click="show = true" v-model:value="selectedF3Text"
                        labelKey="customerAddr">
                    </xf-fm-select>
                </template>
            </xf-pk-single-select-modal>
        </view>
    </scroll-view>
</template>

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

    const show = ref(false)
    const selectedF3 = ref()

    const selectedF3Text = ref()

    watch(() => selectedF3.value, (val) => {
        if (val) {
            selectedF3Text.value = list.value.find(e => selectedF3.value == e.id).customerAddr
        } else {
            selectedF3Text.value = null
        }
        console.log(selectedF3Text.value)
    })

    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 list = ref([])
    const createList = () => {
        if (list.value.length > 0)
            return
        for (let i = 0; i < 102; i++) {
            list.value.push({
                id: (i + 1) + "",
                customerAddr: "人力二部" + i
            })
        }
    }

    const confirm = (e) => {
        console.log(e)
        console.log(selectedF3.value)
    }
</script>

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

API

Props

事件 Emits

插槽 slot