unixProject/components/uni-button-x/uni-button-x.uvue

<template>
  <view class="btn" :class="btnClass" @click="onClick">
    <text class="btn-text" :class="textClass">{{ loading ? loadingText : text }}</text>
  </view>
</template>

<script setup lang="uts">
type ButtonType = 'primary' | 'default' | 'danger'

const props = defineProps({
  text: {
    type: String,
    default: '按钮'
  },
  loadingText: {
    type: String,
    default: '加载中...'
  },
  loading: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'primary'
  }
})

const emit = defineEmits(['click'])

const btnClass = computed(() : string => {
  if (props.disabled || props.loading) {
    return 'btn-disabled'
  }
  if (props.type == 'danger') {
    return 'btn-danger'
  }
  if (props.type == 'default') {
    return 'btn-default'
  }
  return 'btn-primary'
})

const textClass = computed(() : string => {
  if (props.type == 'default') {
    return 'btn-text-default'
  }
  return 'btn-text-light'
})

function onClick() : void {
  if (props.disabled || props.loading) {
    return
  }
  emit('click')
}
</script>

<style>
.btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 8px;
}
.btn-primary {
  background-color: #007aff;
}
.btn-danger {
  background-color: #ff3b30;
}
.btn-default {
  background-color: #f2f2f2;
}
.btn-disabled {
  background-color: #c7c7cc;
}
.btn-text {
  font-size: 16px;
}
.btn-text-light {
  color: #ffffff;
}
.btn-text-default {
  color: #333333;
}
</style>