shanxia2.0/miniprogram/components/db-ui/db-btn.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>