<template>
<div class="shadow-wrapper" v-if="visible" @click.stop ref="mask"><!-- 遮罩层 -->
<div class="dialog-wrapper"> <!-- 对话框 -->
<div class="info-wrapper"> <!-- 对话框内容部分 -->
<!-- <img class="icon" :src="require(`../common/images/${icon}-circle.png`)"> -->
<div class="text">{{info}}</div>
</div>
<div class="btn-wrapper"> <!-- 对话框按钮部分 -->
<div class="btn" @click="onCancel">{{cancelText}}</div>
<div class="btn" @click="onOk">{{okText}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
mask: {
type: Boolean,
default: false
},
icon: {
type: String,
default: 'info'
},
info: {
type: String,
default: '内容'
},
cancelText: {
type: String,
default: ''
},
okText: {
type: String,
default: ''
}
},
data () {
return {
visible: true
}
},
mounted () {
setTimeout(() => {
if (this.mask) {
this.$refs.mask.style.background = 'rgba(0,0,0,.3)'
}
}, 20)
},
methods: {
show () {
this.visible = true
},
hidden () {
this.visible = false
},
onCancel () {
this.$emit('cancel')
this.hidden()
},
onOk () {
this.$emit('ok')
this.hidden()
}
}
}
</script>
<style scoped>
.shadow-wrapper {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.3)
}
.dialog-wrapper {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
background: #ffffff;
border: solid 1px #ccc;
border-radius: 10px;
box-shadow: 0 0 5px #ccc;
color: #777777;
}
.info-wrapper {
min-height: 80px;
text-align: center;
font-weight: bold;
margin-bottom: 50px;
}
.icon {
margin-top: 10px;
height: 30px;
width: 30px;
}
</style>