更新记录

1.0.0（2024-05-20）

1.0.0（2024-05-20）

支持双向绑定的picker组件，该组件是基于picker进行二次开发的

注：该版本是基于vue2开发的，所以只支持vue2，后续会升级vue3版本

功能

1. 支持双向绑定
2. 支持change事件
3. 支持对字典做映射处理

示例代码

<template>
    <view class="content">
      <view class="demo">
      <view class="title">性别：</view>
      <pro-reactive-picker :map="{name:'name',value:'value'}"
      range-key="name"
      :style="{width:'100%'}"
      :dict-data="dictData"
      v-model="pickerValue"
      @change="handlePickerChange"

      ></pro-reactive-picker>
    </view>
    <view class="demo">
      <view class="title">兴趣爱好：</view>
      <pro-reactive-picker :map="{name:'name',value:'value'}"
      range-key="name"
      :style="{width:'100%'}"
      :dict-data="hobbyData"
      v-model="hobbyName"
      @change="handlePickerChange"

      ></pro-reactive-picker>
    </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dictData: [
          {
            name:'男',
            value:0
          },
          {
            name:'女',
            value:1
          },
        ],
        hobbyData: [
          {
            name:'打篮球',
            value:0
          },
          {
            name:'游泳',
            value:1
          },
        ],
        pickerValue:'',
        hobbyName:''
            }
        },
        onLoad() {

        },
        methods: {
      handlePickerChange({nameStr,checkedOptions}){
        console.log('selected value',nameStr,checkedOptions)
        uni.showToast({
          icon:'none',
          duration:5000,
          title:nameStr
        })
      }

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .demo {
    width:50%;
        display: flex;
    justify-content: center;
    }

    .title {
    width: 180rpx;
        font-size: 32rpx;
        color: #8f8f94;
    }
</style>

平台兼容性

1.0.0（2024-05-20）

支持双向绑定的picker组件，该组件是基于picker进行二次开发的

注：该版本是基于vue2开发的，所以只支持vue2，后续会升级vue3版本

功能

1. 支持双向绑定
2. 支持change事件
3. 支持对字典做映射处理

示例代码

<template>
    <view class="content">
      <view class="demo">
      <view class="title">性别：</view>
      <pro-reactive-picker :map="{name:'name',value:'value'}"
      range-key="name"
      :style="{width:'100%'}"
      :dict-data="dictData"
      v-model="pickerValue"
      @change="handlePickerChange"

      ></pro-reactive-picker>
    </view>
    <view class="demo">
      <view class="title">兴趣爱好：</view>
      <pro-reactive-picker :map="{name:'name',value:'value'}"
      range-key="name"
      :style="{width:'100%'}"
      :dict-data="hobbyData"
      v-model="hobbyName"
      @change="handlePickerChange"

      ></pro-reactive-picker>
    </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dictData: [
          {
            name:'男',
            value:0
          },
          {
            name:'女',
            value:1
          },
        ],
        hobbyData: [
          {
            name:'打篮球',
            value:0
          },
          {
            name:'游泳',
            value:1
          },
        ],
        pickerValue:'',
        hobbyName:''
            }
        },
        onLoad() {

        },
        methods: {
      handlePickerChange({nameStr,checkedOptions}){
        console.log('selected value',nameStr,checkedOptions)
        uni.showToast({
          icon:'none',
          duration:5000,
          title:nameStr
        })
      }

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .demo {
    width:50%;
        display: flex;
    justify-content: center;
    }

    .title {
    width: 180rpx;
        font-size: 32rpx;
        color: #8f8f94;
    }
</style>