实现一个vu恶的button组件

由于我是一个AI语言模型，无法直接编写和运行代码，但我可以提供一些关于Vue.js按钮组件的设计思路和代码示例供您参考。

下面是一个简单的Vue.js按钮组件的代码示例：

<template>
  <button
    :class="['button', sizeClass, colorClass]"
    :disabled="disabled"
    @click="handleClick"
  >
    {{ label }}
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    label: { type: String, default: 'Button' },
    size: { type: String, default: 'medium' },
    color: { type: String, default: 'primary' },
    disabled: { type: Boolean, default: false },
  },
  computed: {
    sizeClass() {
      return `button--${this.size}`;
    },
    colorClass() {
      return `button--${this.color}`;
    },
  },
  methods: {
    handleClick() {
      this.$emit('click');
    },
  },
};
</script>

<style lang="scss">
.button {
  display: inline-block;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &--small {
    font-size: 14px;
    padding: 6px 12px;
  }

  &--large {
    font-size: 20px;
    padding: 10px 20px;
  }

  &--primary {
    background-color: #3273dc;
    color: #fff;

    &:hover:not(:disabled),
    &:focus:not(:disabled) {
      background-color: #276cb7;
    }

    &:active:not(:disabled) {
      background-color: #1d4f91;
    }

    &:disabled {
      background-color: #d9e2ec;
      color: #a6b1bb;
      cursor: not-allowed;
    }
  }

  &--secondary {
    background-color: #fff;
    color: #3273dc;
    border: 1px solid #3273dc;

    &:hover:not(:disabled),
    &:focus:not(:disabled) {
      background-color: #f0f4f8;
    }

    &:active:not(:disabled) {
      background-color: #d9e2ec;
    }

    &:disabled {
      background-color: #fff;
      color: #a6b1bb;
      border-color: #d9e2ec;
      cursor: not-allowed;
    }
  }
}
</style>

这个组件接受以下属性：

- `label`：按钮的显示文本，默认为“Button”。
- `size`：按钮的尺寸，可选值为“small”、“medium”和“large”，默认为“medium”。
- `color`：按钮的颜色，可选值为“primary”和“secondary”，默认为“primary”。
- `disabled`：按钮是否禁用，默认为`false`。

当按钮被点击时，会触发一个`click`事件，可以通过`@click`监听这个事件。

这个组件使用了SCSS预处理器来定义样式，其中`.button`是按钮的基础样式，`.button--small`、`.button--large`、`.button--primary`和`.button--secondary`是根据不同属性值生成的样式。

这个组件只是一个简单的示例，您可以根据自己的需求对其进行修改和扩展。