仿uView下拉选择

最新推荐文章于 2024-03-25 20:48:34 发布

爱美丽007

最新推荐文章于 2024-03-25 20:48:34 发布

阅读量136

点赞数

文章标签： javascript uniapp

本文链接：https://blog.csdn.net/weixin_63456913/article/details/130266223

版权

这是一个使用Vue.js编写的HTML组件，展示了一个包含公司列表的弹出窗口。每个公司条目显示名称、角色和员工状态（在职或离职），用户可以点击选择公司，选中的项会高亮显示。组件还包含了打开、关闭弹窗的方法以及切换选中项的逻辑，选中后500毫秒自动关闭，并更新显示的公司名称。

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

html:

<view class="pop">
			<u-popup :show="show" @close="close" @open="open"  mode="top" >
				<view class="select_item">
					<view class="step" v-for="(item,index) in companyList" :key='index' @click="select(index)">
						<view class="step_top">
							<view  class="member">{{item.name}}</view>
							<u--image v-if="isActive==index" class="check" src="/static/checked.png" width="32rpx" height="24rpx">
							</u--image>
						</view>
						<view class="step_bottom">
							<text class="role">角色：{{item.role}}</text>
							<view :class="{status:true,blue:item.inJob=='在职',grey:item.inJob=='离职'}">
								<text class="status_text">{{item.inJob}}</text>
								</view>
						</view>
					</view>
					
				</view>
			</u-popup>
		</view>

css

 .pop{
			.select_item{
				width: 750rpx;
				height: 440rpx;
				background: #FFFFFF;
				padding: 24rpx 30rpx;
				box-sizing: border-box;
				
				.step{
					padding: 24rpx 0;
					box-sizing: border-box;
					margin-bottom: 10rpx;
					.step_top,.step_bottom{
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
					.step_top{
						margin-top: 10rpx;
						.member{
							font-size: 28rpx;
							font-weight: 500;
							color: #111111;
						}
					}
					.step_bottom{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.role{
							display: block;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
						.status{
							width: 72rpx;
							height: 36rpx;
							border-radius: 4rpx;
							text-align: center;
							margin-left: 20rpx;
							line-height: 34rpx;
							.status_text{
								font-size: 24rpx;
								font-weight: 400;
								position: relative;
								z-index: 99;
							}
						}
						.status::after {
							width: 72rpx;
							height: 36rpx;
							border-radius: 4rpx;
							content: "";
							display: inline-block;
							position: relative;
							left: 0rpx;
							top: -35rpx;
							opacity: 0.1;
						}
						.blue {
							.status_text {
								color: #204D96;
							}
							&::after {
								background: #204D96;
							}
						}
						.grey {
							.status_text {
								color: #999999;
							}
							&::after {
								background: #606266;
							}
						}
					}
				}
			}
		}

js:

//data
show:false,//切换公司
companyList:[
{name:'王佳儿',role:'普通员工',inJob:'离职'},
{name:'北京中能万祺能源技术公司',role:'普通员工',inJob:'在职'},
{name:'深圳市优家网络电子科技有限公司',role:'普通员工',inJob:'离职'},
],
isActive:0,//默认第一个公司
company: '', //公司名
//methods
//切换公司名称
open() {
	console.log('open');
},
close() {
	this.show = false
	console.log('close');
},
select(index){
	let that=this
	console.log('选中',index);
    that.company=item.name;//选中回显
	that.isActive=index；
	let timer = setTimeout(() => {
	that.show = false
	clearTimeout(timer);//定时器自清除
},500);
//调用数据接口
},

效果：