uniapp---弹出框组件代码

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

调用组件

<!-- 弹出框 -->
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35