uniapp picker封装

### 如何在 UniApp 中封装 Picker 组件 #### 封装需求分析 为了提高代码复用性和维护性，在开发过程中通常会将常用的组件进行封装。对于 `Picker` 组件而言，其主要功能是从给定的数据集中选取特定项并返回所选值。考虑到不同平台（如 H5、微信小程序等）可能存在差异化的表现形式和支持特性[^3]。 #### 封装思路概述 基于上述需求，可以创建一个新的 Vue 组件作为自定义的 `Picker` 组件。此组件应具备接收外部配置的能力，并能够根据不同场景调整内部逻辑以适应多端运行环境的要求。具体来说： - 支持多种模式的选择（例如日期选择、地区选择） - 提供统一接口处理数据源与事件响应机制 - 针对特殊设备或框架版本提供兼容方案 #### 实现细节描述 ##### 创建基础结构 首先新建一个名为 `CustomPicker.vue` 的文件用于承载整个组件的内容。在此基础上引入必要的依赖库及样式资源[^1]。 ```html <template> <!-- 使用条件渲染来适配不同类型的picker --> <block v-if="mode === 'region'"> <picker-view indicator-style="height: 50px;" :value="pickValue" @change="onChangeRegion"> <picker-view-column> <div v-for="(item,index) in provinces" :key="index">{{ item }}</div> </picker-view-column> ... </picker-view> </block> <block v-else-if="mode === 'date' || mode === 'time'"> <picker :mode="mode" :value="pickValue" @change="onChangeDateOrTime"></picker> </block> </template> ``` ##### 定义属性与方法 通过 props 接收来自父级作用域传递过来的关键参数；methods 则负责监听用户交互行为触发相应的业务流程[^2]。 ```javascript <script setup lang="ts"> import { ref, watch } from 'vue'; const props = defineProps({ value: { type: Array, default() { return []; } }, mode: String // region | date | time }); let pickValue = ref(props.value); watch(() => props.value, newValue => { pickValue.value = newValue; }, { immediate: true }); function onChangeRegion(e) { let val = e.detail.value; emit('input', val); } function onChangeDateOrTime(e) { let val = e.detail.value; emit('input', val); } </script> ``` ##### 添加样式支持 最后不要忘记为新组建添加合适的 CSS 样式使其外观更加美观大方。 ```css <style scoped> /* 自定义样式 */ .picker-item { line-height: 50px; text-align: center; } </style> ``` #### 应用实例展示 当完成了以上步骤之后就可以轻松地在整个项目里调用这个新的 `CustomPicker` 组件了。下面给出一段简单的使用案例[^4]。 ```html <!-- ParentComponent.vue --> <custom-picker v-model="selectedItems" mode="region"></custom-picker> ``` ```javascript <script setup lang="ts"> import CustomPicker from './components/CustomPicker.vue'; import { ref } from 'vue'; let selectedItems = ref([0]); </script> ```