封装组件之使用vue3封装简易Button按钮

1.新建Button.vue

<template>
  <button :class="buttonClass">
    <!-- 用于输入内容 -->
    <slot></slot>
  </button>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
//定义类型
const props = defineProps({
  type: {
    type: String,
    default: 'primary',
  },
  size: {
    type: String,
    default: 'medium',
  },
});

//生成按钮的类名数组
const buttonClass = computed(() => {
  return ['btn', `btn-${props.type}`, `btn-${props.size}`];
});
</script>
<style scoped>
.btn {
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
}
.btn-primary {
  background-color: #007bff;
  color: #fff;
}
.btn-danger {
  background-color: red;
  color: black;
}
.btn-mediun {
  padding: 10px 20px;
  font-size: 16px;
}
</style>

 2.引入

局部引入

import Button from './components/Button.vue'

全局引入

import Button from './components/Button.vue';
createApp(App).component('Button', Button).mount('#app');

3.使用

 <Button type="primary" @click="handle">success</Button>
  <Button type="danger">danger</Button>

4.效果