06.Element UI组件之按钮

一、Button组件的常规用法

    |--基础用法:<el-button></el-button>

        |--四个属性:

            |--type:定义按钮颜色类型:primary、success、info、warning、danger

            |--plain:朴素按钮,默认状态比正常颜色浅。

            |--round:圆角按钮

            |--circle:圆形按钮

    |--案例:

常用按钮
代码实现

二、按钮的禁用状态(disabled属性控制)

    |--用法:<el-button disabled="true/false"></el-button>

    |--默认值:false

三、几种特殊的按钮

    |--文字按钮(没有边框、背景色)

        |--用法:type=“text”

       

    |--图标按钮 

        |--优点:增强辨识度、节省空间(无文字)

        |--用法:

            |--<el-button icon="el-icon-search"></el-button>

            |--<el-button >搜索<i class="el-icon-search el-icon--right"></i></el-button>

            |--注意:el-icon-right和el-icon--right不同点是前者紧挨着文字,后者多一个小空格。

        |--示例:

代码演示

    |--按钮组(常用于分页、几个同类操作按钮)

代码实现

    |--加载中

        |--点击按钮后进行数据加载操作,按钮上显示加载状态。

        |--用法:<el-button :loading="true">加载中</el-button>

可以控制loading的值

四、按钮的大小控制

    |--用法:<el-button size="medium/small/mini"></el-button>

    |--三种尺寸:medium、small、mini

代码实现
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容