83 lines
1.4 KiB
Vue
83 lines
1.4 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
const props = defineProps({
|
|
width: {
|
|
type: String,
|
|
default: "calc(100vw - 20px)",
|
|
},
|
|
rounded: {
|
|
type: Number,
|
|
default: 10,
|
|
},
|
|
onClick: {
|
|
type: Function,
|
|
default: async () => {},
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: "#fed847",
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: "#000",
|
|
},
|
|
});
|
|
|
|
const loading = ref(false);
|
|
const onBtnClick = async () => {
|
|
if (props.disabled || loading.value) return;
|
|
loading.value = true;
|
|
try {
|
|
await props.onClick();
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="sbtn"
|
|
hover-class="none"
|
|
:style="{
|
|
width: width,
|
|
borderRadius: rounded + 'px',
|
|
backgroundColor: disabled ? '#757575' : backgroundColor,
|
|
color,
|
|
}"
|
|
open-type="getUserInfo"
|
|
@click="onBtnClick"
|
|
>
|
|
<block v-if="!loading">
|
|
<slot />
|
|
</block>
|
|
<block v-else>
|
|
<image src="../static/btn-loading.png" mode="widthFix" class="loading" />
|
|
</block>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sbtn {
|
|
margin: 0 auto;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.loading {
|
|
width: 25px;
|
|
height: 25px;
|
|
background-blend-mode: darken;
|
|
animation: rotate 1s linear infinite;
|
|
}
|
|
</style>
|