Element UI之Button 按钮_element ui 汉堡按钮

Button 按钮

常用的操作按钮。

按需引入方式

如果是完整引入可跳过此步骤

import Vue from 'vue'
import { Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/button.css'
import 'element-ui/lib/theme-chalk/icon.css'

Vue.use(Button)
1
2
3
4
5
6
7

基础用法

<template>
    <el-button>默认按钮</el-button>
</template>
1
2
3

禁用状态

<template>
    <el-button disabled></el-button>
</template>
1
2
3

不同颜色

<template>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
</template>
1
2
3
4
5
6
7
8

不同形状

<template>
    <el-button>默认按钮</el-button>
    <el-button plain>朴素按钮</el-button>
    <el-button round>圆角按钮</el-button>
    <el-button icon="el-icon-search" circle></el-button>
</template>
1
2
3
4
5
6

不同尺寸

:::warning 注意
由于预览模式是由 Element Plus 进行模拟的，在新版中已经改为了三种尺寸的按钮。而旧版中存在四种尺寸按钮。
:::

<template>
    <el-button>默认按钮</el-button>
    <el-button size="medium">中等按钮</el-button>
    <el-button size="small">小型按钮</el-button>
    <el-button size="mini">超小按钮</el-button>
</template>
1
2
3
4
5
6

Attributes

原文链接：菜园前端