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

已于 2024-11-05 09:13:00 修改
阅读量512 收藏 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<9 ? '0' + (curCheckedIndex+1) : '' + (curCheckedIndex+1)
				let time1 = curCheckedIndex<9 ? '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/选择器, ColorPicker/颜色选择器, DatePicker/日期选择器 的使用
Hanyang Li的专栏
06-21 637
Picker/选择器, ColorPicker/颜色选择器, DatePicker/日期选择器 的使用
移动端效果之Picker
糊一笑
10-10 6350
写在前面接着前面的移动端效果的研究，这次来看看picker选择器的实现原理移动端效果之Swiper代码看这里：github1. 核心解析1.1 基本HTML结构<!-- 说明： 1. 类 picker-3d 是为了提供3d视角，如果不需要可以去掉 2. 类 picker-slot-absolute 在3d视角中需要加上，因为下面相对定位的 picker-items 是要相对
uniapp中picker组件问题
qq_63997101的博客
08-09 888
uni的官网的说法是：picker在各平台的实现是有Ul差异的，有的平台如百度、支付宝小程序的Android端是从中间弹出的；有的平台没有取消按钮如App-iOs端。== 日期选择默认在App端和H5端（PC版Chrome以及PC版FireFox）调用的是os的原生日期选择控件，在不同平台有不同的ui表现当配置fields参数后使用统一的展示方式。官网的说明是，配置fileds选项，分别有效值year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统UI，,
Picker.js：让前端选择器变得如此简单
最新发布
mutuyxy的博客
03-15 773
pickerjs是移动端很好用的的筛选器组件，高仿 ios 的 UIPickerView ，非常流畅的体验。
Picker 选择器
waillyer的博客
04-28 2039
Picker 选择器 层级选择 使用Ant Design Mobile Ant Design Mobile 数据项 const province = [ { label: "北京", value: "01", children: [ { label: "东城区", value: "01-1",
picker选择器
weixin_43360488的博客
09-11 1051
普通选择器: mode = selector 属性 类型 默认值 说明 Range Array / Object Array 0 mode=selector时，range有效 range-key String 当range是一个Object时，通过range-key来指定Object中key的值作为选择0器显示内容 Value Number 0 value的值表示选择了...
小程序picker选择器
hql1024的博客
12-03 187
<view class="row"> <label> 用户类型:</label> <picker class="leixing" bindchange="bindPickerChangetwo" value="{{indextwo}}" range="{{arraytwo}}"> <view class=...
mobile-select：手机移动端选择组件支持是否级联单选到多选可逆变更新数据等。
02-19
多功能手机滚动选择器，支持单选多选，支持多级层叠，提供自定义回叫功能，提供更新功能重画，重定位功能，兼容的PC拖动等。 特征 具有本机js的手机选择组件，不依赖任何库 可以传递给普通数组或json数组 根据传递...
iCalendar:vue的PC端日期选择器
04-01
end 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
PC移动端日期时间选择控件
06-06
PC移动端日期时间选择控件,PC移动端日期时间选择控件,PC移动端日期时间选择控件
Vue 下拉选择器
07-14
Vue 下拉选择器是一种常见的UI组件，它在移动端应用中用于实现类似PC端Select的功能，提供用户友好的交互方式来选取特定的选项。在这个上下文中，我们主要探讨Vue下拉选择器的实现、特点和应用场景。 ### Vue组件化...
鸿蒙APP实战案例分析——自定义日历选择器
adaedwa187545的博客
02-18 468
本示例介绍通过CustomDialogController类显示自定义日历选择器。
顶级的 Bootstrap 日期选择器和时间选择器插件（附免费下载链接）
前端仙人的博客
12-28 5621
顶级的 Bootstrap 日期选择器和时间选择器插件 Bootstrap的Datepicker元素是一种用户友好和直观的方式，可以轻松选择日期。它可用于移动端和PC端，还可以选择以 "从右到左 "的格式显示。 日期选择器小部件通常用于在网络应用程序或表格中选择日期。日期选择器可以用来选择一个确切的日子，定义一个天、月或年的间隔。日期选择器根据国家提供了一些预定义的格式，如DD/MM/YYYY或MM/DD/YYYY，根据浏览器的语言设置在网页上相应显示。 我相信，在一些潜在的使用案例中，默认的bootstr
uni——picker普通选择器
努力、拼搏、奋进
12-28 1828
uni——picker普通选择器
Flutter - flutter_picker选择器封装 （底部弹出，包含日期，单列、多列文本）
热门推荐
iotjin的专栏
02-17 2万+
使用版本 flutter_picker: ^1.1.0 date_format: ^1.0.8 #时间处理 包地址 flutter_picker packages地址 date_format packages地址 （判断上下午使用了） ###效果图 使用方法 导入 jhPickerTool.dart 单列选择器 var aa = ["11","22"......
uniapp滚动选择器 picker
w199809w的博客
01-23 3922
columnchange: 某一列的值改变时触发columnchange事件, event.detail = {column:column,value:value}, column的值表示改变了第几列(下标从0开始), value的值表示变更值的下标。), 多列选择器(multiSelector), 时间选择器(time), 日期选择器(date), 省区选择器(region), 默认是普通选择器。value(Array): value每一项的值表示选择了range对应项中的第几个(下标从0开始)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值