uniapp—弹出框组件(弹窗)组件(有取消,确定按钮)代码
popUptips.vue
<template>
<view class="">
<!-- 弹出框 -->
<view class="masks" @click="colseBtn" v-if="isSHow"></view>
<view class="kuangs paddingA40 marR40 marL40 boxSize " v-if="isSHow">
<image class="iconSize30 floatR" src="/static/images/close1.png" mode="" @click="colseBtn"></image>
<view class="FontCenter fontSize16 fontWei marB60 marT60 widP100">
<view class="marB40">
{{zdTit}}
</view>
{{zdTxt}}
</view>
<view class="display widP100 marT80">
<view class="kuangbtn" @click="colseBtn">
取消
</view>
<view class="kuangbtn kuangbtn1" @click="zdBtn">
确定
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
inputVal: '',
searTxt: '搜索',
}
},
props: {
// 组件输入值
zdTit: {
type: [String],
default: '提示文字'
},
zdTxt: {
type: [String],
default: '提示内容'
},
isSHow:{
type: [Boolean],
default: false
}
},
methods: {
//点击取消按钮
colseBtn() {
this.$emit("colseBtn" )
},
//点击确定按钮
zdBtn() {
this.$emit("zdBtn")
}
},
computed: {
// 子组件中更改绑定的prop值最好使用计算属性computed解决
},
watch: {
// father(){
// this.son = "儿子"
// }
},
}
</script>
<style>
.masks {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #2F2F2F;
opacity: 0.8;
z-index: 99;
}
.kuangs {
width: 90%;
border-radius: 20rpx;
background-color: rgba(255, 255, 255, 100);
position: fixed;
top: 30%;
z-index: 999;
}
.kuangbtn {
width: 316rpx;
height: 92rpx;
line-height: 92rpx;
border-radius: 60rpx 0px 0px 60rpx;
background-color: rgba(246, 247, 251, 100);
color: rgba(47, 47, 47, 100);
font-size: 14px;
text-align: center;
border: 1px solid rgba(47, 47, 47, 100);
}
.kuangbtn1 {
border-radius: 0px 60rpx 60rpx 0px;
background-color: rgba(47, 47, 47, 100);
color: #fff;
}
.paddingA40 {
padding: 40rpx;
}
.marR40 {
margin-bottom: 40rpx;
}
.marL40 {
margin-left: 40rpx;
}
.boxSize {
box-sizing: border-box;
}
.marB40 {
margin-bottom: 40rpx;
}
.FontCenter {
text-align: center;
}
.fontSize16 {
font-size: 32rpx;
}
.fontBold {
font-weight: bold;
}
.marB60 {
margin-bottom: 60rpx;
}
.marT60 {
margin-top: 60rpx;
}
.widP100 {
width: 100%;
}
.marT80 {
margin-top: 80rpx;
}
.iconSize30 {
width: 62rpx;
height: 62rpx;
}
.floatR {
float: right;
}
.display {
display: flex;
}
.fontWei {
font-weight: bold;
}
</style>
调用组件
<!-- 弹出框 -->
<popUptips zdTit='确认取消' :zdTxt='zdTxt' :isSHow='isSHow' @colseBtn='colseBtn' @zdBtn="zdBtn"></popUptips>
<script>
export default {
data() {
return {
zdTxt: '',
isSHow: false,
},
},
methods:{
// 关闭弹出框
colseBtn() {
this.isSHow = false;
},
// 点击确定按钮
zdBtn() {
this.$myRequest('cancelPtClassOrder', 'POST', {
uid: this.uid,
gid: this.gid,
oid: this.oid,
ptid: this.ptid,
})
.then(v => {
this.$alert(v.data);
this.ptGetMemberPt();
this.colseBtn();
})
},
}
}
</script>