vue的确认弹窗组件,子组件直接调用即可,支持取消和确认按钮的文案配置,颜色配置,边框颜色配置,设置取消时间,确认事件
子组件
<template>
<!-- 确认弹窗 -->
<transition name="fade"
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
:duration="{ enter: 50, leave: 50 }">
<div class="confirm-window">
<div class="confirm-content">
<p class="confirm-title">取消订单</p>
<div class="confirm-body">取消订单后不可恢复,是否确认取消订单?</div>
<div class="confirm-btn">
<span :style="'color:' + cancelTextcolor + 'border-color:' + cancelBorder + 'background:' + cancelBgcolor" @click="cancelFun">{
{cancelText}}</span>
<span :style="'color:' + confirmTextcolor + 'border-color:' + confirmBorder + 'background:' + confirmBgcolor" @click="confirmFun">{
{confirmText}}</span>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
};
},
props: {
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
cancelText: { // 取消按钮文案
type: String,
default: '取消'
},
cancelTextcolor: { // 取消文案颜色
type: String,
default: '#2D2F32'
},
cancelBorder: { // 取消边框颜色
type: String,
default: '#A9B0BC'
},
cancelBgcolor: { // 取消背景色
type: String,
default: '#fff'
},
confirmText: { // 确认文案
type: String,
default: '确认'
},
confirmTextcolor: { // 确认文字颜色
type: String,
default: '#2D2F32'
},
confirmBorder: { // 确认边框颜色
type: String,
default: '#A9B0BC'
},
confirmBgcolor: { // 确认背景颜色
type: String,
default: '#fff'
}
},
created() {
},
mounted() {
},
methods: {
cancelFun () {
this.$emit('cancelFun');
},
confirmFun () {
this.$emit('confirmFun');
}
}
};
</script>
<style lang="less">
.confirm-window {
width: 100%;
height: 100vh;
background: rgba(0,0,0,.8);
z-index: 15;
position: absolute;
top: 0;
left: 0;
.confirm-content {
background: #fff;
width: 560px;
margin: 320px auto;
text-align: center;
padding: 42px 36px;
box-sizing: border-box;
.confirm-title {
font-size: 32px;
}
.confirm-body {
font-size: 28px;
text-align: left;
margin: 20px 0;
}
.confirm-btn {
display: flex;
justify-content: space-between;
align-items: center;
span {
width: 47%;
display: inline-block;
font-size: 32px;
border-width: 1px;
border-style: solid;
border-radius: 50px;
height: 86px;
line-height: 86px;
}
}
}
}
</style>
父组件
import ConfirmDialog from '../components/confirmDialog';
components: {ConfirmDialog },
<ConfirmDialog
v-if="showConfirmDialog"
title="取消订单"
content="取消订单后不可恢复,是否确认取消订单?"
@cancelFun="cancelFun"
@confirmFun="confirmFun"
>
</ConfirmDialog>