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