uni-app 封装底部弹出框

晓_枫

已于 2023-04-18 09:26:45 修改

阅读量2.7k

点赞数 2

分类专栏： vue uni-app 文章标签： uni-app

于 2021-07-10 11:38:22 首次发布

本文链接：https://blog.csdn.net/qq_18676843/article/details/118633010

版权

vue 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

uni-app

6 篇文章 0 订阅

订阅专栏

这是一个简单的Vue组件，用于替代原生的select选择器。组件包含弹出、确认及取消功能，可根据需要自定义位置、动画和样式。点击确认返回选中项，点击取消关闭弹出框。可以通过props传递选择列表和显示字段名。

摘要由CSDN通过智能技术生成

一个很简单的代替 select 的组件；

这里只实现了弹出、确认时返回选中的选中的对象；

没有实现弹出时显示为第几个，有需要可以自己加；

位置、弹出动画、样式都可以根据自己的需要进行修改；

有问题或者建议可以在评论区回复

<template>
	<view class="select_outer" :style="{transform:  status ? 'translateY(0)' : 'translateY(100%)'}">
		<view class="t">
			<text @click="cancel">取消</text>
			<text @click="pri_affrim">确认</text>
		</view>
		<picker-view @change="change" class="picker-view">
			<picker-view-column>
				<view class="item" v-for="(item,index) in list" :key='index'>{{item[value]}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
        // 传参示例
		// list: [{
		// 	label: '1',
		// 	id: 1
		// },{
		// 	label: '2',
		// 	id: 2
		// },{
		// 	label: '3',
		// 	id: 3
		// },{
		// 	label: '4',
		// 	id: 4
		// }],
		// value: 'label',
		props: {
			list: { //数组 选择的列表 
				
			},
			value: { //字符串  要展示字段的字段名
				
			}
		},
		data() {
			return {
				status: false,
				index: 0,
			}
		},
		methods: {
			change(e){  //滑动时触发
				console.log(e);
				this.index = e.target.value[0];
			},
			cancel(){  //取消时触发
				this.status = false;
			},
			pri_affrim() { //确认时触发
				this.$emit('affrim', this.list[this.index]);
				this.cancel();
			},
			show() { //父级调用这个方法显示弹出框
				this.status = true;
			}
		},
		onLoad() {
			console.log('u-select');
		}
	}
</script>

<style lang="less" scoped>
	.select_outer{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		transition: all .3s;
		.t{
			background-color: #fff;
			display: flex;
			padding: 10px 20px;
			border-radius: 20px 20px 0 0;
			justify-content: space-between;
			text:nth-child(1){
				color: #ccc;
			}
			text:nth-child(2){
				color: #576b95;
			}
		}
	}
	uni-picker-view {
		   display: block;
		   background-color: #fff;
		}
		 uni-picker-view .uni-picker-view-wrapper {
		   display: flex;
		   position: relative;
		   overflow: hidden;
		   height: 100%;
		   background-color: #fff;
		 }
		 uni-picker-view[hidden] {
		  display: none;
		 }
		
		 picker-view {
		   width: 100%;
			height: 300upx;
			
		}
		
	.item {
		line-height: 50upx;
		text-align: center;
	 }
</style>