Element UI之Button 按钮

菜园前端2023-10-14 17:57

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)

基础用法

vue 复制代码

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

禁用状态

vue 复制代码

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

不同形状

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>

不同尺寸

:::warning 注意

由于预览模式是由 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>

Attributes

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

原文链接：菜园前端