关于前端:Elementui-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