Vue自定义弹出层（信息提示）组件

弹出层或信息提示层，数据提交成功或者校验合格不合格时给出相应提示，不需要的字段可以在数据中注掉，flex布局不会影响结构和展示效果，效果如下：

 弹出层（信息提示）组件：

<template>
<div class="PopLayerBg">
<div class="PopLayer">
<div class="popTitle" v-if="popData.title != '' && popData.title != undefined">{{popData.title}}</div>
<div class="popIcon" v-if="popData.icon != '' && popData.icon != undefined" v-html="popData.icon"></div>
<div class="popContent" v-if="popData.content != '' && popData.content != undefined" v-html="popData.content"></div>
<div class="popBtGroup">
<button class="popBtOne" v-if="popData.leftBt != '' && popData.leftBt != undefined" @click="popBtOne">{{popData.leftBt}}</button>
<button class="popBtTwo" v-if="popData.rightBt != '' && popData.rightBt != undefined" @click="popBtTwo">{{popData.rightBt}}</button>
</div>
</div>
</div>
</template>
<script>
export default {
  name: "PopLayer",
  props:{
    popData:Object
    //title 标题文字
    //icon 图标svg
    //content 提示内容
    //leftBt  左边按钮
    //rightBt  右边按钮
  },
  methods:{
  //左边点击
  popBtOne(){
    this.$emit("popBtOne");
  },
  //右边点击
  popBtTwo(){
    this.$emit("popBtTwo");
  },
  }
}
</script>
<style scoped>
.PopLayerBg{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;}
.PopLayer{background:#fff;width:86%;border-radius:1rem;padding:3rem 0 0 0;box-sizing:border-box;overflow:hidden;}
.popTitle{text-align:center;border-bottom:0.1rem solid #f0f0f0;font-size:1.6rem;padding:0 0 1rem 0;}
.popIcon{text-align:center;padding:2rem 0 0 0;}
.popIcon >>> .icon{width:5rem !important;height:5rem !important;}
.popContent{padding:2rem 1rem;text-align:center;font-size:1.6rem;line-height:3.2rem;}
.popBtGroup{display:flex;justify-content:space-between;margin-top:2rem;}
.popBtGroup .popBtOne,.popBtGroup .popBtTwo{flex:1;border:none;font-size:1.5rem;padding:2rem 0;background:#fc8100;color:#fff;}
.popBtGroup .popBtOne{background:#ccc;}
</style>

组件（父级）调用：

<template>
<div class="millia">

<!--其他代码-->

<pop-layer :popData="popData" v-show="popShow" @popBtOne="fatherBtOne" @popBtTwo="fatherBtTwo"></pop-layer>

<!--其他代码-->

</div>
</template>
<script>
import PopLayer from '@/components/PopLayer.vue';
export default {
  name: 'index',
  components: {
    PopLayer
  },
  data(){
    return{
      popShow:false,//弹出层是否显示
      popData:{
        title:"友情提示", //标题文字(不需要可以整行注掉)
        content:"您提交的信息已经被接受，<br>请持续关注哦！^_^", //提示内容(不需要可以整行注掉)
        icon:'<svg class="icon" viewBox="0 0 1024 1024"><path d="M245.398721 481.855788c45.182448 0 81.82968-36.602073 81.82968-81.78452l0-163.614201c0-45.182448-36.647233-81.8071-81.82968-81.8071-45.159868 0-81.78452 36.624653-81.78452 81.8071l0 163.614201C163.614201 445.276295 200.216273 481.855788 245.398721 481.855788L245.398721 481.855788zM511.254862 809.08419c-217.806042 0-408.154884-97.206615-511.254862-242.056891l0 163.636781c103.122558 144.782536 293.44882 242.011731 511.254862 242.011731 217.783462 0 408.132304-97.229195 511.232282-242.011731l0-163.636781C919.409746 711.854994 729.060904 809.08419 511.254862 809.08419L511.254862 809.08419zM777.133583 481.855788c45.159868 0 81.78452-36.602073 81.78452-81.78452l0-163.614201c0-45.182448-36.624653-81.8071-81.78452-81.8071-45.205028 0-81.82968 36.624653-81.82968 81.8071l0 163.614201C695.303903 445.276295 731.928556 481.855788 777.133583 481.855788L777.133583 481.855788zM777.133583 481.855788" fill="#d4237a"></path></svg>',//icon(不需要可以整行注掉)
        leftBt:"取消", //左边按钮(不需要可以整行注掉)
        rightBt:"确定", //右边按钮(不需要可以整行注掉)
      }
    }
  },
  methods:{
  //给弹窗组件的取消点击方法
    fatherBtOne(){
      console.log("取消");
      this.popShow = false
    },
    //给弹窗组件的确定点击方法
    fatherBtTwo(){
      console.log("确定");
      this.popShow = false
    },
  },
}
</script>
<style scoped>
</style>