1.子组件
<template>
<div :class="['modal', customClassName]" v-if="visible">
<div class="modal-content">
<div class="modal-header">
<div class="title">{{ title }}</div>
<button class="btn-close" @click="close"></button>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<button class="btn-close" @click="close">取消</button>
<button class="btn-confirm" @click="confirm">提交</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "MyModal",
props: ["visible", "title", "customClassName"],
methods: {
close() {
this.$emit("update:visible", false);
},
confirm() {
console.log("confirm");
this.close();
},
},
};
</script>
<style lang="less" scoped>
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(#000,0.5);
display: flex;
align-items: center;
justify-content: center;
.modal-content {
width: 415px;
background: #fff;
border-radius: 12px;
text-align: center;
.modal-header {
height: 65px;
position: relative;
font-weight: 500;
font-size: 18px;
line-height: 65px;
color: #000000;
border-bottom: 1px solid #f2f2f2;
.btn-close {
width: 16px;
height: 16px;
background: url(https://qgt-document.oss-cn-beijing.aliyuncs.com/P3-5-Vue/5/5-1-1.png)
no-repeat center / contain;
position: absolute;
top: 23px;
right: 30px;
border: none;
cursor: pointer;
&:focus {
outline: none;
}
}
}
.modal-body {
padding: 0 30px;
font-size: 0;
}
.modal-footer {
padding: 30px;
display: flex;
justify-content: space-between;
.btn-close,
.btn-confirm {
width: 125px;
height: 40px;
font-size: 15px;
line-height: 40px;
box-sizing: border-box;
cursor: pointer;
border: none;
&:focus {
outline: none;
}
}
.btn-close {
background: #ffffff;
border: 1px solid #ebebeb;
color: #1b1b1b;
}
.btn-confirm {
background: #3ab599;
color: #fff;
}
}
}
}
</style>
2.父组件
<template>
<div id="app">
<button @click="visible = true" class="btn">打开“留言”弹框</button>
<!-- “留言”弹框 -->
<MyModal
customClassName="textarea-modal"
title="留言222"
:visible.sync="visible"
@confirm="confirm"
>
<div class="txt">留下你想告诉我们的话...</div>
</MyModal>
</div>
</template>
<script>
import MyModal from './MyModal.vue';
export default {
name: 'app',
components: {
MyModal
},
data(){
return{
visible: false,
}
},
methods: {
confirm() {
console.log(22222);
}
}
};
</script>
<style lang="less">
.textarea-modal {
.txt {
font-size: 16px;
}
}
</style>