vue 基于element-plus el-button封装按钮组件

封装组件的原则是:组件只是数据流通的一个管道,不要糅合太多的逻辑在里面,是一个纯组件,还要根据自己项目的业务场景做具体的处理。

javascript 复制代码
// MyButton.vue
// 基于element-plus中el-button来封装按钮
<template>
    <el-button @click="handleClick">
        <div class="btn-text-style"> // 文本样式
            <slot></slot> // 预留按钮文本插槽
        </div>
    </el-button>
</template>

<script setup>
const emits = defineEmits(['click'])
// 出发click事件
const handleClick = () => {
    emits('click')
}

</script>

<style>
.btn-text-style {
    font-size: 14px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}
</style>
javascript 复制代码
// 在具体组件中的使用
// 根据透传Attributes 即属性的继承
// 透传 attribute 指的是传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute
// 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。
// 我们在父组件中添加的各种属性都会被子组件继承下来,所以有了 type, size, icon等这些属性
<template #footer>
    <span class="dialog-footer">
        <MyButton @click="cancel" type="info" size="mini" disabeld icon="Edit">取消</MyButton>
        <MyButton type="primary" @click="submitForm">确定</MyButton>
    </span>
</template>
相关推荐
雪碧聊技术19 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了20 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down