更新记录

2.2.2（2022-04-27） 下载此版本

更新placeholder

2.3.0（2022-04-01） 下载此版本

修复一系列问题； 性能优化

2.2.1（2022-03-31） 下载此版本

修复 app-vue3 undefined问题

平台兼容性

xp-picker

• 可以与uni-forms配合使用-表单验证
• 支持vue2 vue3

一、使用示例

示例1：配合uni-forms使用，内置支持表单验证

    <template>
        <uni-forms :modelValue="form" :rules="[]">
            <uni-forms-item label="时间" name="time">
                <xp-picker v-model="form.time" />
            </uni-forms-item>
        </uni-forms>
    </template>

示例2：函数式打开picker，通过 this.$refs[ref].show()

    <template>
        <view>
            <xp-picker ref="picker"  @confirm="confirm" />
            <view @tap="show">开启</view>
        </view>
    </template>

    <script>
        export default {
            methods: {
                show() {
                    this.$refs.picker.show()
                },
                confirm(e) {
                    console.log(e)
                }
            }
        }
    </script>

示例3：xp-picker包含一个默认插槽，点击内容直接打开picker弹窗

    <template>
        <view>
            <xp-picker @confirm="confirm">打开</xp-picker>
        </view>
    </template>

    <script>
        export default {
            methods: {
                confirm(e) {
                    console.log(e)
                }
            }
        }
    </script>

二、属性介绍

1、mode的使用(y年；m月；d日；h时；i分；s秒)

未出现在表格中的配置代表不支持。但是xp-picker可以适配任何自定义列，比如：其中'dh'未预定义，因此只需在源码加一行dh的预定义即可(util.js/getLocalTime)，不会联系作者，热心答复

2、value的使用

此选项用于自定义picker打开时的显示时间，同样需要与mode对应

三、事件

confirm 事件返回属性介绍

四、插槽

可使用此方式打开picker弹窗