vue-cli手写弹窗组件

• 手写弹窗组件

手写弹窗组件

<template>
    <div class="test01">
        <el-button @click="openAlertBox" type="danger">click Me</el-button>
        <div class="alert-box" ref="alertBox">
            <div class="box-head">
                <strong class="title">上传证书</strong>
                <span @click="closeAlertBox" class="close">X</span>
            </div>
            <div class="box-content">
                <div class="one-line">
                    <span><i>*</i>证书名称: </span>
                    <input type="text" placeholder="请输入证书名称">
                </div>
                <div class="two-line">
                    <span><i>*</i>证书底图: </span>
                    <div><img src="../assets/img/index/1.jpg" alt=""></div>
                    <div class="choice-box">
                        <div class="choice-btn">
                            <button class="bg-fff">选择文件</button>
                            <button class="bg-06f">开始上传</button>
                        </div>
                        <div class="tips">建议图片尺寸 3:5 大小，大小不超过20M</div>
                    </div>
                </div>
                <div class="box-btn">
                    <button @click="commitAlertBox" class="ok">提交</button>
                    <button @click="closeAlertBox" class="no">取消</button>
                </div>
            </div>
        </div>
        <div ref="boxBg" class="box-bg"></div>
    </div>
</template>
           

<script>
    export default {
        methods: {
            /* 打开 -- 弹窗盒子 */
            openAlertBox () {
                this.$refs.alertBox.style.display = "block";
                this.$refs.boxBg.style.display = "block";
            },
            /* 关闭 -- 弹窗盒子 */
            closeAlertBox () {
                this.$refs.alertBox.style.display = "none";
                this.$refs.boxBg.style.display = "none";
            },
            /* 提交 -- 弹窗盒子 */
            commitAlertBox () {
                this.$refs.alertBox.style.display = "none";
                this.$refs.boxBg.style.display = "none";
            },
        }
    }
</script>
           

<style >
.test01{
    width: 100%;
    position: relative;
    .alert-box{
        display: none;
        width: 608px;
        height: 344px;
        background: #fff;
        border-radius: 0px 0px 10px 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 999;
        transform: translate(-50%, -50%);
        .box-head{
            width: 608px;
            height: 42px;
            background: #F4F4F4;
            border-radius: 10px 10px 0px 0px;
            padding: 0 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            line-height: 42px;
            color: #666666;
            .title{
            }
            .close{
                cursor: pointer;
            }
        }
        .box-content{
            padding: 30px 40px;
            box-sizing: border-box;
            div{
                span{
                    font-size: 16px;
                    i{
                        color: red;
                    }
                }
                input{
                    width: 440px;
                    height: 28px;
                    background: #FFFFFF;
                    border: 1px solid #E5E5E5;
                    box-sizing: border-box;
                    padding-left: 13px;
                    border-radius: 2px;
                }
            }
            .one-line{
                display: flex;
                justify-content: space-between;
            }
            .two-line{
                margin-top: 20px;
                display: flex;
                justify-content: space-between;
                div{
                    img{
                        width: 160px;
                        height: 120px;
                        border-radius: 4px;
                    }
                }
                .choice-box{
                    width: 260px;
                    margin-top: 30px;
                    .choice-btn{
                        display: flex;
                        justify-content: space-between;
                        button{
                            width: 120px;
                            height: 32px;
                            border: 1px solid #0066FF;
                            box-sizing: border-box;
                            border-radius: 4px;
                            outline: 0;
                            cursor: pointer;
                        }
                        .bg-fff{
                            background: #fff;
                            color: #0066FF;
                        }
                        .bg-06f{
                            background: #0066FF;
                            color: #FFFFFF;
                        }
                    }
                    .tips{
                        width: 260px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        background: #F2F2F2;
                        border-radius: 4px;
                        font-size: 12px;
                        color: #999999;
                        margin-top: 2px;
                    }
                }
            }
            .box-btn{
                width: 220px;
                margin: 0 auto;
                margin-top: 40px;
                display: flex;
                justify-content: space-between;
                button{
                    width: 100px;
                    height: 34px;
                    line-height: 34px;
                    border-radius: 6px;
                    font-size: 14px;
                    border: 1px solid #0066FF;
                    box-sizing: border-box;
                    outline: 0;
                    cursor: pointer;
                }
                .ok{
                    background: #0066FF;
                    color: #FFFFFF;
                }
                .no{
                    background: #E7F5FF;
                    color: #0066FF;
                }
            }
        }
    }
    .box-bg{
        display: none;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
    }
}
</style>
           

结果