vue-cli手写弹窗组件
Posted 码上暴富
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-cli手写弹窗组件相关的知识，希望对你有一定的参考价值。
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 lang="scss">
.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>
结果
以上是关于vue-cli手写弹窗组件的主要内容，如果未能解决你的问题，请参考以下文章