vue实用组件Loading,自定义样式
组件Loading
1.我为什么用到了组件Loading是干什么的?
解:当进程还在执行,还没有执行完成的时候,用户可能并不知道,那么我们是不是应该提示用户,那怎么样才能更让客户客观的看到正在执行,而且又有一点高级感呢?那就是LoadIng组件了,我elementui的基础上修改了他的样式。
效果视频:
vue laoding组件
一、组件Loading vscode代码,直接复制就可以用
<template>
<div class="Lending">
<el-dialog
:visible.sync="issub"
:modal-append-to-body="false"
width="30%"
>
<div class="loadings">
<div class="loading_one"> Transaction Pending</div>
<div class="load"
v-loading="loading"
>
<div class="load_son"></div>
</div>
<div class="loading_two">Transanction broadcast</div>
<div class="loading_three">View on Etherscan</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "HeaDer",
data() {
return {
issub:true,
loading: true,
};
},
};
</script>
<style lang="scss" scoped>
.Lending {
.loadings{
z-index: 200;
height: 422px;
background: #FFFFFF;
border-radius: 31px;
padding-top: 34px;
.loading_one{
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
text-align: center;
}
.load{
width: 122px;
height: 122px;
margin:50px auto;
/deep/ .el-loading-spinner{
font-size: 70px;
}
}
.loading_two{
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
text-align: center;
margin-top:34px;
}
.loading_three{
width: 287px;
height: 54px;
background: #3371FF;
border-radius: 31px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 54px;
margin:50px auto 0;
text-align: center;
}
/deep/.circular{
height: 122px !important;
width: 122px !important;
.path{
stroke: #3ACB57;
stroke-width:1;
}
}
/deep/ .el-loading-spinner{
top: 0%;
margin-top: 0px;
}
/deep/ .el-loading-mask{
background-color:inherit;
}
}
.load_son{
width: 80px;
height: 80px;
background: #3ACB57;
border-radius: 50%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>
完成,年轻的程序员,大佬勿喷,希望对大家有用,有问题可以留言。