vue3+ts封装一个button组件

创建一个新的Button组件文件 Button.vue：

<template><button :class="buttonClass" :disabled="disabled" @click="handleClick"><slot></slot><i v-if="icon" :class="icon"></i></button>
</template><script lang="ts">
import { defineComponent } from 'vue';interface ButtonProps {size?: 'small' | 'medium' | 'large';type?: 'primary' | 'secondary' | 'danger';link?: string;disabled?: boolean;icon?: string;
}export default defineComponent({name: 'MyButton',props: {size: {type: String,default: 'medium',},type: {type: String,default: 'primary',},link: {type: String,default: '',},disabled: {type: Boolean,default: false,},icon: {type: String,default: '',},},computed: {buttonClass(): string {return ['my-button',`my-button--${this.size}`,`my-button--${this.type}`,{ 'my-button--disabled': this.disabled },].join(' ');},},methods: {handleClick(event: MouseEvent): void {if (this.link) {window.location.href = this.link;}// 如果不需要跳转，可以取消默认行为// event.preventDefault();},},
});
</script><style scoped>
.my-button {/* 基本样式 */
}.my-button--small {/* 小按钮样式 */
}.my-button--medium {/* 中等按钮样式 */
}.my-button--large {/* 大按钮样式 */
}.my-button--primary {/* 主要按钮样式 */
}.my-button--secondary {/* 次要按钮样式 */
}.my-button--danger {/* 危险按钮样式 */
}.my-button--disabled {/* 禁用按钮样式 */
}
</style>

在这个组件中，定义了一个ButtonProps接口来描述组件的属性，并使用defineComponent来创建组件。组件的props属性定义了组件的输入属性，包括size、type、link、disabled和icon。还定义了一个计算属性buttonClass来动态生成按钮的类名，以及一个handleClick方法来处理按钮的点击事件。

在模板中，使用v-bind指令来绑定按钮的类名和禁用状态，使用v-if指令来根据icon属性是否存在来显示图标，使用@click指令来监听按钮的点击事件，并使用<slot></slot>来插入按钮的内容。

最后，在<style>标签中定义了按钮的样式，使用了scoped属性来确保样式只应用于当前组件。

可以将这个组件导入到其他Vue组件中使用：

<template><div><MyButton size="large" type="danger" icon="fas fa-exclamation-triangle">警告按钮</MyButton></div>
</template><script lang="ts">
import { defineComponent } from 'vue';
import MyButton from './Button.vue';export default defineComponent({components: {MyButton,},
});
</script>