uni-app 微信小程序弹出输入框

浅浅的花香味﹌ 2021-12-01 10:34 1636阅读 0赞

> ### 弹出输入框样式效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzM3Mjc0_size_16_color_FFFFFF_t_70][]

### 1.html 弹出框和遮罩层 ###

<view :hidden="userFeedbackHidden" class="popup_content">
    			<view class="popup_title">写下您的反馈意见</view>
    			<view class="popup_textarea_item">
    				<textarea class="popup_textarea" placeholder='有什么想告诉我们的...' v-model="feedbackContent">
    				</textarea>
    				<view @click="submitFeedback()">
    					<button class="popup_button">提交反馈</button>
    				</view>
    			</view>
    		</view>
    		<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>

## ##

### 2.scss样式 ###

.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: 520upx;
    		height: 550upx;
    		margin-left: -270upx;
    		margin-top: -270upx;
    		border: 10px solid white;
    		background-color: white;
    		z-index: 1002;
    		overflow: auto;
    		border-radius: 20upx;
    	}
    
    	.popup_title {
    		padding-top: 20upx;
    		width: 480upx;
    		text-align: center;
    		font-size: 32upx;
    	}
    
    	.popup_textarea_item {
    		padding-top: 5upx;
    		height: 240upx;
    		width: 440upx;
    		background-color: #F1F1F1;
    		margin-top: 30upx;
    		margin-left: 20upx;
    	}
    
    	.popup_textarea {
    		width: 410upx;
    		font-size: 26upx;
    		margin-left: 20upx;
    	}
    
    	.popup_button {
    		color: white;
    		background-color: #4399FC;
    		border-radius: 20upx;
    	}

### 3. data中定义userFeedbackHidden 控制显示隐藏 ###

data() {
    			return {
                    userFeedbackHidden: true, // 默认隐藏
                    feedbackContent: '' // 用户反馈内容
                }
            }

### 4.定义方法控制显示隐藏 ###

showDiv() { // 显示输入弹出框
    				this.userFeedbackHidden = false;
    			},
    			hideDiv() { // 隐藏输入弹出框
    				this.userFeedbackHidden = true;
    			},
    			submitFeedback() { // 提交反馈
    
                        var _this =this;
    				   // 提交反馈内容
                        console.log(_this.feedbackContent);
    			}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NzM3Mjc0_size_16_color_FFFFFF_t_70]: /images/20211201/ce88e06f7dbf41049386b01095acfd5f.png