网站建设与管理基础及实训,php外贸网站建设,wordpress 云储存插件,免费下载网站有哪些封装模态框需要定义的参数 title //弹窗标题 show // 是否显示弹窗 width // 弹窗宽度 height // 弹窗高度 borderRadius // 弹窗圆角 headerColor // 弹窗顶部颜色 contentText // 内容文本 contentTextCorder //内容文本颜色 position // 标题的位置 … 封装模态框需要定义的参数 title //弹窗标题 show // 是否显示弹窗 width // 弹窗宽度 height // 弹窗高度 borderRadius // 弹窗圆角 headerColor // 弹窗顶部颜色 contentText // 内容文本 contentTextCorder //内容文本颜色 position // 标题的位置 btnGroupShow // 按钮的显示隐藏 confirmText // 确认按钮的文本 cancelText // 取消按钮的文本 封装模态框需要定义的方法 const cancelHandler () { // 关闭弹窗的方法 } const confirmHandler () { // 弹窗点击确认的方法 } 在components文件新建一个modal-dialog.vue文件
1、defineProps 在Vue 3中defineProps 是一个用于定义传入组件的 Props 的函数。它通常用在组合式 API 或 Composition API 中。
2、defineEmits 的用法 defineEmits的用法是在子组件中定义接收父组件传过来的方法
templatediv classmodal-box v-ifshowdiv classdialog-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/headerdiv classicon clickcancelHandlerX/divdiv classcontentp v-ifprops.contentText :style{color:props.contentTextCorder}{{props.contentText}}/pslot namecontent/slot/divfooterdiv classbtn-boxbutton v-ifprops.btnGroupShow classboom clickcancelHandler{{props.cancelText }}/buttonbutton v-ifprops.btnGroupShow classboom clickconfirmHandler{{props.confirmText }}/button/div/footer/div/div
/templatescript 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)
}/scriptstyle 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;
}/styleindex.vue主组件
templatedivulli3243243242343243243242/lili3243243242343243243242/lili3243243242343243243242/li/ulbutton clickopenDialog打开弹窗/buttonmodal-dialog:titletitle:showisShow:width500:height200:borderRadius10headerColorskybluecontentTextThis is a super modal this is a super madelcontentTextCorderredpositionleft:btnGroupShowtrueconfirmText确定cancelText取消confirmmodalConfirmclosemodalClosetemplate v-slot:contenth3我是具名插槽/h3/template/modal-dialog/div
/templatescript setup
// 引入组件不用注册
import modalDialog from ./components/modal-dialog.vueimport {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
}/scriptstyle
a{color: skyblue;
}
/style
