uniapp 写一个车型选择器

以下是一个简单的uniapp车型选择器示例：

<template>
  <view class="container">
    <view class="title">请选择车型</view>
    <picker mode="multiSelector" :value="value" :range="range" @change="onChange">
      <view class="picker">{{selectedText}}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: [0, 0, 0],
      range: [],
      selectedText: '',
      carData: [
        {
          name: '品牌1',
          children: [
            {
              name: '车系1',
              children: [
                { name: '车型1' },
                { name: '车型2' }
              ]
            },
            {
              name: '车系2',
              children: [
                { name: '车型3' },
                { name: '车型4' }
              ]
            }
          ]
        },
        {
          name: '品牌2',
          children: [
            {
              name: '车系3',
              children: [
                { name: '车型5' },
                { name: '车型6' }
              ]
            },
            {
              name: '车系4',
              children: [
                { name: '车型7' },
                { name: '车型8' }
              ]
            }
          ]
        }
      ]
    }
  },
  onReady() {
    this.initPickerData()
  },
  methods: {
    initPickerData() {
      let range = []
      for (let i = 0; i < this.carData.length; i++) {
        let item1 = this.carData[i]
        let children1 = item1.children
        let arr1 = []
        for (let j = 0; j < children1.length; j++) {
          let item2 = children1[j]
          let children2 = item2.children
          let arr2 = []
          for (let k = 0; k < children2.length; k++) {
            let item3 = children2[k]
            arr2.push(item3.name)
          }
          arr1.push({
            name: item2.name,
            values: arr2
          })
        }
        range.push({
          name: item1.name,
          values: arr1
        })
      }
      this.range = range
      this.selectedText = this.range[0].name + ' ' + this.range[0].values[0].name + ' ' + this.range[0].values[0].values[0]
    },
    onChange(e) {
      let value = e.detail.value
      this.value = value
      let selectedText = ''
      for (let i = 0; i < value.length; i++) {
        let rangeItem = this.range[i]
        let rangeItemValue = rangeItem.values[value[i]]
        selectedText += rangeItemValue.name + ' '
        if (rangeItemValue.values) {
          selectedText += rangeItemValue.values[this.value[i + 1]] + ' '
        }
      }
      this.selectedText = selectedText
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.title {
  font-size: 24px;
  margin-bottom: 20px;
}
.picker {
  font-size: 18px;
  color: #333;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 80%;
}
</style>

这个示例中，我们首先在data中定义了value、range和selectedText三个属性。其中，value表示当前选择的值，range表示选择器的数据源，selectedText表示当前选择的文本。

在onReady生命周期中，我们调用了initPickerData方法，用于初始化选择器的数据源。在initPickerData方法中，我们遍历车型数据，将其转换为range所需的格式。

在onChange方法中，我们通过e.detail.value获取当前选择的值，然后遍历range，根据选择的值获取对应的文本，最后将文本赋值给selectedText。

最后，在模板中，我们使用picker组件来展示选择器，并绑定相应的属性和事件。同时，我们还展示了当前选择的文本