源码时代前端干货分享|从零动手封装一个通用的vue按钮组件-创新互联

我们在使用目前最主流的前端框架vue在开发过程中，组件是一个非常重要的组成部分，可以这么说，所有的vue 应用，都是由一个一个的小组件拼装而成的。
正是由于vue组件如此重要，所以vue的生态中，也非常多的UI组件库，其中最著名的非Element-UI莫属，里面有非常多的封装完善的组件提供给我们使用，大大的增强了我们的开发效率。
那么，这些UI框架的组件，究竟是如何封装的呢？如何动手从零开始封装自己的组件呢？接下来，我们就从最简单的一个Button的组件封装说起。如下，是Element-UI中的按钮组件，接下来，我们就一步一步来实现它们。

专注于为中小企业提供成都网站设计、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业赣榆免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

首先，定义一个组件index.vue，配置路由渲染出来

其次，自己定义一个组件my-butotn, 写好基本的样式，按钮中间，使用插槽占位。
写好按钮的基本样式，代码如下

效果如下：

然后，我们先来实现type属性，根据type的不同，渲染不同的默认颜色效果，主要是通过传入的type不同，里面渲染不同的类，实现不同的样式效果，核心代码如下

实现出来的效果如下图：

接下来，我们来实现size属性，通过传入不同的size，实现不同的尺寸的按钮的控制。
核心代码如下：

}

实现效果如下：

那么，我们还可以控制按钮是否是圆角按钮，通过设计一个属性round，如果在使用按钮的时候，传入了属性round，那么这个按钮就是圆角按钮。代码如下

实现的效果如下：

最后，我们来实现以下按钮的应用效果，只要在使用自定义组件的时候，传入diabled属性，那么禁用效果就生效，否则，效果就不生效。代码如下:

最终实现效果如下：

综上所述，我们就一步一步的动手，从零实现了一个通用的按钮组件，实现了type控制按钮的表现效果，size控制按钮的尺寸，round属性控制按钮是否是圆角，和disable属性控制按钮是否禁用，那么其他组件的封装其实也大同小异，请大家持续关注后续文章。

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：源码时代前端干货分享|从零动手封装一个通用的vue按钮组件-创新互联
分享路径：http://cxhlcq.com/article/shsii.html