一、前言

　　Element Plus Basic 基础组件里Button 按钮，是常用的操作按钮，提供了Button 按钮的基础用法、Button 按钮禁用状态、链接按钮、文字按钮、图标按钮、按钮组等功能，本篇里我们一起来试用一下Element Plus的 Button 按钮组件。

二、搭建Element Plus试用环境

 1、搭建Vue3项目（基于Vite + Vue）

　　安装时请选择支持Typescript，本实例我安装在（C:\00program\vue\vuelearn\vueviteproject1）目录中，具体方法详见下面文章：

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）

 安装完成后打开浏览器：http://localhost:5173/  ,能正常显示以下页面：

 2、安装Element Plus

  • NPM：npm install element-plus --save

三、Element Plus Button 按钮功能试用

1、Button 按钮组件基础用法

  • 使用 type、plain、round 和 circle 来定义按钮的样式。

实现效果：

element button 设置自定选中_Element Plus

完整代码：

<script setup lang="ts">
import { ref } from 'vue'
 
defineProps<{ msg: string }>()
 
const count = ref(0)
 
    import {
        Check,
        Delete,
        Edit,
        Message,
        Search,
        Star,
    } from '@element-plus/icons-vue'
 
 
</script>
 
<template>
    <h1>{{ msg }}</h1>
 
    <div class="card">
        <button type="button" @click="count++">count is {{ count }}</button>
        <p>
            Edit
            <code>components/HelloWorld.vue</code> to test HMR
        </p>
    </div>
    <p>
        Check out
        <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
    </p>
    <p>
        Install
        <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
        in your IDE for a better DX
    </p>
    <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 
 
 
    <el-row class="mb-4">
        <el-button>Default默认</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>
    </el-row>
    <br />
    <el-row class="mb-4">
        <el-button plain>Plain普通 </el-button>
        <el-button type="primary" plain>主要</el-button>
        <el-button type="success" plain>成功</el-button>
        <el-button type="info" plain>信息</el-button>
        <el-button type="warning" plain>警告</el-button>
        <el-button type="danger" plain>危险</el-button>
    </el-row>
    <br />
    <el-row class="mb-4">
        <el-button round>Round圆</el-button>
        <el-button type="primary" round>主要</el-button>
        <el-button type="success" round>成功</el-button>
        <el-button type="info" round>信息</el-button>
        <el-button type="warning" round>警告</el-button>
        <el-button type="danger" round>危险</el-button>
    </el-row>
    <br />
    <el-row>
        <el-button :icon="Search" circle />
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="success" :icon="Check" circle />
        <el-button type="info" :icon="Message" circle />
        <el-button type="warning" :icon="Star" circle />
        <el-button type="danger" :icon="Delete" circle />
    </el-row>
 
</template>
 
<style scoped>
.read-the-docs {
  color: #888;
}
</style>

2、Button 按钮组件禁用状态

  • 使用 disabled 属性来定义按钮是否被禁用。
  • 该属性接受一个 Boolean 类型的值。

实现效果：按钮呈现不可选的状态，鼠标在按钮上时，指针变成红色禁止符号

element button 设置自定选中_Element Plus_02

完整代码：

<script setup lang="ts">
    import { ref } from 'vue'
    import {
        Check,
        Delete,
        Edit,
        Message,
        Search,
        Star,
    } from '@element-plus/icons-vue'


</script>

<template>
    <el-row class="mb-4">
        <el-button disabled>Default默认</el-button>
        <el-button type="primary" disabled>主要</el-button>
        <el-button type="success" disabled>成功</el-button>
        <el-button type="info" disabled>信息</el-button>
        <el-button type="warning" disabled>警告</el-button>
        <el-button type="danger" disabled>危险</el-button>
    </el-row>
    <br />
    <el-row class="mb-4">
        <el-button plain disabled>Plain普通 </el-button>
        <el-button type="primary" plain disabled>主要</el-button>
        <el-button type="success" plain disabled>成功</el-button>
        <el-button type="info" plain disabled>信息</el-button>
        <el-button type="warning" plain disabled>警告</el-button>
        <el-button type="danger" plain disabled>危险</el-button>
    </el-row>
    <br />
    <el-row class="mb-4">
        <el-button round disabled>Round圆</el-button>
        <el-button type="primary" round disabled>主要</el-button>
        <el-button type="success" round disabled>成功</el-button>
        <el-button type="info" round disabled>信息</el-button>
        <el-button type="warning" round disabled>警告</el-button>
        <el-button type="danger" round disabled>危险</el-button>
    </el-row>
    <br />
    <el-row>
        <el-button :icon="Search" circle disabled/>
        <el-button type="primary" :icon="Edit" circle disabled/>
        <el-button type="success" :icon="Check" circle disabled/>
        <el-button type="info" :icon="Message" circle disabled/>
        <el-button type="warning" :icon="Star" circle disabled/>
        <el-button type="danger" :icon="Delete" circle disabled/>
    </el-row>

</template>

<style scoped>
    .read-the-docs {
        color: #888;
    }
</style>

3、图标按钮

  • 使用 icon 属性来为按钮添加图标。
  • 可以在 Icon 组件中找到所需图标。 通过向右方添加<i>标签来添加图标， 也可以使用自定义图标。
  • 可以单独使用图标不添加文字来节省显示区域占用。

实现效果：

element button 设置自定选中_前端_03

完整代码：

<template>
    <div class="flex">
        <el-button type="primary" :icon="Edit" />
        <el-button type="primary" :icon="Share" />
        <el-button type="primary" :icon="Delete" />
        <el-button type="primary" :icon="Search">查找</el-button>
        <el-button type="primary">
            上传<el-icon class="el-icon--right"><Upload /></el-icon>
        </el-button>

        <br /><br />
        <el-row>
            <el-button :icon="Search" circle />
            <el-button type="primary" :icon="Edit" circle />
            <el-button type="success" :icon="Check" circle />
            <el-button type="info" :icon="Message" circle />
            <el-button type="warning" :icon="Star" circle />
            <el-button type="danger" :icon="Delete" circle />
        </el-row>
    </div>
</template>
<script setup lang="ts">
    import { Check,Message,Star,Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
</script>

4、链接按钮

WARNING

  • type="text" 已被 废弃，将于版本3.0.0 时 移除。
  • 新的 API link 于2.2.1 版本添加，同时可以使用 type API 设置链接按钮的主题样式。

实现效果：

element button 设置自定选中_Element Plus_04

完整代码：

<template>
    <h3>“基本链接”按钮</h3>
    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
        <el-button v-for="button in buttons"
                   :key="button.text"
                   :type="button.type"
                   link>{{ button.text }}</el-button>
    </div>
    <br />

    <h3>“已禁用的链接”按钮</h3>
    <div class="flex justify-space-between flex-wrap gap-4">
        <el-button v-for="button in buttons"
                   :key="button.text"
                   :type="button.type"
                   link
                   disabled>{{ button.text }}</el-button>
    </div>
</template>

<script setup lang="ts">
    const buttons = [
        { type: '', text: 'plain普通' },
        { type: 'primary', text: 'primary主要' },
        { type: 'success', text: 'success成功' },
        { type: 'info', text: 'info信息' },
        { type: 'warning', text: 'warning警告' },
        { type: 'danger', text: 'danger危险' },
    ] as const
</script>

5、文字按钮

  • 2.2.0 如果您想要使用老版样式的按钮，可以考虑使用 Link 组件。、
  • type 属性会同时控制按钮的样式， 因此新的 API text: boolean 来控制文字按钮。
  • 没有边框和背景色的按钮。

实现效果：

element button 设置自定选中_前端_05

完整代码：

<template>
    <h3>“基本文本”按钮</h3>
    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
        <el-button v-for="button in buttons"
                   :key="button.text"
                   :type="button.type"
                   text>{{ button.text }}</el-button>
    </div>
    <br />
    <br />

    <h3>背景颜色始终开启</h3>
    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
        <el-button v-for="button in buttons"
                   :key="button.text"
                   :type="button.type"
                   text
                   bg>{{ button.text }}</el-button>
    </div>
    <br />
    <br />
    <h3>禁用的文本按钮</h3>
    <div class="flex justify-space-between flex-wrap gap-4">
        <el-button v-for="button in buttons"
                   :key="button.text"
                   :type="button.type"
                   text
                   disabled>{{ button.text }}</el-button>
    </div>
</template>

<script setup lang="ts">
    const buttons = [
        { type: '', text: 'plain普通' },
        { type: 'primary', text: 'primary主要' },
        { type: 'success', text: 'success成功' },
        { type: 'info', text: 'info信息' },
        { type: 'warning', text: 'warning警告' },
        { type: 'danger', text: 'danger危险' },
    ] as const
</script>

6、按钮组

实现效果：

element button 设置自定选中_ico_06

完整代码：

<template>
    <el-button-group>
        <el-button type="primary" :icon="ArrowLeft">上一页</el-button>
        <el-button type="primary">
            下一页<el-icon class="el-icon--right"><ArrowRight /> </el-icon>
        </el-button>
    </el-button-group>
    <br /><br />
    <el-button-group class="ml-4">
        <el-button type="primary" :icon="Edit"  circle/> 
        <el-button type="primary" :icon="Share"  circle/> 
        <el-button type="primary" :icon="Delete"  circle/> 
    </el-button-group>
</template>

<script setup lang="ts">
    import {
        ArrowLeft,
        ArrowRight,
        Delete,
        Edit,
        Share,
    } from '@element-plus/icons-vue'
</script>

7、加载状态按钮

实现效果：

element button 设置自定选中_Element Plus_07

 完整代码：

<template>
    <el-button type="primary" loading size="large">Loading</el-button>
    <el-button type="primary" :loading-icon="Eleme" loading size="large" >Loading</el-button>
    <el-button type="primary" loading size="large" >
        <template #loading>
            <div class="custom-loading">
                <svg class="circular" viewBox="-10, -10, 50, 50">
                    <path class="path"
                          d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
                          style="stroke-width: 3px; fill: rgb(255, 216, 0)" />
                </svg>
            </div>
        </template>
        Loading
    </el-button>
</template>

<script lang="ts" setup>
    import { Eleme } from '@element-plus/icons-vue'
</script>

<style scoped>
    .el-button .custom-loading .circular {
        margin-right: 6px;
        width: 35px;
        height: 35px;
        animation: loading-rotate 2s linear infinite;
    }

        .el-button .custom-loading .circular .path {
            animation: loading-dash 1.5s ease-in-out infinite;
            stroke-dasharray: 90, 150;
            stroke-dashoffset: 0;
            stroke-width: 2;
            stroke: var(--el-button-text-color);
            stroke-linecap: round;
        }
</style>

8、调整尺寸

  • 除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
  • 使用 size 属性额外配置尺寸，可使用 large和small两种值。

实现效果：

element button 设置自定选中_前端_08

 完整代码：

<template>
    <el-row>
        <el-button size="large">Large</el-button>
        <el-button>Default</el-button>
        <el-button size="small">Small</el-button>
    </el-row>
    <br />
    <el-row class="my-4">
        <el-button size="large" round>Large</el-button>
        <el-button round>Default</el-button>
        <el-button size="small" round>Small</el-button>
    </el-row>
    <br />
    <el-row>
        <el-button size="large" :icon="Search">Search</el-button>
        <el-button :icon="Search">Search</el-button>
        <el-button size="small" :icon="Search">Search</el-button>
    </el-row>
    <br />
    <el-row class="my-4">
        <el-button size="large" :icon="Search" round>Search</el-button>
        <el-button :icon="Search" round>Search</el-button>
        <el-button size="small" :icon="Search" round>Search</el-button>
    </el-row>
    <br />
    <el-row>
        <el-button :icon="Search" size="large" circle />
        <el-button :icon="Search" circle />
        <el-button :icon="Search" size="small" circle />
    </el-row>
</template>

<script setup lang="ts">
    import { Search } from '@element-plus/icons-vue'
</script>

9、自定义颜色

  • 可以自定义按钮颜色。
  • 系统将自动计算 hover 和 active 颜色。

实现效果：

element button 设置自定选中_Element Plus_09

 完整代码：

<template>
    <div class="flex">
        <el-button color="#E6005C" :dark="isDark" size="large">逆境清醒</el-button>
        <el-button color="#00BFFF" :dark="isDark" plain size="large">逆境清醒</el-button>

        <el-button color="#20B2AA" :dark="isDark" disabled size="large">逆境清醒</el-button>
        <el-button color="#626aef" :dark="isDark" disabled plain size="large">逆境清醒</el-button>
    </div>
</template>

四、官方资料中的各参数说明

Button API

Button Attributes

属性名

说明

类型

默认值

size

尺寸

enum

—

type

类型

enum

—

plain

是否为朴素按钮

boolean

false

text2.2.0

是否为文字按钮

boolean

false

bg2.2.0

是否显示文字按钮背景颜色

boolean

false

link 2.2.1

是否为链接按钮

boolean

false

round

是否为圆角按钮

boolean

false

circle

是否为圆形按钮

boolean

false

loading

是否为加载中状态

boolean

false

loading-icon

自定义加载中状态图标组件

string / Component

Loading

disabled

按钮是否为禁用状态

boolean

false

icon

图标组件

string / Component

—

autofocus

原生 autofocus 属性

boolean

false

native-type

原生 type 属性

enum

button

auto-insert-space

自动在两个中文字符之间插入空格

boolean

—

color

自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色

string

—

dark

dark 模式, 意味着自动设置 color 为 dark 模式的颜色

boolean

false

Button Slots

插槽名

说明

default

自定义默认内容

loading

自定义加载中组件

icon

自定义图标组件

Button Exposes

属性名

说明

类型

ref

按钮 html 元素

object

size

按钮尺寸

object

type

按钮类型

object

disabled

按钮已禁用

object

shouldAddSpace

是否在两个字符之间插入空格

object

ButtonGroup API

ButtonGroup Attributes

插槽名

说明

类型

默认值

size

用于控制该按钮组内按钮的大小

enum

—

type

用于控制该按钮组内按钮的类型

enum

—

ButtonGroup Slots

插槽名

说明

子标签

default

自定义按钮组内容

Button