83 lines
1.5 KiB
Vue
83 lines
1.5 KiB
Vue
<template>
|
|
<button
|
|
class="db-btn"
|
|
:class="[
|
|
'db-btn--' + type,
|
|
plain ? 'db-btn--plain' : '',
|
|
size === 'small' ? 'db-btn--small' : '',
|
|
block ? 'db-btn--block' : '',
|
|
disabled || loading ? 'db-btn--disabled' : ''
|
|
]"
|
|
:disabled="disabled || loading"
|
|
@click="onClick"
|
|
>
|
|
{{ loading ? '处理中...' : '' }}
|
|
<slot v-if="!loading" />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
type: { type: String, default: 'default' },
|
|
size: { type: String, default: 'normal' },
|
|
plain: Boolean,
|
|
block: Boolean,
|
|
loading: Boolean,
|
|
disabled: Boolean
|
|
})
|
|
const emit = defineEmits(['click'])
|
|
function onClick(e) {
|
|
if (props.disabled || props.loading) return
|
|
emit('click', e)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.db-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0 14px;
|
|
height: 32px;
|
|
line-height: 30px;
|
|
font-size: 13px;
|
|
border-radius: 6px;
|
|
border: 1px solid #ebedf0;
|
|
background: #fff;
|
|
color: #323233;
|
|
}
|
|
.db-btn--small {
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
font-size: 12px;
|
|
}
|
|
.db-btn--block {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 44px;
|
|
font-size: 15px;
|
|
}
|
|
.db-btn--primary {
|
|
background: #52b788;
|
|
border-color: #52b788;
|
|
color: #fff;
|
|
}
|
|
.db-btn--primary.db-btn--plain {
|
|
background: #fff;
|
|
color: #52b788;
|
|
}
|
|
.db-btn--danger {
|
|
background: #ee0a24;
|
|
border-color: #ee0a24;
|
|
color: #fff;
|
|
}
|
|
.db-btn--danger.db-btn--plain {
|
|
background: #fff;
|
|
color: #ee0a24;
|
|
}
|
|
.db-btn--disabled {
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|