更新记录

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

master

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

master

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

master

平台兼容性

uni-app(4.13)

其他

安装

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

组件关联说明

• xf-scss辅助样式;
• xf-ts辅助样式;
• xf-popup;
• xf-radio-group;
• xf-fm-select;

代码演示

基本用法

• 基础页面使用组件代码如下：

表单通用

<template>
    <scroll-view class="xf-col-center" scroll-y>
        <h3>单选</h3>
        <view style="width: 100%;">
            <xf-pk-single-select pickerTitle="F1无按钮" :hasFooterBtn="showFooterBtn" :list="singleLists" v-model:modelValue="selectedValue"
                 @confirm="confirm">
            </xf-pk-single-select>
        </view>
    </scroll-view>
</template>

当不在表单中使用时，用如下插槽用法；

<template>
    <scroll-view class="xf-col-center" scroll-y>
        <h3>单选</h3>
        <view style="width: 100%;">
            <xf-pk-single-select :hasFooterBtn="showFooterBtn" :list="singleLists" v-model:modelValue="selectedValue"
                v-model:show="show" @confirm="confirm">
                <template #content>
                    <xf-fm-select title="标题" @click="show = true" v-model:value="selectedValue"> </xf-fm-select>
                </template>
            </xf-pk-single-select>
        </view>
    </scroll-view>
</template>

<script setup lang="ts">
    import { onReady, onShow, onBackPress } from '@dcloudio/uni-app'
    import { onMounted, ref, watch } from 'vue';
    const confirm = (e)=>{
        console.log(selectedValue.value)
        console.log(e)
    }
    const show = ref(false)
    const selectedValue = ref(1)
    const showFooterBtn = ref(true)

    const singleLists = ref([
        {
            label: '选项1',
            value: 1,
        },
        {
            label: '选项2',
            value: 2
        },
        {
            label: '选项3',
            value: 3
        },
        {
            label: '选项4',
            value: 4
        },
        {
            label: '选项5',
            value: 5
        },
        {
            label: '选项6',
            value: 6
        },
    ]);

</script>

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

API

Props

外部调用事件 Expose

插槽 slot