更新记录

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

1

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

master

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

master

平台兼容性

uni-app(4.13)

其他

安装

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

组件关联说明

• xf-scss辅助样式;
• xf-uview-plus;
• xf-fm-select;

代码演示

基本用法

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

表单基础用法

<template>
    <view class="xf-full main">
        <scroll-view class="scroll xf-col-center xf-full-height" scroll-y>
            <view style="width: 100%;">
                <xf-picker v-model:modelValue="modelValue" pickerTitle="单选ActionSheet" pickerTip="副标题" required
                    :list="list" hasFooterBtn title="这是一段描述信息" @selector="selector">
                </xf-picker>
            </view>
        </scroll-view>
    </view>
</template>

自定义插槽用法法

<template>
    <view class="xf-full main">
        <scroll-view class="scroll xf-col-center xf-full-height" scroll-y>
            <view style="width: 100%;">
                <xf-picker v-model:show="show" v-model:modelValue="modelValue" pickerTitle="单选ActionSheet"
                    pickerTip="副标题" required :list="list" hasFooterBtn title="这是一段描述信息" @selector="selector">
                    <template #content>
                        <xf-fm-select title="标题" @click="show = true" v-model:value="formValueText"> </xf-fm-select>
                    </template>

                </xf-picker>
            </view>
        </scroll-view>
    </view>
</template>

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

    const modelValue = ref(1)
    const show = ref(false)
    const list = ref([
        {
            label: "选项1",
            value: 1,
            tip: '副标题'
        },
        {
            label: "选项2",
            value: 2,
            tip: '副标题'
        },
        {
            label: "选项3",
            value: 3,
            tip: '副标题'
        }
    ])

    const formValueText = computed(() => {
        return list.value.find(e => e.value == modelValue.value).label
    })
    const selector = (e) => {
        console.log(e)
        // console.log(modelValue)
    }
</script>

<style lang="scss" scoped>
    .main {}
</style>

API

Props

外部调用事件 Expose

插槽 slot