vue3 封装 button 组件

以下是一个基本的Vue3封装button组件的示例：

<template>
  <button v-bind="$attrs" class="btn" :class="btnClass" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    disabled: Boolean,
    size: {
      type: String,
      default: 'medium'
    }
  },
  computed: {
    btnClass() {
      return [
        `btn-${this.type}`,
        `btn-${this.size}`,
        {
          'is-disabled': this.disabled
        }
      ]
    }
  },
  methods: {
    handleClick(event) {
      if (this.disabled) {
        event.preventDefault()
        return false
      }
      this.$emit('click', event)
    }
  }
}
</script>

<style>
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  border: 1px solid #ccc;
}

.btn-default {
  color: #333;
  background-color: #fff;
}

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

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

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

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

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

.btn-link {
  color: #007bff;
  background-color: transparent;
  border-color: transparent;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.is-disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
</style>

该组件定义了三个属性：`type`、`disabled`和`size`，用于设置按钮的类型、禁用状态和大小。组件使用了Vue3的`$attrs`特性，以便将所有传递给组件的属性绑定到实际的button元素上。

组件还使用了插槽，以便在按钮中插入自定义内容。在模板中，使用了计算属性`btnClass`，动态设置按钮的class属性，该属性根据属性`type`、`size`和`disabled`的值进行计算。

组件的方法中，使用了`$emit`方法，以便在点击按钮时触发`click`事件，并将事件对象传递给父组件。如果按钮处于禁用状态，该方法将阻止默认行为并返回false。