对uniApp 组件 picker-view 的二次封装,实现日期,时间、自定义数据滚动选择,容易扩展

news/2024/12/22 10:58:19/
htmledit_views">

在开发过程中根据业务需求,对unaipp的picker-view 组件进行了一些封装,目前封装:实现日期,时间、自定义数据滚动选择。

开发的朋友感兴趣可以看看,可以根据你们的需要,可以对封装的组件增加功能配置,扩展更多的功能。在dataObj这个对象里面配置,组件代码如下:

一、封装picker-view组件代码:

html" title=javascript>javascript"><template><!-- 滚动选择器组件 --><picker-view indicator-style="height: 50px" :value="dataObj[usekey].value" @change="bindChange" class="picker-view"><!-- 循环渲染每一列选择器 --><picker-view-column v-for="(item, i) in dataObj[usekey].data" :key="i"><!-- 渲染每列中的选项 --><view class="item" v-for="(v, j) in item.data" :key="j">{{ v }}</view></picker-view-column></picker-view>
</template><script>
// 主要功能说明:
// 这是一个通用的选择器组件,支持日期选择、时间选择和自定义选择
// 通过 usekey 属性控制选择器类型
// 日期选择器默认显示当前日期
// 时间选择器默认显示当前时间
// 选择器值改变时会触发 change 事件,并向父组件传递选中的值const date = new Date() // 获取当前日期对象
// 初始化数据数组
const years = [] // 年份数组:1990-当前年
const months = [] // 月份数组:1-12
const days = [] // 日期数组:1-31
const hours = [] // 小时数组:0-23
const minutes = [] // 分钟数组:0-59
const seconds = [] // 秒数数组:0-59// 生成年份数据
for (let i = 1990; i <= date.getFullYear(); i++) {years.push(i)
}
// 生成月份数据
for (let i = 1; i <= 12; i++) {months.push(i)
}
// 生成日期数据
for (let i = 1; i <= 31; i++) {days.push(i)
}
// 生成小时数据
for (let i = 0; i <= 23; i++) {hours.push(i)
}
// 生成分钟数据
for (let i = 0; i <= 59; i++) {minutes.push(i)
}
// 生成秒数据
for (let i = 0; i <= 59; i++) {seconds.push(i)
}export default {props: {// 选择器类型:dateTimeSelect(完整日期时间选择)、 dateSelect(日期选择)、timeSelect(时间选择)、zSelect(自定义选择)usekey: {type: String,default: "dateSelect",},},data() {return {// 选择器配置对象(如果你需要配置增加功能,请在这里配置实现)dataObj: {// 完整日期时间选择器配置dateTimeSelect: {data: [{ data: years }, { data: months }, { data: days }, { data: hours }, { data: minutes }],value: [years.length - 1, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()], // 默认值设置为当前日期},// 日期选择器配置dateSelect: {data: [{ data: years }, { data: months }, { data: days }],value: [years.length - 1, date.getMonth(), date.getDate() - 1], // 默认值设置为当前日期},// 时间选择器配置timeSelect: {data: [{ data: hours }, { data: minutes }],value: [date.getHours(), date.getMinutes()], // 默认值设置为当前时间},// 自定义选择器配置zSelect: {data: [{ data: 300 }, { data: 300 }, { data: 300 }],value: [119, 79, 69],},},// 日期时间格式化对象dataFormat: {year: date.getFullYear(),month: date.getMonth() + 1,day: date.getDate(),hour: date.getHours(),minute: date.getMinutes(),second: date.getSeconds(),},}},methods: {/*** 选择器值改变事件处理* @param {Object} e - 事件对象*/bindChange(e) {const { value } = e.detail// 完整日期时间选择器值改变if (this.usekey === "dateTimeSelect") {this.dataFormat.year = years[value[0]]this.dataFormat.month = months[value[1]]this.dataFormat.day = days[value[2]]this.dataFormat.hour = hours[value[3]]this.dataFormat.minute = minutes[value[4]]this.$emit("change", this.dataFormat)}// 日期选择器值改变if (this.usekey === "dateSelect") {this.dataFormat.year = years[value[0]]this.dataFormat.month = months[value[1]]this.dataFormat.day = days[value[2]]this.$emit("change", this.dataFormat)}// 时间选择器值改变else if (this.usekey === "timeSelect") {this.dataFormat.hour = hours[value[0]]this.dataFormat.minute = minutes[value[1]]this.$emit("change", this.dataFormat)}// 自定义选择器值改变else if (this.usekey === "zSelect") {const v = value.map((number) => number + 1)this.$emit("change", v)}},},
}
</script><style lang="scss" scoped>
/* 选择器容器样式 */
.picker-view {width: 100%;height: 450rpx;padding: 0 0 20rpx 0;
}
/* 选择器选项样式 */
.item {line-height: 80rpx;text-align: center;font-size: "36rpx";color: #1e1f20;font-weight: bold;
}
</style>

二、组件使用

导入组件:

html" title=javascript>javascript"><template><myPickerView usekey="zSelect" @change="bindChange" /></view>
</template>
<script>
import myPickerView from "@/components/my-picker-view/my-picker-view.vue"; // 导入组件-你的组件路径
export default {components: { myPickerView },data() {return {}},methods: {bindChange(e) {console.log("数据发生变化时触发",e)},},
}
</script>

通过 usekey 属性控制选择器类型:目前实现选择器类型有:dateTimeSelect(完整日期时间选择)、 dateSelect(日期选择)、timeSelect(时间选择)、zSelect(自定义选择)

html" title=javascript>javascript"><myPickerView usekey="dateTimeSelect" @change="bindChange" />

三、效果展示

1、dateTimeSelect:完整日期时间选择: 年、月、日、时、分, 如果需要秒,可在dataObj配置dateTimeSelect对象的data和value数组里面添加秒即可

html" title=javascript>javascript"><myPickerView usekey="dateTimeSelect" @change="bindChange" />

2、dateSelect: 日期选择: 年、月、日

html" title=javascript>javascript"><myPickerView usekey="dateSelect" @change="bindChange" />

3、timeSelect: 时间选择:时、分

html" title=javascript>javascript"><myPickerView usekey="timeSelect" @change="bindChange" />

4、zSelect: 自定义

html" title=javascript>javascript"><myPickerView usekey="zSelect" @change="bindChange" />


http://www.ppmy.cn/news/1557175.html

相关文章

在Windows11上编译C#的实现Mono的步骤

在Windows11上编译Mono的步骤 1、 在win11打开开发者模式,在更新和安全选项里,如下图: 2、下载并安装64位的cygwin, 下载网站:www.cygwin.com 3、 安装 Visual Studio 2015 or later 的社区版本。 4、 下载Mono的windows最新版本。 5、 在cmd.exe里运行下面的命令来安…

centos怎么安装haproxy

在CentOS上安装HAProxy的步骤如下&#xff1a; 添加HAProxy的官方仓库&#xff1a; HAProxy提供了一个官方的RPM仓库&#xff0c;可以通过添加这个仓库来安装最新版本的HAProxy。首先&#xff0c;你需要下载仓库的公钥并添加仓库&#xff1a; sudo rpm --import https://haprox…

B树的性质和插入过程

性质 平衡性&#xff1a;所有叶子节点都在同一层多路&#xff1a;m 阶 B 树 最多&#xff1a; m 个分支&#xff0c;m-1 个元素 最少&#xff1a; 根节点 2 个分支 1个元素 其他节点 ⌈ m / 2 ⌉ \lceil m/2\rceil ⌈m/2⌉ 个分支 ⌈ m / 2 ⌉ \lceil m/2\rceil ⌈m/2⌉ −…

动手学深度学习-线性神经网络-7softmax回归的简洁实现

目录 初始化模型参数 重新审视Softmax的实现 优化算法 训练 小结 在 线性回归的实现中&#xff0c; 我们发现通过深度学习框架的高级API能够使实现 线性回归变得更加容易。 同样&#xff0c;通过深度学习框架的高级API也能更方便地实现softmax回归模型。 本节如在上一节…

MapBox实现深蓝色科技风格底图方案

先来简单看一下效果: 当然你也可以根据自己的喜好去调整颜色: 而且我亲自测试不会影响其他的图层效果。 因为mapbox到目前为止的3.8.0版本不像openlayers那样能够灵活的操作图层。因此在mapbox中通过修改天地图去改变其底图色彩样式就变得比较困难。 我们都知道(不知道 的…

Webpack学习笔记(5)

1.拆分开发环境和生产环境配置 很多配置在开发环境和生产环境存在不一致的情况&#xff0c;比如开发环境没有必要设置缓存&#xff0c;生产环境需要设置公共路径等等。 2.公共路径 使用publicPath配置项&#xff0c;可以通过它指定应用程序中所有资源的基础路径。 webpack.…

Nginx负载均衡(upstream)

Nginx负载均衡(upstream) upstream 主要是配置均衡池和调度方法 proxy_pass 主要是配置代理服务器ip或服务器组的名字 upstream testTomcat{​​​​server 127.0.0.1:81 weight=1;​​​​server 127.0.0.1:82 weight=1;​​​​server 127.0.0.1:83 weight

ASPICE VS 敏捷开发

ASPICE&#xff08;Automotive SPICE&#xff0c;汽车软件过程改进与能力评估&#xff09;是一个用于汽车行业的软件过程改进和能力评估的框架。它提供了一套标准化的流程和评估模型&#xff0c;帮助汽车行业的组织提高软件开发的质量和效率。ASPICE 是基于ISO/IEC 15504&#…