Parámetros que deben definirse para encapsular el cuadro modal
título // Mostrar el título de la ventana emergente // Si se muestra el ancho
de la ventana emergente // Altura del ancho de la ventana emergente // Altura del borde de la ventana emergente Radio // Color del encabezado de la esquina redondeada de la ventana emergente // Ventana emergente color superior de la ventana contentText // Texto del contenido contentTextCorder // Posición del color del texto del contenido // La posición del título btnGroupShow // La visualización y ocultación del botón confirmText // El texto del botón de confirmación cancelText // El texto del botón cancelar
Métodos que deben definirse para encapsular el cuadro modal
const cancelHandler = () => { // Método para cerrar la ventana emergente }
const confirmHandler = () => { // Método para confirmar haciendo clic en la ventana emergente }
Cree un nuevo archivo modal-dialog.vue en el archivo de componentes
1. defineProps En Vue 3, defineProps es una función utilizada para definir los accesorios pasados al componente. Generalmente se usa en API de composición o API de composición.
2. El uso de defineEmits El uso de defineEmits es definir el método en el componente secundario para recibir el método pasado por el componente principal.
<template>
<div class="modal-box" v-if="show">
<div class="dialog-box" :style="{
'background-color':props.contentTextCorder,
'border-radius':props.borderRadius + 'px',
'text-align': props.position,
'width':props.width + 'px',
'height':props.height + 'px'
}">
<header
:style="{
'background-color':headerColor,
'border-top-left-radius':props.borderRadius + 'px',
'border-top-right-radius':props.borderRadius + 'px',
}">
<text>{
{props.title}}</text>
</header>
<div class="icon" @click="cancelHandler">X</div>
<div class="content">
<p v-if="props.contentText" :style="{
'color':props.contentTextCorder
}">
{
{props.contentText}}
</p>
<slot name="content"></slot>
</div>
<footer>
<div class="btn-box">
<button v-if="props.btnGroupShow" class="boom" @click="cancelHandler">{
{props.cancelText }}</button>
<button v-if="props.btnGroupShow" class="boom" @click="confirmHandler">{
{props.confirmText }}</button>
</div>
</footer>
</div>
</div>
</template>
<script setup>
import {defineProps,defineEmits} from "vue";
const emit = defineEmits(['confirm','close'])
const props = defineProps({
//弹窗标题
title:{
type:String,
default:'弹窗标题'
},
// 是否显示弹窗
show:{
type:Boolean,
default:false
},
// 弹窗宽度
width:{
type:Number,
default:500
},
// 弹窗高度
height:{
type:Number,
default:200
},
// 弹窗圆角
borderRadius:{
type:Number,
default:20
},
// 弹窗顶部颜色
headerColor:{
type:String,
default:'blue'
},
// 内容文本
contentText:{
type:String,
default:null
},
contentTextCorder:{
type:String,
default:'#fff'
},
position:{
type:String,
default:'center'
},
btnGroupShow:{
type:Boolean,
default:true
},
confirmText:{
type:String,
default:'是'
},
cancelText:{
type:String,
default:'否'
}
})
const cancelHandler = () => {
emit('close')
}
const confirmHandler = () => {
emit('confirm')
}
</script>
<style scoped>
.modal-box{
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgb(0,0,0,0.4);
}
.modal-box .dialog-box{
background-color: #fff !important ;
position: relative;
left: 50%;
top: 20%;
transform: translate(-50%,-20%);
}
.icon{
position: absolute;
top: 10px;
right: 15px;
background-color: #ec6a5d;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
color: #464444;
font-size: 10px;
line-height: 20px;
}
.icon:hover{
cursor: pointer;
}
header{
width: 100%;
height: 40px;
line-height: 40px;
padding:0 10px 0 10px;
box-sizing: border-box;
}
footer{
width: 100%;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: flex-end;
border-top: 1px solid #ccc;
}
footer .btn-box {
width: 25%;
height: 40px;
display: flex;
align-items: center;
justify-content: space-around;
}
footer .btn-box button {
height: 26px;
}
.content{
width: 100%;
padding:0 10px 0 10px;
box-sizing: border-box;
}
button{
border: 0;
border-radius: 5%;
cursor: pointer;
}
.boom {
background-color: #16a085;
color: #fff;
position: relative;
z-index: 1;
}
.boom::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 2px solid #16a085;
border-radius: 20px;
transform-origin: center;
}
.boom:hover::before {
transform: scale(1.25);
transition: all ease-out .5s;
border: 1px solid #96f3e0;
opacity: 0;
}
</style>
componente principal index.vue
<template>
<div>
<ul>
<li>
3243243242343243243242
</li>
<li>
3243243242343243243242
</li>
<li>
3243243242343243243242
</li>
</ul>
<button @click="openDialog">打开弹窗</button>
<modal-dialog
:title="title"
:show="isShow"
:width="500"
:height="200"
:borderRadius="10"
headerColor="skyblue"
contentText="This is a super modal this is a super madel"
contentTextCorder="red"
position="left"
:btnGroupShow="true"
confirmText="确定"
cancelText="取消"
@confirm="modalConfirm"
@close="modalClose"
>
<template v-slot:content>
<h3>我是具名插槽</h3>
</template>
</modal-dialog>
</div>
</template>
<script setup>
// 引入组件不用注册
import modalDialog from './components/modal-dialog.vue'
import {ref} from 'vue'
const title = ref('我是弹窗')
const isShow = ref(false)
// 弹窗的确认事件
const modalConfirm = () => {
isShow.value = false
}
// 弹窗的关闭事件
const modalClose = () => {
isShow.value = false
}
const openDialog = () => {
isShow.value = true
}
</script>
<style>
a{
color: skyblue;
}
</style>