在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的选中值变化。