Element el-button按钮组件用法

目录

1.背景

2.按钮介绍

3.按钮用法

3.1基础用法

3.2高级用法

 4.总结


1.背景

        我们在项目开发中,经常需要用到按钮组件去实现点击效果。在elementui组件库里有封装好的el-button组件,我们可以直接拿来用,下面简单介绍下其用法。

2.按钮介绍

官方文档:Element - The world's most popular Vue UI framework

首先我们要对按钮组件的api有所了解,常用的有以下这些:

Element el-button按钮组件用法_第1张图片

3.按钮用法

3.1基础用法

常用的按钮用法如下:

Element el-button按钮组件用法_第2张图片

3.2高级用法

        通常在实际项目开发中会使用大量的按钮,为了减少重复代码,这时候就需要定义一个通用按钮组件。思路:定义一个按钮数组,根据所需定义好参数,利用v-for遍历数组生成按钮,代码如下:

Element el-button按钮组件用法_第3张图片

定义的数组如下:

Element el-button按钮组件用法_第4张图片

 调用自定义方法:

Element el-button按钮组件用法_第5张图片

 4.总结

        element组件库已经封装好了el-button,大家可以直接拿来使用,由于场景业务不同,大家可以根据自己所需进行使用,用最少的代码实现功能。

 

你可能感兴趣的:(前端,前端框架,elementui,vue.js,javascript)