一，子组件 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 = false this.$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-confirm v-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 = true console.log(this.rytModalconfirm ,'clickConfirm') }, clickConfirmBtn(){ //点击了确认弹窗的确认按钮触发的事件 console.log('请继续点击了confirm弹框确定按钮的逻辑') } }, } </script>
<style scoped>
</style>
三,所用知识点 父子组件之间的传值 slot 插槽用法，具名插槽用法
运用v-model实现子组件的显示隐藏 缺点：没有transition 的淡入淡出功能特效 ------------------------还有一些小瑕疵，待完善------------------------------------
