uni-app picker

### 实现和自定义Picker选择器

#### 使用`uni-data-picker`组件

为了使`uni-data-picker`正常工作并能够清除已选中的值，需确保添加了`v-model`绑定属性。此属性并未在官方文档示例中显示出来，但是它是必要的[^1]。

<template>
  <view>
    <!-- 级联选择器 -->
    <uni-data-picker v-model="selectedValue" :localdata="optionsData" popup-title="请选择选项"
      @change="handleChange"></uni-data-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '', // 绑定的选择项模型
      optionsData: [] // 数据源数组
    };
  },
  methods: {
    handleChange(e) { }
  }
};
</script>

对于希望实现多级联动效果的情况，可以通过设置`:localdata`来传递树形结构的数据给`uni-data-picker`，从而让用户可以选择至任意级别的节点[^2]。

#### 自定义时间段选择器

创建一个基于弹出窗口的时间段选择器涉及到几个方面的工作：

- **引入外部插件**：可以从DCloud扩展市场获取适合的popup组件，例如ID为2716的插件[^4]。

- **构建UI界面**：设计好触发弹窗按钮以及内部布局样式。

- **处理逻辑交互**：编写JavaScript代码控制何时展示/隐藏弹框，并同步所做更改回父页面状态。

下面是一个简单的例子说明如何仅使用一列作为选择列表的方式：

<!-- 时间段选择器模板部分 -->
<button type="button" @click="togglePopup">选择时段</button>
<u-popup v-if="isShowPopup" position="bottom">
  <picker mode="selector" range-key="name" :range="timeSlots" @change="handleTimeChange"/>
</u-popup>

// 脚本部分
import uPopup from 'path_to_popup_component';

export default {
  components: { uPopup },
  data() {
    return {
      isShowPopup: false,
      timeSlots: [
        { name: "上午", value: "am" },
        { name: "下午", value: "pm" }
      ]
    };
  },
  methods: {
    togglePopup() {
      this.isShowPopup = !this.isShowPopup;
    },
    handleTimeChange(event) {}
  }
}

通过上述方法可以灵活调整以适应不同的业务需求场景下的时间范围选取功能开发。

#### 完全定制化的二级Picker

当需要更复杂的双栏或多栏联合筛选时，则可能需要用到完全手写的解决方案。这里给出了一种方式用来表示两个关联字段之间的关系[^5]。

<template>
  <div class="custom-picker">
    {{arrDate[0][dateIndex]}} - {{arrDate[1][dateIndexOne]}}
    
    <select v-for="(item, index) in arrDate" :key="index" @input="updateSelection(index)">
      <option v-for="(value, i) in item" :key="i">{{value}}</option>
    </select>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dateIndex: null,
      dateIndexOne: null,
      arrDate:[
        ['周一','周二'],
        ['早上','晚上']
      ]
    }
  },
  methods:{
    updateSelection(idx){
      const target=this.$event.target;
      if (idx===0)this.dateIndex=target.selectedIndex;
      else this.dateIndexOne=target.selectedIndex;
    }
  }
}
</script>

这段代码展示了怎样利用原生HTML `<select>`标签配合Vue.js事件监听机制完成基本的双向绑定操作，进而达到动态更新视图的效果。