一、单选样式弹窗选择
1、View页面代码
<uni-popup ref="textBox" type="bottom">
<view class="select_box">
<view class="select_row" v-for="(item,index) in status" @click="selectClick(item.id)">
{{item.name}}
</view>
</view>
</uni-popup>
<view @click="open('2')"> 打开弹窗 </view>2、css页面代码
.select_box {
height: auto;
width: 100%;
background-color: white;
// margin-bottom: 50px;
}
.select_row {
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid rgb(235, 235, 235);
// padding-left: 100px;
}3、js代码
data（）
data() {
return {
verBj: "", // 选择弹出框中的变量标记
status: [{
id: "0",
name: "是"
},
{
id: "1",
name: "否"
},
],
}
},open(bj) {
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.verBj = bj; // 一个弹出框，确定执行哪个程序
this.$refs.selectBox.open('bottom')
},
selectClick(id) {
// 通道1
if (this.verBj === "1") {
this.checkDesc.isEmergency = id;
}
// 通道2
if (this.verBj === "2") {
this.checkDesc.isJoint = id;
}
this.$refs.popup.close() // 关闭弹窗
}二、弹出输入内容框
1、template页面代码
<uni-popup ref="textBox" type="bottom">
<view class="popupTitle">
请输入内容
</view>
<view class="select_box">
<view class="textBox_1">
<textarea class="textareaBox" v-model="checkDesc.remark" />
</view>
<view class="selectButton" @click="submitClick">
保存提交
</view>
</view>
</uni-popup>2、css页面代码
.select_box {
height: auto;
width: 100%;
background-color: white;
// margin-bottom: 50px;
}
.select_row {
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid rgb(235, 235, 235);
// padding-left: 100px;
}
.selectButton {
height: 45px;
line-height: 45px;
font-size: 18px;
width: 100%;
margin: 0 auto;
background-color: rgb(42, 121, 255);
// border-radius: 5px;
color: white;
text-align: center;
// margin-bottom: 5px;
margin-top: 20px;
}
.popupTitle {
height: 50px;
line-height: 50px;
width: 100%;
background-color: #eaf0f6;
text-align: center;
font-size: 18px;
color: rgb(130, 130, 130);
}
.textBox_1 {
height: 150px;
width: 100%;
}
.textareaBox {
background-color: #f9f9f9;
width: 100%;
height: 100%;
font-size: 20px;
padding: 10px 10px 10px 10px;
}3、js页面代码
return {
verBj: "", // 选择弹出框中的变量标记
textBox: "", // 选择文本框内容
status: [{
id: "1",
name: "是"
},
{
id: "0",
name: "否"
},
],// ============ 【文本框弹窗】
openText(bj) {
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.verBj = bj; // 一个弹出框，确定执行哪个程序
this.$refs.textBox.open('bottom')
},
submitClick() {
this.$refs.textBox.close() // 关闭弹窗
}