vue 组件封装 确认弹框带可以自定义titile ,内容，和取消，确定按钮的弹窗 slot插槽

一，子组件 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 的淡入淡出功能特效

------------------------还有一些小瑕疵，待完善------------------------------------