更新记录

1.0.3（2021-07-29）

【修复】横竖屏幕切换样式变形。 【修改】默认选择日期的年份加大。

1.0.2（2021-07-07）

1. 修改组件显示时机

1.0.1（2021-07-01）

1.0.1版本更新

平台兼容性

fy-picker 选择器

从底部弹起的滚动选择器。支持三种选择器，通过mode来区分，分别是普通选择器，多列选择器，日期选择器，默认是普通选择器。
地址选择器可使用fy-tree-select。
支持app-nvue、app-vue、微信小程序、H5等，没有标明的平台表示没有测试，谨慎使用即可。
依赖uni自带的uni-transition组件，使用picker组件时请先下载依赖组件，并配置uniapp的easycom组件规范。

调用示例

<view class="content" style="padding: 30rpx;">
    <view class="form-item-label"><text>时间选择器:</text></view>
    <fy-picker v-model="timeValue" mode="date">
        <view class="form-item-content">{{ !timeValue ? '请选择开始时间' : timeValue }}</view>
    </fy-picker>

    <view class="form-item-label"><text>单列选择器:</text></view>
    <fy-picker v-model="dataValue" :range="range" @confirm="onconfirm">
        <view class="form-item-content">{{ dataValue !== 0 && !dataValue ? '请选择' : range[dataValue] }}</view>
    </fy-picker>

    <view class="form-item-label"><text>多列选择器:</text></view>
    <fy-picker mode="multiSelector" v-model="data2Value" :range="range2" @confirm="onconfirm2">
        <view class="form-item-content">{{ data2Text ? data2Text : '请选择' }}</view>
    </fy-picker>

    <view class="form-item-label"><text>单列对象选择器:</text></view>
    <fy-picker v-model="data3Value" :range="range3" range-key="text" @confirm="onconfirm3">
        <view class="form-item-content">{{ data3Value !== 0 && !data3Value ? '请选择' : range3[data3Value]['text'] }}</view>
    </fy-picker>

    <view class="form-item-label"><text>多列对象选择器:</text></view>
    <fy-picker mode="multiSelector" v-model="data4Value" :range="range4" range-key="text" @confirm="onconfirm4">
        <view class="form-item-content">{{ data4Text ? data4Text : '请选择' }}</view>
    </fy-picker>
</view>

import FyPicker from '@/components/fy-picker/fy-picker.vue'
export default {
    components: { FyPicker },
    data() {
        return {
            timeValue: '2021-07-01',

            dataValue: '',
            range: ['中国', '美国', '巴西', '日本'],

            data2Value: [],
            data2Text: '',
            range2: [["a","b"], ["c","d"]],

            data3Value: '',
            range3: [{ text: '中国', value: 1 }, { text: '美国', value: 2 }, { text: '巴西', value: 3 }, { text: '日本', value: 4 }],

            data4Value: [],
            data4Text: '',
            range4: [[{ text: 'aa', value: 1 }, { text: 'bb', value: 2 }], [{ text: 'cc', value: 3 }, { text: 'dd', value: 4 }]]
        }
    },
    onLoad() {

    },
    methods: {
        onconfirm(e) {
            console.log(e);
        },
        onconfirm2(e) {
            this.data2Text = e.text;
        },
        onconfirm3(e) {
            console.log(e);
        },
        onconfirm4(e) {
            this.data4Text = e.text;
        }
    }
}

属性说明

事件说明

Slots