前言

用elementUI组件库虽然很舒服，不知道各位有没有好奇它其中的el-button是如何封装的呢？今天就一起来看看如何封装自己的按钮组件吧~

一、封装的意义

• 项目中按钮风格的统一
• 代码的复用性，可维护性高

二、如何封装？

用到的地方很多，封装为全局组件。还是和之前一样，放在src/components目录下

1. 封装

src/components下新建my-button.vue文件

代码如下（示例）：

<template>
  <button class="my-button ellipsis" :class="[size, type]">
    <slot />
  </button>
</template>
<script>
export default {
  name: 'MyButton',
  props: {
    size: {
      type: String,
      default: 'middle'
    },
    type: {
      type: String,
      default: 'default'
    }
  }
}
</script>
<style scoped lang="less">
.my-button {
  margin-right: 5px;
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.large {
  width: 240px;
  height: 50px;
  font-size: 16px;
}
.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}
.small {
  width: 100px;
  height: 32px;
  font-size: 14px;
}
.mini {
  width: 60px;
  height: 32px;
  font-size: 14px;
}
.default {
  border-color: #e4e4e4;
  color: #666;
}
.primary {
  border-color: #27ba9b;
  background: #27ba9b;
  color: #fff;
}
.plain {
  border-color: #27ba9b;
  color: #27ba9b;
  background: lighten(#27ba9b, 50%);
}
.gray {
  border-color: #ccc;
  background: #ccc;
  color: #fff;
}
</style>

2. 使用

任意.vue结尾文件中使用

代码如下（示例）：

标签中传入的文字会传至封装的公共组件的默认插槽中

<template>
  <div class="home-banner">
    <my-button type="default" size="mini">默认</my-button>
    <my-button type="plain" size="mini">空心</my-button>
    <my-button type="primary" size="mini">实心</my-button>
    <my-button type="gray" size="mini">灰色</my-button>
    <br /><br />
    <my-button type="default" size="mini">迷你</my-button>
    <my-button type="plain" size="small">小号</my-button>
    <my-button type="primary" size="middle">中号</my-button>
    <my-button type="gray" size="large">大号</my-button>
  </div>
</template>

<script>
import MyButton from '@/components/my-button.vue'
export default {
  name: 'App',
  components: {
  	MyButton
  },
  setup() {
    return {}
  }
}
</script>

<style lang="less">
.home-banner {
  margin: 100px auto;
  width: 700px;
  height: 300px;
}
</style>

三、 效果演示

总结

Do nothing by halves

最后

以上就是俭朴灯泡为你收集整理的vue3——自己封装按钮组件前言一、封装的意义二、如何封装？三、 效果演示总结的全部内容，希望文章能够帮你解决vue3——自己封装按钮组件前言一、封装的意义二、如何封装？三、 效果演示总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。