使用vue封装按钮组件

以下是一个简单的示例：

<!-- Button.vue -->
<template>
  <button :class="classes" @click="$emit('click')">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  computed: {
    classes() {
      return [
        'btn',
        `btn-${this.type}`,
        `btn-${this.size}`
      ]
    }
  }
}
</script>

<style scoped>
.btn {
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

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

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

.btn-small {
  padding: 5px 10px;
  font-size: 14px;
}

.btn-medium {
  padding: 10px 20px;
  font-size: 16px;
}

.btn-large {
  padding: 15px 30px;
  font-size: 20px;
}
</style>

在上面的代码中，我们创建了一个名为Button的组件，并定义了两个props：type和size。type用于定义按钮的样式类型，默认值为default，可选值为default和primary。size用于定义按钮的大小，默认值为medium，可选值为small、medium和large。

我们使用计算属性classes来动态生成按钮的CSS类名数组，然后将数组绑定到按钮的class属性上。在模板中，我们使用<slot>插槽来渲染按钮的内容，并在按钮点击时触发click事件。

现在，我们可以在其他组件中使用<Button>标签来使用我们的按钮组件：

<!-- App.vue -->
<template>
  <div>
    <Button>Default</Button>
    <Button type="primary">Primary</Button>
    <Button size="small">Small</Button>
    <Button size="large">Large</Button>
  </div>
</template>

<script>
import Button from './Button.vue'

export default {
  name: 'App',
  components: {
    Button
  }
}
</script>

以上示例展示了如何在父组件中使用我们的按钮组件，并传递不同的props来定义不同的样式和大小。