Element-ui Button 按钮

Element-ui Button 按钮

原文链接：https://note.noxussj.top/?source=sifo

常用的操作按钮。

---

按需引入方式

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

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)

---

基础用法

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

---

禁用状态

<template>
    <el-button disabled></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>

---

不同形状

<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 size="medium">中等按钮</el-button>
    <el-button size="small">小型按钮</el-button>
    <el-button size="mini">超小按钮</el-button>
</template>

---

Attributes

---

原文链接：https://note.noxussj.top/?source=sifo