element中根据条件判断按钮是否禁用_从零动手封装一个通用的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属性控制按钮是否禁用，那么其他组件的封装其实也大同小异，请大家持续关注后续文章。

element中根据条件判断按钮是否禁用_从零动手封装一个通用的vue按钮组件相关推荐

shell python比较_shell中的条件判断以及与python中的对比
shell中比如比较字符串.判断文件是否存在及是否可读等,通常用"[]"来表示条件测试. 注意:这里的空格很重要.要确保方括号的空格. if ....; then ...
mysql 查询后根据值的不同进行判断与修改，SQL中的条件判断语句（case when zhen）用法
需求: mysql 查询后根据值的不同进行判断与修改语法结构: SQL中的条件判断语句(case when zhen)用法 SELECT A.品号,属性, CASE ...
linux在命令行if,Linux命令之if - Bash中的条件判断语句
用途说明 Shell中的条件判断语句,与其他编程语言类似. 如果需要知道有哪些条件判断方式,通过man test就可以得到帮助. 常用格式格式一 if 条件; then 语句 fi 格式二 if 条 ...
Python中if条件判断语句怎么用?
俗话说"不积跬步无以至千里".学习了Python的基本语法后,接下来我们学习Python常的if条件判断语句. if语句是最简单的条件判断语句,它可以控制程序的执行流程,其使用格式 ...
linux中shell条件判断if中的-a到-z的意思
2019独角兽企业重金招聘Python工程师标准>>> 下面我们一起来看一篇关于shell条件判断if中的-a到-z的意思,有需要了解的朋友不防进入参考参考． [ -a FILE ] ...
.net一个函数要用另一个函数的值_【195期】MySQL中的条件判断函数 CASE WHEN、IF、IFNULL你会用吗？...
点击上方"Java面试题精选",关注公众号面试刷图,查缺补漏 >>号外:往期面试题,10篇为一个单位归置到本公众号菜单栏->面试题,有需要的欢迎翻阅阶段汇总集 ...
中if判断中文_当Excel表格中的条件判断超过8个，用IF函数不容易实现怎么办？...
点击上方蓝字免费关注置顶公众号或设为星标,否则可能收不到文章个人微信号 | (ID:LiRuiExcel520) 微信服务号 | 跟李锐学Excel(ID:LiRuiExcel) 微信公众号 ...
Python中if条件判断语句的用法！
俗话说"不积跬步无以至千里".学习了Python的基本语法后,接下来我们学习Python常的if条件判断语句. if语句是最简单的条件判断语句,它可以控制程序的执行流程,其使用格式 ...
shell中的条件判断和比较
1 shell 的$! ,$?, $$,$@ $n $1 the first parameter,$2 the second... $# The number of co ...

element中根据条件判断按钮是否禁用_从零动手封装一个通用的vue按钮组件

element中根据条件判断按钮是否禁用_从零动手封装一个通用的vue按钮组件相关推荐

最新文章

热门文章