菜园前端

Appearance

Button 按钮 ​

常用的操作按钮。

按需引入方式 ​

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

javascript
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)
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)

基础用法 ​

vue
<template>
    <el-button>默认按钮</el-button>
</template>
<template>
    <el-button>默认按钮</el-button>
</template>

禁用状态 ​

vue
<template>
    <el-button disabled></el-button>
</template>
<template>
    <el-button disabled></el-button>
</template>

不同颜色 ​

vue
<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>
<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>

不同形状 ​

vue
<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>
<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>

不同尺寸 ​

注意

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

vue
<template>
    <el-button>默认按钮</el-button>
    <el-button size="medium">中等按钮</el-button>
    <el-button size="small">小型按钮</el-button>
    <el-button size="mini">超小按钮</el-button>
</template>
<template>
    <el-button>默认按钮</el-button>
    <el-button size="medium">中等按钮</el-button>
    <el-button size="small">小型按钮</el-button>
    <el-button size="mini">超小按钮</el-button>
</template>

Attributes ​

参数说明类型默认值
size按钮尺寸string
type按钮颜色string
plain是否朴素按钮booleanfalse
round是否圆角按钮booleanfalse
circle是否圆形按钮booleanfalse
disabled是否禁用状态booleanfalse
icon图标类名string
...