uview的u-picker组件的完整代码

以下是一个简单的u-picker组件的完整代码示例：

<template>
  <view>
    <u-picker :list="pickerList" v-model="selectedPicker" title="选择器标题"></u-picker>
  </view>
</template>

<script>
import { UPicker } from 'uview-ui'

export default {
  components: {
    UPicker
  },
  data() {
    return {
      pickerList: ['选项1', '选项2', '选项3', '选项4', '选项5'],
      selectedPicker: ''
    }
  }
}
</script>

在上面的示例中，我们首先导入了UPicker组件，然后在模板中使用了它。我们将`pickerList`数组传递给了`list`属性，该数组包含了我们想要在选择器中显示的选项列表。我们还将`selectedPicker`变量绑定到了选择器的值，以便在选择器中进行选择时更新它。

最后，我们还指定了选择器的标题，该标题将在选择器顶部显示。

相关问题

uview u-picker省市区三级联动

uview的u-picker组件可以实现省市区三级联动，使用时需要设置相应的数据源。以下是一个简单的例子：

<template>
  <view>
    <u-picker
      :picker-data="pickerData"
      :default-value="defaultValue"
      @change="onChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      pickerData: [],
      defaultValue: [],
    };
  },
  mounted() {
    // 获取省市区数据
    this.getAreaData();
  },
  methods: {
    async getAreaData() {
      // 发送请求获取省市区数据
      const res = await this.$http.get('/api/area');
      // 处理数据，将数据转换为u-picker可用的格式
      this.pickerData = [
        {
          label: '请选择',
          value: '',
          children: res.data.map((province) => ({
            label: province.name,
            value: province.id,
            children: province.cities.map((city) => ({
              label: city.name,
              value: city.id,
              children: city.areas.map((area) => ({
                label: area.name,
                value: area.id,
              })),
            })),
          })),
        },
      ];
      // 设置默认值为当前所在地区
      this.setDefaultArea();
    },
    setDefaultArea() {
      // 获取当前所在地区，将其设置为默认值
      const area = this.$store.state.area;
      if (area.province && area.city && area.area) {
        this.defaultValue = [area.province.id, area.city.id, area.area.id];
      }
    },
    onChange(value) {
      // 处理选中的值
      console.log(value);
    },
  },
};
</script>

在上面的代码中，我们使用了u-picker组件，并将picker-data设置为一个数组，数组中包含省市区三级数据。defaultValue设置为一个数组，数组中包含当前所在地区的id，这样在渲染u-picker时，就会自动选中对应的省市区。当用户选择省市区时，会触发onChange事件，我们可以在这里处理用户选择的省市区数据。

uview2.0的u-picker组件实现省市二级联动

uview2.0的u-picker组件实现省市二级联动，可以按照以下步骤操作：

1. 在页面中引入u-picker组件。

2. 在页面中定义两个变量，一个用来存储省份列表，一个用来存储城市列表。初始化时，省份列表为空，城市列表为第一个省份的城市列表。

3. 在u-picker组件中设置mode为multi-column，表示多列选择，设置columns为2，表示有两列。

4. 设置第一列的数据源为省份列表，第二列的数据源为城市列表。

5. 监听u-picker组件的change事件，在事件处理函数中更新当前省份和城市列表，并根据选中的省份动态更新城市列表。

下面是示例代码：

<template>
  <view>
    <u-picker @change="onPickerChange" :mode="mode" :columns="columns" :list="pickerList"></u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mode: 'multi-column',
        columns: 2,
        provinces: [], // 省份列表
        cities: [], // 当前省份的城市列表
        pickerList: [this.provinces, this.cities] // u-picker组件的数据源，初始时为第一个省份的城市列表
      }
    },
    created() {
      // 初始化时从服务端获取省份列表和第一个省份的城市列表
      this.getProvinceList().then(() => {
        this.getCitiesByProvince(this.provinces[0]).then(() => {
          // 更新u-picker组件的数据源
          this.pickerList = [this.provinces, this.cities];
        });
      });
    },
    methods: {
      onPickerChange(e) {
        const column = e.currentTarget.dataset.column;
        const index = e.detail.value[column];
        if (column === '0') { // 选中了省份
          const province = this.provinces[index];
          this.getCitiesByProvince(province).then(() => {
            // 更新u-picker组件的数据源
            this.pickerList = [this.provinces, this.cities];
          });
        }
      },
      getProvinceList() {
        // TODO: 从服务端获取省份列表
        return new Promise((resolve) => {
          this.provinces = ['北京市', '上海市', '广东省'];
          resolve();
        });
      },
      getCitiesByProvince(province) {
        // TODO: 从服务端获取指定省份的城市列表
        return new Promise((resolve) => {
          if (province === '北京市') {
            this.cities = ['北京市'];
          } else if (province === '上海市') {
            this.cities = ['上海市'];
          } else if (province === '广东省') {
            this.cities = ['广州市', '深圳市', '珠海市'];
          }
          resolve();
        });
      }
    }
  }
</script>