111 lines
2.2 KiB
Vue
111 lines
2.2 KiB
Vue
<template>
|
|
<div class="btn">
|
|
<button :class=" { 'loading1': loading1, 'cancel' : title1 == '取消', 'submit' : title1 != '取消' } " @click="noMultipleClicks( title1 == '提交' ? submitClick1 :cancelClick )">{{ title1 }}</button>
|
|
<button class="submit" @click="noMultipleClicks(submitClick)" :class="{'loading': loading}">{{ title2}}</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {myMixins} from "@/utils/myMixins"
|
|
export default {
|
|
name: "twoBtnCommon",
|
|
mixins:[myMixins],
|
|
data(){
|
|
return{
|
|
noClick:true,
|
|
loading: false,
|
|
loading1: false
|
|
}
|
|
},
|
|
props:{
|
|
title1:{
|
|
type:String,
|
|
default:"取消"
|
|
},
|
|
title2:{
|
|
type:String,
|
|
default: '提交'
|
|
}
|
|
},
|
|
methods:{
|
|
cancelClick(){
|
|
this.$emit('cancelClick')
|
|
},
|
|
submitClick(){
|
|
// 设置 loading 状态
|
|
this.loading = true;
|
|
|
|
// 模拟异步请求
|
|
setTimeout(() => {
|
|
// 处理请求结果
|
|
// ...
|
|
this.$emit('submitClick')
|
|
// 重置 loading 状态
|
|
this.loading = false;
|
|
}, 2000);
|
|
|
|
},
|
|
submitClick1(){
|
|
// 设置 loading1状态
|
|
this.loading1 = true;
|
|
|
|
// 模拟异步请求
|
|
setTimeout(() => {
|
|
// 处理请求结果
|
|
// ...
|
|
this.$emit('submitClick1')
|
|
// 重置 loading1 状态
|
|
this.loading1 = false;
|
|
}, 2000);
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/mixin.scss";
|
|
@import "@/styles/common.scss";
|
|
.loading,.loading1 {
|
|
position: relative;
|
|
}
|
|
|
|
.loading::after,.loading1::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #000;
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
|
}
|
|
}
|
|
.btn{
|
|
@include flexColBet;
|
|
button{
|
|
@include whLin(152px,39px);
|
|
border-radius: 5px;
|
|
color: #FFFFFF;
|
|
@include fontWeightSize(bold,14px)
|
|
}
|
|
.cancel{
|
|
background: #9EA7C0;
|
|
}
|
|
.submit{
|
|
background-color: #354D93;
|
|
}
|
|
}
|
|
|
|
</style> |