<template>
<view>
<view class="picker">
<view class="picker__hd">
<view class="picker__hd__text">请选择</view>
</view>
<view class="picker__bd">
<picker :value="value" mode="selector" range="{{ range }}" @change="onChange">
<view class="picker__item">{{ range[value] }}</view>
</picker>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: 0,
range: ['通过', '返修', '报废']
};
},
methods: {
onChange(e) {
this.value = e.detail.value;
console.log('选择的值为', this.range[this.value]);
}
}
}
</script>
<style>
.picker {
margin-top: 20px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
}
.picker__hd {
font-size: 16px;
text-align: center;
margin-bottom: 20px;
}
.picker__hd__text {
font-weight: bold;
}
.picker__bd {
text-align: center;
}
.picker__item {
font-size: 18px;
color: #333;
}
</style>