15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 uinapp

uniapp带输入框的弹窗

王少铮| 发布于 2021-09-08 20:10:21| 829阅读| 0点赞| 0评论
举报

不需要组件实现的弹窗,可以点击弹出并且输入内容提交

这个输入框弹窗啥都好,唯一的缺点就是长得丑,懂行的大哥可以自己调整css样式

//弹出输入框
template里
	<view :hidden="userFeedbackHidden" class="popup_content">
						<view class="popup_title">昵称</view>
						<view class="popup_textarea_item">
							<input type="text"  class="popup_textarea" value=""  v-model="feedbackContent" placeholder="请输入新昵称"/>
						<view @click="submitFeedback" class="buttons">
							<text class="popup_button">确定</text>
						</view>
					</view>
				</view>
			<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>



return里
		return {
				userFeedbackHidden: true, // 默认隐藏
				feedbackContent: '' ,// 输入数量
			}




methods的方法
	showDiv() { // 显示输入弹出框
				this.userFeedbackHidden = false;
			},
			hideDiv() { // 隐藏输入弹出框
				this.userFeedbackHidden = true;
			},
			submitFeedback(){ //提交

			}




style里
	/*弹窗*/
	.popup_overlay {
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: .80;
			filter: alpha(opacity=88);
		}
			 
		.popup_content {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 520rpx;
			height: 250rpx;
			margin-left: -270rpx;
			margin-top: -270rpx;
			border: 10px solid white;
			background-color: white;
			z-index: 1002;
			overflow: auto;
		}
			 
		.popup_title {
			width: 480rpx;
			text-align: center;
			font-size: 32rpx;
		}
			 
		.popup_textarea_item {
			padding-top: 5rpx;
			height: 80rpx;
			width: 440rpx;
			background-color: #F1F1F1;
			margin-top: 20rpx;
			margin-left: 20rpx;
			padding-top: 25rpx;
		}
			 
		.popup_textarea {
			width: 410rpx;
			font-size: 26rpx;
			margin-left: 20rpx;
		}
			 
		.popup_button {
			color: #000000;
		}
		.buttons{
			text-align: center;
			font-size: 32rpx;
			margin-top: 40rpx;
			}

效果截图如下

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

王少铮
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部