、写的一个Button组件

让大家看看 我只是给了一个命令 用js vue写一个考虑了10种场景的Button组件，就得到了下面的结果。完胜人类写手。感觉以后人类只需要优化代码。

但是程序员不会完全实业 应该是会招聘减少。要求提高。

<template>
  <button
    :class="[
      'btn',
      typeClass, // 根据type选择不同的颜色
      sizeClass, // 根据size选择不同的大小
      { 'btn-block': block }, // 是否为块级元素
      { 'btn-outline': outline }, // 是否为线框按钮
      { 'btn-loading': loading }, // 是否显示loading
      { disabled } // 是否禁用按钮
    ]"
    :disabled="disabled || loading"
    @click="onClick"
  >{{ loading ? loadingText : text }}</button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    text: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'default' // 按钮的颜色类型，可选值有primary、danger、warning、success、default
    },
    size: {
      type: String,
      default: '' // 按钮的大小，可选值有large、small、default
    },
    loadingText: {
      type: String,
      default: 'Loading...' // loading状态下显示的文本
    },
    block: {
      type: Boolean,
      default: false // 是否为块级元素
    },
    outline: {
      type: Boolean,
      default: false // 是否为线框按钮
    },
    disabled: {
      type: Boolean,
      default: false // 是否禁用按钮
    },
    loading: {
      type: Boolean,
      default: false // 是否显示loading
    }
  },
  computed: {
    typeClass() {
      switch (this.type) {
        case 'primary':
          return 'btn-primary';
        case 'danger':
          return 'btn-danger';
        case 'warning':
          return 'btn-warning';
        case 'success':
          return 'btn-success';
        default:
          return 'btn-default';
      }
    },
    sizeClass() {
      switch (this.size) {
        case 'large':
          return 'btn-lg';
        case 'small':
          return 'btn-sm';
        default:
          return '';
      }
    }
  },
  methods: {
    onClick() {
      if (!this.loading && !this.disabled) {
        this.$emit('click');
      }
    }
  }
};
//以上代码实现了10种使用场景的Button组件，包括：预设基本样式、颜色分类、自适应、大小分类、
//禁用状态、loading状态、块级元素、线框按钮、点击事件和传递文本。如需要添加其他功能，可以在此基础上进行修改。
</script>
<style scoped>
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid currentColor;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

.btn-danger {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

.btn-warning {
  background-color: #ffc107;
  color: #fff;
  border-color: #ffc107;
}

.btn-success {
  background-color: #28a745;
  color: #fff;
  border-color: #28a745;
}

.btn-default {
  background-color: #fff;
  color: #6c757d;
  border-color: #ccc;
}

.btn-lg {
  padding: 0.5rem 1.5rem;
  font-size: 1.25rem;
}

.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-loading {
  position: relative;
  pointer-events: none;
  user-select: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2em;
  height: 1.2em;
  margin-top: -0.6em;
  margin-left: -0.6em;
  border-radius: 50%;
  border: 0.2em solid currentColor;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
</style>