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
<template>
<van-popup v-model="show" closeable :style="{ height: '55%', width: '70%' }" @closed="closed">
<div class="popup-heater">{{ title }}</div>
<div class="popup-body">
<slot> </slot>
</div>
<div class="popup-footer">
<button v-show="showCancel" @click="button_cancel">{{ cancelText }}</button>
<button v-show="showConfirm" @click="button_confirm">{{ confirmText }}</button>
</div>
</van-popup>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { Popup } from "vant";
Vue.use(Popup);
/**
* @Description 弹窗
* @Author JiangTao
* @Date 2021-11-10 下午 06:12
*/
@Component({
name: "BasePopup",
})
export default class BasePopup extends Vue {
@Prop({ default: false }) value: boolean | undefined; // 显示弹窗
@Prop({ default: false }) showCancel: boolean | undefined;
@Prop({ default: false }) showConfirm: boolean | undefined;
@Prop({ default: "取消" }) cancelText: string | undefined;
@Prop({ default: "确认" }) confirmText: string | undefined;
@Prop({ default: "提示信息" }) title: string | undefined;
show: boolean | undefined = false;
@Watch("value")
onshow() {
this.show = this.value;
}
closed() {
this.show = false;
this.$emit("input", false);
}
button_cancel() {
this.$emit("cancel");
this.closed();
}
button_confirm() {
this.$emit("confirm");
}
}
</script>
<style scoped>
.popup-heater {
width: 100%;
height: 13%;
line-height: 55px;
padding-left: 3%;
font-size: 18px;
font-family: "Arial Normal", "Arial";
border-bottom: 1px solid #d7d7d7;
}
.popup-body {
width: 96%;
height: 70%;
padding: 3.5% 0;
margin: 0 auto;
}
.popup-footer {
width: 50%;
margin: 0 auto;
display: flex;
justify-content: center;
align-content: center;
}
.popup-footer button {
flex: 1;
border-radius: 30px;
padding: 2% 0;
margin: 0 2%;
font-size: 16px;
outline: none;
}
.popup-footer > button:nth-child(1) {
border: 1px solid #d7d7d7;
color: #999999;
background-color: white;
}
.popup-footer > button:nth-child(2) {
border: 1px solid #FF574C;
color: white;
background-color: #FF574C;
}
</style>