js部分
export default {
data() {
return {
userFeedbackHidden: true, // 默认隐藏
feedbackContent: '' ,// 输入数量
};
},
showDiv() { // 显示输入弹出框
this.userFeedbackHidden = false;
},
hideDiv() { // 隐藏输入弹出框
this.userFeedbackHidden = true;
},
submitFeedback() { // 提交
this.userFeedbackHidden = true;
// 提交内容
},
};
view部分
<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>
css部分
.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;
}