vue PC端弹窗组件封装

在项目中，需要做一个可以任意更改颜色的弹窗，找了一些组件，发现都不是自己想要的，打算自己动手写一下。
先看看效果图

实现的效果主要是可以自由更改按钮文字的大小，背景色等
接下来看看我操作的代码
首先，新建一个vue文件为Popup.vue
贴上一整个文件代码，以便下次可以直接使用

<template>
    <div id="regDialog">
        <div class="a001">
            <div class="b001">
                <div class="c001">提示</div>
                <img @click="closePopup" class="c002" src="@/assets/PCIMG/REG/icon_close.png" alt="">
            </div>
            <div class="b002">{{tips}}</div>
            <div class="btn">
                <div class="left" @click="clickLeft">
                    {{left}}
                </div>
                <div class="right111" @click="clickRight">
                    {{right}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Popup",
        data(){
            return {
            }
        },
        props:{
            isShowPopup:{
                type:Boolean,
                default: false
            },
            tips:{
                type:String,
            },
            left:{
                type:String,
            },
            right:{
                type:String,
            }
        },
        methods:{
            closePopup(){
                this.$emit('closePopupDialog',false)
            },
            closeDialog(){
                this.$emit('closeRegDialog',false);
            },
            clickLeft(){
                this.$emit('clickPopupLeft',true);
            },
            clickRight(){
                this.$emit('clickPopupRight',true);
            }
        }
    }
   <style scoped>
    #regDialog{
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0,0,0,0.6);
        left: 0;
        top: 0;
        z-index: 99;
    }
    #regDialog .a001{
        width: 505px;
        /* height: 236px; */
        border-radius: 10px;
        background: #fff;
        position: absolute;
        margin: auto;
        top: 276px;
        /* bottom: 0; */
        left: 0;
        right: 0;
        text-align: center;
        overflow: hidden;
    }
    #regDialog .a001 .b001{
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #E5E5E5;
        font-size:20px;
        font-family:Microsoft YaHei;
        font-weight:bold;
        color:rgba(51,51,51,1);
        position: relative;
    }
    #regDialog .a001 .b001 .c002{
        width: 20px;
        height: 20px;
        position: absolute;
        right:20px;
        top:14px;
        cursor: pointer;
    }
    #regDialog .a001 .b002{
        padding: 23px 42px 0;
        font-size: 20px;line-height: 40px;
        text-align: left;
    }
    #regDialog .btn{
        border-top: 1px solid #E5E5E5;
        display: flex;
        width: 100%;
        height: 70px;
        margin-top: 15px;
        font-size: 20px;
        color: #4A7AE0;
        text-align: center;
        line-height: 70px;
        cursor: pointer;
    }
    #regDialog .btn .left{
        width: 50%;
        border-right: 1px solid #E5E5E5;
    }
    #regDialog .btn .left:hover{
        background: #4A7AE0;
        color: #fff;
    }
    #regDialog .btn .right111{
        width: 50%;
    }
    #regDialog .btn .right111:hover{
        background: #4A7AE0;
        color: #fff;
    }

这是一整个弹窗文件，下面看看在项目里引用

//引用组件
      <Popup 
        v-if="isShowPopup" 
        :tips="tips" 
        :left="left" 
        :right="right" 
        @closePopupDialog='clickClose'
        @clickPopupLeft="clickLeft" 
        @clickPopupRight="clickRight">
     </Popup>
//在项目里引入文件
import Popup from './components/Popup';
export default {
        components:{
            Popup
        },
        data(){
            return {
                isShowPopup:false,
                tips:'尊敬的客户，我们为您贴心保留了7日内的历史测额记录，您可直接查看结果或重新发起测额。',
                left:'点击查看',
                right:'重新测额',
            }
           }
         },
      methods:{
          clickClose(data){   //点击右上角的关闭按钮关闭弹窗
                this.isShowPopup = data        
            },
         clickLeft(data){
                this.isShowPopup = data     //点击查看  路由跳转
                this.$router.push({ name: "chakan" });
            },
         clickRight(data){
                this.isShowPopup = data  //点击重新测额路由跳转
                sessionStorage.setItem("dataType", "06");
                this.$router.push({ name: "SignIn" });
            },
}

好啦，这样就完成啦，欢迎各位小伙伴多多交流哦