130 lines
2.0 KiB
Vue
130 lines
2.0 KiB
Vue
<template>
|
|
<button
|
|
ref="buttonRef"
|
|
:type="type"
|
|
:class="['btn', `btn-${variant}`, { 'btn-sm': size === 'sm', 'btn-lg': size === 'lg' }]"
|
|
:disabled="disabled || loading"
|
|
@click="$emit('click', $event)"
|
|
>
|
|
<span v-if="loading" class="spinner"></span>
|
|
<slot></slot>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: 'button'
|
|
},
|
|
variant: {
|
|
type: String,
|
|
default: 'primary'
|
|
// primary, secondary, danger, success, warning
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'md'
|
|
// sm, md, lg
|
|
},
|
|
disabled: Boolean,
|
|
loading: Boolean
|
|
})
|
|
|
|
defineEmits(['click'])
|
|
|
|
const buttonRef = ref(null)
|
|
|
|
const focus = () => {
|
|
buttonRef.value?.focus()
|
|
}
|
|
|
|
defineExpose({ focus })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 10px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: 12px 24px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #3498db;
|
|
color: white;
|
|
}
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #2980b9;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #6c757d;
|
|
color: white;
|
|
}
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background: #5a6268;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #e74c3c;
|
|
color: white;
|
|
}
|
|
.btn-danger:hover:not(:disabled) {
|
|
background: #c0392b;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #27ae60;
|
|
color: white;
|
|
}
|
|
.btn-success:hover:not(:disabled) {
|
|
background: #1e8449;
|
|
}
|
|
|
|
.btn-warning {
|
|
background: #f39c12;
|
|
color: white;
|
|
}
|
|
.btn-warning:hover:not(:disabled) {
|
|
background: #d68910;
|
|
}
|
|
|
|
.spinner {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid transparent;
|
|
border-top-color: currentColor;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|