一，子组件 modalConfirm.vue文件封装
<template><div class="confirmBgc animations" :style="{backgroundColor:rytColor}" v-show="show"><div class="rytContainer" :style="{borderRadius:rytBorderradius}"><h2 class="rytTitle" v-if="title">{{title}}</h2><div class="rytContent parent"><slot name="content"></slot></div><div class="rytButtons"><div class="button cancel" @click="clickCancel">{{cancel}}</div><div class="rytline"></div><div class="button confirmStyle" @click="clickConfirm">{{confirm}}</div></div></div></div></template>
<!-- slot 插槽又叫内容分发 将父组件的内容放到子组件的指定位置就叫做内容分发 -->
<!-- <slot name="content"></slot> 此为插槽具名用法，在父父组件中只需要 <标签名 slot="content">内容部分</标签名> 即可-->
<script>export default {name:'modalConfirm',props:{rytColor:{type:String,default:'rgba(0,0,0,0.6)'},rytBorderradius:{type:String,default:'12px'},title:{type:[String,Boolean],default:'rrr'},cancel:{type:[String],default:'取消'},confirm:{type:[String],default:'确定'},showModalconfirm:{type:Boolean,default:false}},data(){return{show:false,}},methods:{clickCancel(){this.show = false},clickConfirm(){this.show = falsethis.$emit('oncilckConfirm')}},watch:{showModalconfirm(val){this.show = val},show(val){ //监听show的值，当show的值发生改变的时候val即为当前show的值，把该值传给父组件的v-model属性（v-model绑定的是input事件，出发Input事件）this.$emit('input',val)}}}</script>
<style scoped>.parent{position: relative;}.parent::after { /*利用缩放和伪元素解决1px在不同手机有粗有细问题*/margin:auto auto;width:295px;position: absolute;bottom: 0;left: 0;right: 0;content: "";box-sizing: border-box;height: 1px;border-bottom: 1px solid #e8e8e8;transform: scaleY(0.5);transform-origin: 0 0;}.animations {/* -webkit-animation: 'scaleDraw' 1s ease-in-out 0s 1 alternate forwards; 关键帧名称 */-webkit-animation: 'scaleDraw' .6s ease-in-out 0s 1 alternate forwards;-moz-animation: 'scaleDraw' .6s ease-in-out 0s 1 alternate forwards;-o-animation: 'scaleDraw' .6s ease-in-out 0s 1 alternate forwards;animation: 'scaleDraw' .6s ease-in-out 0s 1 alternate forwards;}.confirmBgc{width:100%;height:100%;position:fixed;top:0px;bottom:0px;left:0px;right:0px;}.rytContainer{width:295px;background-color: #fff;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);}.rytTitle{font-size: 20px;color:#333;font-weight: 700;height:44px;line-height: 44px;}.rytContent{font-size: 16px;color:#333;box-sizing: border-box;padding:0px 20px;padding-bottom: 16px;}.rytButtons{height:48px;color:#333;display: flex;flex-direction: row;justify-content: flex-start;}.button{width:50%;text-indent: center;height:42px;line-height: 42px;}.confirmStyle{color:#FF8200;}.rytline{width:1px;height:42px;background-color: #e8e8e8;/*以下代码是实现line线在x轴上的缩放，使线在不同手机上都显示的比较细*/transform: scaleX(0.5);transform-origin: 0 0;}</style>
二，父组件引用 ceconfirm.vue
<template><div class="about marquee"><button @click="clickConfirm">点击确认弹框modalConfirm</button><modal-confirmv-model="rytModalconfirm":showModalconfirm="rytModalconfirm"@oncilckConfirm="clickConfirmBtn"title="请确认"><span slot="content">身份证姓名与实名认证不符,是否更换为识别到的身份证姓名</span></modal-confirm></div></template>
<script>import modalConfirm from '../../components/modal-confirm/modalConfirm.vue'; //下拉框带popup蒙层export default {name:'ceconfirm',components: { //注册组件modalConfirm},data() {return {rytModalconfirm:false,};},methods: {//modalconfirm 确认弹框逻辑clickConfirm(){this.rytModalconfirm = trueconsole.log(this.rytModalconfirm ,'clickConfirm')},clickConfirmBtn(){ //点击了确认弹窗的确认按钮触发的事件console.log('请继续点击了confirm弹框确定按钮的逻辑')}},}</script><style scoped></style>
三,所用知识点
父子组件之间的传值
slot插槽用法，具名插槽用法
运用v-model实现子组件的显示隐藏
缺点：没有transition的淡入淡出功能特效
------------------------还有一些小瑕疵，待完善------------------------------------
