vue根据按钮id禁用_源码时代前端干货分享|从零动手封装一个通用的vue按钮组件...

我们在使用目前最主流的前端框架vue在开发过程中&＃xff0c;组件是一个非常重要的组成部分&＃xff0c;可以这么说&＃xff0c;所有的vue 应用&＃xff0c;都是由一个一个的小组件拼装而成的。

正是由于vue组件如此重要&＃xff0c;所以vue的生态中&＃xff0c;也非常多的UI组件库&＃xff0c;其中最著名的非Element-UI莫属&＃xff0c;里面有非常多的封装完善的组件提供给我们使用&＃xff0c;大大的增强了我们的开发效率。

那么&＃xff0c;这些UI框架的组件&＃xff0c;究竟是如何封装的呢&＃xff1f;如何动手从零开始封装自己的组件呢&＃xff1f;接下来&＃xff0c;我们就从最简单的一个Button的组件封装说起。如下&＃xff0c;是Element-UI中的按钮组件&＃xff0c;接下来&＃xff0c;我们就一步一步来实现它们。

首先&＃xff0c;定义一个组件index.vue&＃xff0c;配置路由渲染出来

其次&＃xff0c;自己定义一个组件my-butotn, 写好基本的样式&＃xff0c;按钮中间&＃xff0c;使用插槽占位。

写好按钮的基本样式&＃xff0c;代码如下

效果如下&＃xff1a;

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

实现出来的效果如下图&＃xff1a;

接下来&＃xff0c;我们来实现size属性&＃xff0c;通过传入不同的size&＃xff0c;实现不同的尺寸的按钮的控制。

核心代码如下&＃xff1a;

}

实现效果如下&＃xff1a;

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

实现的效果如下&＃xff1a;

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

最终实现效果如下&＃xff1a;

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