uniapp 自定义 picker

在uniapp中创建自定义picker组件，可以通过使用<picker>组件并结合数据绑定和事件处理来实现。以下是一个简单的自定义picker组件的示例代码：

<template>
  <view>
    <picker mode="selector" :range="range" @change="onChange">
      <view class="picker">
        {{selectedValue}}
      </view>
    </picker>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      range: ['选项1', '选项2', '选项3'],
      selectedValue: '请选择'
    };
  },
  methods: {
    onChange(e) {
      this.selectedValue = this.range[e.detail.value];
      this.$emit('change', this.selectedValue);
    }
  }
};
</script>
 
<style>
.picker {
  padding: 10px;
  background-color: #fff;
  text-align: center;
}
</style>

在这个组件中，range数组定义了picker的可选项，selectedValue用于显示当前选中的值，onChange方法用于更新选中的值，并且通过$emit方法向父组件发送change事件。

使用这个自定义picker组件时，可以这样做：

<template>
  <view>
    <custom-picker @change="onCustomPickerChange"></custom-picker>
  </view>
</template>
 
<script>
import CustomPicker from '@/components/CustomPicker.vue';
 
export default {
  components: {
    CustomPicker
  },
  methods: {
    onCustomPickerChange(value) {
      console.log('选中的值是：', value);
    }
  }
};
</script>

在父组件中，你可以通过@change事件来监听自定义picker的选中值变化。