Element Plus 实例详解（二）___Button 按钮_el-button

Element Plus 实例详解（二）___Button 按钮

文章目录：

一、前言

二、搭建Element Plus试用环境

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

 2、安装Element Plus

三、Element Plus Button 按钮功能试用

1、Button 按钮组件基础用法

2、Button 按钮组件禁用状态

3、图标按钮

4、链接按钮

5、文字按钮

6、按钮组

7、加载状态按钮

8、调整尺寸

9、自定义颜色

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

五、总结

---

一、前言

　　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）https://blog.csdn.net/weixin_69553582/article/details/129630880

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

 2、安装Element Plus

• NPM：npm install element-plus --save

详细参考：

Element Plus 实例详解系列（一）__安装设置https://blog.csdn.net/weixin_69553582/article/details/129701286

三、Element Plus Button 按钮功能试用

1、Button 按钮组件基础用法

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

实现效果：

完整代码：

 
<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 类型的值。

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

完整代码：

<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>标签来添加图标， 也可以使用自定义图标。
• 可以单独使用图标不添加文字来节省显示区域占用。

实现效果：

完整代码：

<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 设置链接按钮的主题样式。

实现效果：

完整代码：

<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 来控制文字按钮。
• 没有边框和背景色的按钮。

实现效果：

完整代码：

<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、按钮组

实现效果：

完整代码：

<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、加载状态按钮

实现效果：

 完整代码：

<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两种值。

实现效果：

 完整代码：

<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 颜色。

实现效果：

 完整代码：

<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

Button Slots

Button Exposes

ButtonGroup API

ButtonGroup Attributes

ButtonGroup Slots

五、总结

       推荐阅读：