Picker选择器（同时适用PC和手机端）

已于 2024-09-09 15:38:20 修改
阅读量272 收藏 1
点赞数 3
文章标签： javascript css vue.js
于 2024-07-24 17:57:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H524268015wsw/article/details/140669565
版权

前言：

        开发项目中有些页面是手机和pc两端显示，然后我用了vant的popup和picker，发现其组件的定位是position:fixed,这就导致在pc端这个popup和picker是全屏的非常不好看，最主要的是，这些组件在pc端和手机端的效果是不一样，手机端可以滑动，在pc就不行，也懒得去找了，所以自己写了一个在pc和手机端都可以滑动选择的弹出层picker！

效果图：

友情提示：

        应开发需求，我分享的这picker代码是position: absolute绝对定位，相对于父盒子的大小来展示内容的，需要不同定位可以自己改css。

参考代码

（1）父组件代码

<template>
  <div class="home">
    <el-button type="primary" @click="showPickerBtn" >显示picker</el-button>
    <div style="position: relative; width: 375px;height: 90vh;" >
      <div>父盒子</div>
      <div>选中的日期：{{ checkedDate }}</div>
      <DatePicker v-model="showPicker" @dateConfirm="dateConfirm" ></DatePicker>
    </div>
  </div>
</template>

<script>
import DatePicker from '@/components/DatePicker.vue'

export default {
  name: 'HomeView',
  components: {
    DatePicker
  },
  data() {
    return {
      showPicker: false,
      checkedDate: '' // 接收picker返回的日期
    }
  },
  methods:{
    showPickerBtn() {
      this.showPicker = !this.showPicker
    },
    dateConfirm(date) {
      this.checkedDate = date
    }
  }
}
</script>

（2）picke代码

<!-- 日期选择器 -->
<template>
	<!-- elementui 内置过渡动画 （可以自己写想要的过渡效果） -->
	<transition name="el-fade-in-linear">
		<div class="container" v-show="showPicker" >
			<!-- 遮罩放冒泡 -->
			<div class="modal" @click.stop="modalClick"></div>
			<transition name="el-zoom-in-bottom">
				<div v-show="showPicker" class="contentBox" @click.stop>
					<div class="btnBox">
						<span class="cancleBtn" @click="popBtn(0)">取消</span>
						<span class="confirmBtn" @click="popBtn(1)">确定</span>
					</div>
					<div class="optionBox">
						<div class="curCheckBox"></div>
						<!-- 年 -->
						<div ref="yearScrollRef" class="arrange" 
							@touchstart="onTouchStart($event, 0)"
							@mousedown="startDrag($event, 0)"
							@scroll="curCheckDate($event,0)"
						>
							<div class="topVagueBox"></div>
							<div class="optionItem" v-for="(item, index) in yearOption" :key="index">
								{{ item }}
								<span style="font-size: 16px;" v-if="unit">年</span>
							</div>
							<div class="bottomVagueBox"></div>
						</div>
						<!-- 月 -->
						<div ref="monthScrollRef" class="arrange"
							@touchstart="onTouchStart($event, 1)"
							@mousedown="startDrag($event, 1)"
							@scroll="curCheckDate($event, 1)"
						>
							<div class="topVagueBox"></div>
							<div class="optionItem" v-for="(item, index) in 12" :key="index">
								<span v-if="item < 10">0</span>
								{{ item }}
								<span v-if="unit">月</span>
							</div>
							<div class="bottomVagueBox"></div>
						</div>
						<!-- 日 -->
						<div ref="dayScrollRef" class="arrange"
							@touchstart="onTouchStart($event, 2)"
							@mousedown="startDrag($event, 2)"
							@scroll="curCheckDate($event, 2)"
						>
							<div class="topVagueBox"></div>
							<div class="optionItem" v-for="(item, index) in dayOption" :key="index">
								<span v-if="item < 10">0</span>
								{{ item }}
								<span v-if="unit">日</span>
							</div>
							<div class="bottomVagueBox"></div>
						</div>
						<!-- 时 -->
						<div v-if="type==='dateTime'" ref="hourScrollRef" class="arrange" 
							@touchstart="onTouchStart($event, 3)"
							@mousedown="startDrag($event, 3)"
							@scroll="curCheckDate($event, 3)"
						>
							<div class="topVagueBox"></div>
							<div class="optionItem" v-for="(item, index) in 24" :key="index">
								<span v-if="index < 10">0</span>
								{{ index }}
								<span v-if="unit">时</span>
							</div>
							<div class="bottomVagueBox"></div>
						</div>
						<!-- 分 -->
						<div v-if="type==='dateTime'" ref="minuteScrollRef" class="arrange"
							@touchstart="onTouchStart($event, 4)"
							@mousedown="startDrag($event, 4)"
							@scroll="curCheckDate($event, 4)"
						>
							<div class="topVagueBox"></div>
							<div class="optionItem" v-for="(item, index) in 60" :key="index">
								<span v-if="item < 10">0</span>
								{{ item }}
								<span v-if="unit">分</span>
							</div>
							<div class="bottomVagueBox"></div>
						</div>
						<!-- 秒 -->
						<div v-if="type==='dateTime'" ref="secondScrollRef" class="arrange" 
							@touchstart="onTouchStart($event, 5)" 
							@mousedown="startDrag($event, 5)" 
							@scroll="curCheckDate($event, 5)"
						>
							<div class="topVagueBox"></div>
							<div class="optionItem" v-for="(item, index) in 60" :key="index">
								<span v-if="item < 10">0</span>
								{{ index }}
								<span v-if="unit">秒</span>
							</div>
							<div class="bottomVagueBox"></div>
						</div>
					</div>
				</div>
			</transition>
		</div>
	</transition>
</template>

<script>
export default {
	name:'DatePicker',
	// 自定义v-model
	model: {
		prop: 'showPicker',
		event: 'hidePicker'
	},
	props: {
		// 是否显示picker
		showPicker: {
			type: Boolean,
			default: true,
		},
		// 是否显示单位
		unit: {
			type: Boolean,
			default: true,
		},
		// 时间类型 date=="YYYY-MM-DD" dateTime=="YYYY-MM-DD HH:mm:ss"
		type: {
			type: String,
            default: 'date',
		}
	},
	data() {
		return {
			// 年
			yearOption: [],
			// 月
			monthOption: [],
			// 日
			dayOption: [],
			// 选择的日期
			checkedDate: [],
			timer: null, // 防抖
			isStop: false
		};
	},
	mounted() {
		const currentDate = new Date();
		let currentYear = currentDate.getFullYear()
		this.yearOption = Array(10).fill(null).map((_, i) => currentYear + i + ''); // 本年-后10年
		this.dayOption = Array(31).fill(null).map((_, i) => i + 1); // 31天
		this.defaultDate()
	},	
	methods: {
		// 默认日期
		defaultDate() {
			if(this.type==='date') {
				this.checkedDate = [ this.yearOption[0], '01', '01' ]
			} else {
				this.checkedDate = [ this.yearOption[0], '01', '01', '00', '00', '00' ]
			}
		},
		// 获取对应scroll的ref
		getScrollTopRef(type) {
			const scrollContainerRef = type===0 ?  this.$refs.yearScrollRef 
			:  type===1 ? this.$refs.monthScrollRef 
			:  type===2 ? this.$refs.dayScrollRef 
			:  type===3 ? this.$refs.hourScrollRef 
			:  type===4 ? this.$refs.minuteScrollRef 
			: this.$refs.secondScrollRef
			return scrollContainerRef
		},
		// 手指按下
		onTouchStart(event, type) {
			// event.preventDefault();
			const scrollContainer = this.getScrollTopRef(type)
			// 记录起始位置
			const startY = event.touches[0].clientY;
			const startScrollTop = scrollContainer.scrollTop;
			// 手指移动
			const onTouchMove = (moveEvent) => {
				const dy = moveEvent.touches[0].clientY - startY;
				scrollContainer.scrollTop = startScrollTop - dy;
			};
			// 手指松开
			const onTouchEnd = () => {
				scrollContainer.scrollTop = Math.round(scrollContainer.scrollTop / 50) * 50;
				this.isStop = true
				document.removeEventListener('touchmove', onTouchMove);
				document.removeEventListener('touchend', onTouchEnd);
				
			};
			document.addEventListener('touchmove', onTouchMove);
			document.addEventListener('touchend', onTouchEnd);
		},
		// 鼠标左键按下
		startDrag(event,type) {
			event.preventDefault();
			const scrollContainer = this.getScrollTopRef(type)
			const startY = event.clientY;
			const startScrollTop = scrollContainer.scrollTop;
			// 鼠标移动
			const onMouseMove = (moveEvent) => {
				const dy = moveEvent.clientY - startY;
				scrollContainer.scrollTop = startScrollTop - dy
			};
			// 鼠标松开
			const onMouseUp = () => {
				scrollContainer.scrollTop = Math.round(scrollContainer.scrollTop / 50) * 50
				document.removeEventListener('mousemove', onMouseMove);
				document.removeEventListener('mouseup', onMouseUp);
			};

			document.addEventListener('mousemove', onMouseMove);
			document.addEventListener('mouseup', onMouseUp);
		},
		// 滑动 type：0年 1月 2日 3时 4分 5秒
		curCheckDate(event, type) {
			clearInterval(this.timer)
			this.timer = setTimeout(() => {
				const scrollContainer = this.getScrollTopRef(type)
				let num = scrollContainer.scrollTop / 50
				if(this.isStop){
					scrollContainer.scrollTop = Math.round(num) * 50;
					this.isStop = false
				}
				const itemHeight = 50;
				let curCheckedIndex = Math.round(event.target.scrollTop / itemHeight);
				// 选择二月
				if(type===1 && curCheckedIndex===1) {
					this.dayOption = Array(28).fill(null).map((_, i) => i + 1); // 28天
				} 
				// 选择非二月
				if(type===1 && curCheckedIndex!=1) {
					if([1,3,5,7,8,10,12].includes(curCheckedIndex+1)) {
						this.dayOption = Array(31).fill(null).map((_, i) => i + 1); // 31天
					} else {
						this.dayOption = Array(30).fill(null).map((_, i) => i + 1)
					}
				}
				// 补0 
				let time = curCheckedIndex<10 ? '0' + (curCheckedIndex+1) : '' + (curCheckedIndex+1)
				let time1 = curCheckedIndex<10 ? '0' + (curCheckedIndex+1) : '' + (curCheckedIndex+1)
				// 对应赋值
				if(type===0) {
					this.checkedDate[0] = this.yearOption[curCheckedIndex]
				} else if(type===1) {
					this.checkedDate[1] = time
				} else if(type===2) {
					this.checkedDate[2] = time
				} else if(type===3) {
					this.checkedDate[3] = time1
				} else if(type===4) {
					this.checkedDate[4] = time
				} else {
					this.checkedDate[5] = time1
				}
			}, 200);

		},
		// 弹窗按钮
		popBtn(type) {
			if(type === 1) {
				this.$emit('dateConfirm', this.checkedDate);
			}
			this.$emit('hidePicker', false);
		},
		// 点击模态框
		modalClick() {
			this.$emit('hidePicker', false);
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	user-select: none;
  	z-index: 3000; /* 确保弹出层位于其他内容之上 */

	.modal {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.contentBox {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-radius: 8px 8px 0 0;
		padding: 12px;
		box-sizing: border-box;

		.btnBox {
			display: flex;
			justify-content: space-between;
			margin-bottom: 12px;
			cursor: pointer;

			.cancleBtn {
				font-size: 16px;
				color: #969799;
			}

			.confirmBtn {
				font-size: 16px;
				color: #19a7fc;
			}
		}

		.optionBox {
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: relative;
			cursor: grab;


			.curCheckBox {
				position: absolute;
				left: 0;
				top: 100px;
				width: 100%;
				height: 50px;
				border-top: 1px solid #d8d9da;
				border-bottom: 1px solid #d8d9da;
			}

			.arrange {
				position: relative;
				height: 250px;
				width: 80px;
				overflow: scroll;

				.optionItem {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 50px;
					font-size: 16px;
					line-height: 16px;
					color: #817e7e;
					font-weight: 600;
				}

				.topVagueBox {
					position: sticky;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100px;
                    background: rgba(255, 255, 255, 0.7);
				}

				.bottomVagueBox {
					position: sticky;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 100px;
                    background: rgba(255, 255, 255, 0.7);
				}
			}

			.arrange::-webkit-scrollbar {
				display: none;
			}
		}
	}
}
</style>

总结：

1、代码有注释，有问题可以在评论区留言，看到会及时回复。

2、需要改进的地方可以自己动动小手改一改，工时太赶，有空会优化再发。

一只大黑洋
关注
微信小程序实现自定义picker选择器弹窗内容
08-27
同时，自定义Picker选择器弹窗内容也可以提高用户体验和满意度。 知识点7：微信小程序中Picker选择器弹窗内容的应用场景 微信小程序中Picker选择器弹窗内容的应用场景非常广泛，例如，在电商APP中可以用于选择商品...
用a-time-picker写一个时间范围选择器
浮游的博客
11-01 4028
起因 使用过ant-design组件库的人基本都知道，它的time-picker组件并不像date-picker组件那样，支持时间范围选择。所以，这个时候就只能自己手动来写一个了。 效果 当都为空时可校验 选择时如果先填写开始时间，则结束时间框前面置灰 选择时如果先填写结束时间，则开始时间框后面置灰 实现思路 其中最关键的是如果限制时间范围不冲突，也就是开始时间一定要早于结束时间，其中包含时，分，秒 这里可以利用原生组件的几个方法： 这里因为只需要选择时和分，所以先只有时、分的选项进行验证。 &lt
日历年、月、日、tab切换效果
蓝影灵的博客
07-27 427
一、周效果 周链接：https://download.csdn.net/download/weixin_38948287/11437707 二、月效果 月链接：https://download.csdn.net/download/weixin_38948287/11437715 三、年效果 链接：https://download.csdn.net/down...
uniapp小程序picker组件pc端无法显示
疯癫居士
04-16 756
【代码】小程序picker组件pc端无法显示。
两种时间选择器（移动端和PC端）
热门推荐
kuke_kuke的博客
05-03 1万+
1、移动端时间选择器，以年月为例 此款时间选择器需要引入两个js文件，jquery.js和query.date.js下载地址在本文最后，代码如下： &lt;script type="text/javascript" src="./jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.d.
记录el-timer-picker组件在windows电脑上显示异常问题
ruchu_753的博客
04-11 178
element-ui 2.15.8 版本, 使用了主题样式并保存到本地。因为windows电脑的滚动条默认样式导致。
Element-UI的DatePicker禁用日期选择（type=date/daterange）
sleepwalker_1992的专栏
03-25 4985
Element-UI的el-date-picker禁用日期选择：禁用今天之前的日期选择、禁用今天之后的日期选择、限制选择日期范围
el-data-picker季度区间选择器
08-02
"el-data-picker季度区间选择器"就是这样一个组件，它专为基于ElementUI 2.15.8和Vue.js 2框架的应用设计。这个组件允许用户方便地选取特定时间范围内的季度，提高用户在数据过滤、检索或分析时的效率。 ElementUI...
微信小程序之picker日期和时间选择器
08-31
本篇文章主要介绍了微信小程序之picker选择器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈vant组件Picker 选择器选单选问题
01-18
1.写遮罩 2.定义data 3.写事件 4.效果图 补充知识：vue使用vant编辑用户性别 我就废话不多说了，大家还是直接看代码吧~ 性别 value=user.gender click=isEditGenderShow> <!... close-on-c
JS插件 ---- pc端时间插件demo，精确到分钟
06-27
pc端时间插件demo，精确到分钟，可以年月日格式，可以时分格式，可以年月日时分格式的时间插件demo。
移动PC兼容，选择日期（时间）插件
07-18
1.支持PC，移动兼容 2.支持选择日期，选择 年-月-日，选择 年-月 选择 时-分，选择年-月-日-时-分 四种模式 3.在时，分上支持了 间隔时间数，支持指定隐藏 具体时分等功能，具体看代码 注释。 4.该插件是在第三方插件上做了2次修改的。zepto/jquery 引入一个即可。 5.采用require。方式引入依赖，可灵活变更
微信小程序 picker 组件详解及简单实例
11-29
微信小程序picker 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input  微信小程序 form 微信小程序 checkbox 实现效果图： 微信小程序picker 滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器 普通选择器：mode=selector 属性名 类型 默认值 说明 range
适应手机端的mobiscroll时间控件
08-22
移动端避免不了需要使用时间控件，这个控件可以很好的适应android和苹果系统，滑动选择日期、时间、日期时间，非常实用。
PC移动端日期时间选择控件
06-06
PC移动端日期时间选择控件,PC移动端日期时间选择控件,PC移动端日期时间选择控件
深度探索 `picker`：一款灵活的前端选择器库
最新发布
gitblog_00016的博客
04-24 371
深度探索 picker：一款灵活的前端选择器库 项目地址:https://gitcode.com/xingchou/picker 项目简介 在前端开发中，我们经常需要创建各种各样的选择器组件，如日期选择、时间选择、颜色选择等。picker项目由开发者xingchou打造，提供了一套高度可定制化、轻量级的选择器解决方案，旨在简化此类组件的开发工作。该项目的目标是为开发者带来一致且易用的API，以及良...
二次封装elementUI的时间选择器，可以选择以日月年为单位
一起来看烟花吧的博客
12-08 1590
目录标题elementUI封装的时间选择器二次封装成一个组件效果如下子组件全局注册自定义组件父组件中使用二次封装的时间选择器通信方式参考 elementUI封装的时间选择器 element-UI的时间选择器如下图所示，通过type属性可以设置日期选择器的时间单位，可以以日、周、月、年为单位。这里二次封装时间选择器，让一个时间选择器可以选择以日，月，年为单位。 <div class="container"> <div class="block"> <span c
分享一个PC端好用的日历组件（兼容IE11及信创浏览器）
qq_45349018的博客
04-12 1129
dhtmlxCalendar是一个组件，可以采用弹出式日期选择器或平面日历的形式。作为用户网站或应用程序的智能日期选择解决方案，该组件非常易于使用，并且完全可定制以满足每个人的需求。提供了完整的JavaScript API，以帮助用户节省配置时间。dhtmlx官网。
Bootstrap时间选择器实战：datetimepicker与daterangepicker解析
本文将详细介绍Bootstrap时间选择器中的datetimepicker和daterangepicker的使用方法和实例，帮助开发者理解和应用这两个插件。 Bootstrap是一个流行的前端开发框架，提供了丰富的组件和插件来简化网页设计和开发。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值