在uni-app中使用picker写一个下拉框，包含通过、返修、报废

<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>