element-plus的button按钮详解

月木@

已于 2023-07-12 18:56:08 修改

阅读量2.4k

点赞数

分类专栏：前端文章标签： vue.js javascript ecmascript

于 2023-07-11 01:22:43 首次发布

本文链接：https://blog.csdn.net/m0_63040701/article/details/131651393

版权

前端专栏收录该内容

30 篇文章

订阅专栏

本文介绍了ElementPlus库中的Button组件，包括不同类型的按钮（如primary、success等）、尺寸设定、是否镂空、圆角和圆形按钮、加载状态、禁用状态的配置。此外，还展示了如何添加图标、创建文字按钮以及将按钮封装为a标签进行链接跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Button按钮

基本属性

图标按钮

icon：图标组件

<el-button type="primary" :icon="Edit" />

import { Edit} from '@element-plus/icons-vue'

结合字体图标和文字使用

<el-button round @click="addHander" class="button" size="large" type="primary">
  <el-icon>
    <DocumentAdd/>
  </el-icon> 添加
</el-button>

制作按钮a标签

tag：自定义元素标签，如a标签

<el-button tag="a" href="https://github.com/element-plus/element-plus" target="_blank">跳转页面</el-button>

文字按钮

text：是否为文字按钮

bg：是否显示文字按钮背景颜色，即白色，不设置则为页面背景色

<el-button type="primary" text bg>文字按钮</el-button>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

月木@

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue3【常见UI组件库、Vue3加载Element-plus 、Vue3加载Element-plus的字体图标】(十六)-全面详解（学习总结---从入门到深化）

04-12

869

Vue3【常见UI组件库、Vue3加载Element-plus 、Vue3加载Element-plus的字体图标】(十六)-全面详解（学习总结---从入门到深化）

【组件库】element-plus组件库

充电五分钟...

07-09

3929

参考：Vue3 ts环境下的PropType，如下title: "标题一",description: "描述一",},title: "标题二",description: "描述二",},非setup语法糖的环境中使用PropType 定义props数据类型// 1. 在“./prop”这个文件中定义并导出：类型 CompProps// 2. 在子组件中接收props

参与评论您还未登录，请先登录后发表或查看评论

【ElementPlus源码】Button 按钮

karshey的博客

06-28

1070

vm.proxy 是当前 Vue 实例的代理对象，$props 是代理对象的属性集合，[name] 是指定的属性。获取当前Vue实例，返回一个计算属性，其值是：实例的某个属性。调用useButton创建button实例，解构出一堆属性。，即是字符串类型的，values值是枚举值，非必填的属性。如：在button中，当传入的type为text时，定义了button有哪些属性，和属性的类型。作用：传入一个name，返回实例的name属性。是一个构建属性的方法，没看懂。看源码时候做的笔记。其他props的属性。

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

最新发布

qq_45973421的博客

03-06

1073

是一个常见的功能需求。用户可以通过输入框添加标签，并通过关闭按钮删除标签，同时还需要支持标签数据的提交和回显。本文将详细介绍如何使用。通过以上实现，我们完成了动态标签的添加、删除、提交和回显功能。用户可以通过输入框添加新标签，并通过关闭按钮删除标签。希望这篇文章对你有帮助！如果有任何问题，欢迎在评论区留言讨论~在编辑表单时，需要从接口获取已保存的标签数据并回显到页面上。在开发后台管理系统或表单页面时，渲染标签列表，并使用。动态标签的核心是通过。字段随表单一起提交。

Element Plus中button按钮相关大全

喝旺仔la的博客

09-15

1648

2.2.0 如果您想要使用老版样式的按钮，可以考虑使用。属性来为按钮添加图标。使用图标为按钮添加更多的含义。除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。可以自定义元素标签。例如，按钮，div，路由链接，nuxt链接。属性会同时控制按钮的样式，因此我们通过一个新的 API。属性来控制按钮是否为禁用状态。标签来添加图标，你也可以使用自定义图标。点击按钮来加载数据，并向用户反馈加载状态。以按钮组的方式出现，常用于多项类似操作。属性来定义按钮是否被禁用。可以自定义按钮的颜色。

elementPlus 带图标的按钮—文档解析

七月❤的博客

06-22

1892

elementPlus 带图标的按钮

vue3 element-plus 动态设置el-button类型，npm run dev项目正常，npm run build失败

jdjfjgfdgdfg的博客

03-24

2702

“vue”: “^3.2.16”, “vite”: “^2.6.4”, “element-plus”: “^2.1.4”, 以下程序可以正常执行，但是npm run build失败 <template> <el-button :type="typeBtn">sfsdfsdf</el-button> </template> <script lang="ts" setup> const typeBtn = ref('info'); </sc

element-plus二次封装搜索组件的详细解析与使用

Jiaberrr的博客

01-04

1403

在 Vue 项目开发中，构建一个灵活且易用的搜索组件是非常常见的需求。本文将剖析项目中基于element-plus二次封装的搜索组件的代码，探讨其设计思路、功能实现以及使用方法，希望在后面的项目中可以复用。

5分钟搞定 Vue3+Element-Plus 项目主题色定制

chenyajundd的博客

08-11

6971

主题色是指一个网站或应用的主色调，是体现整体风格的一个重要标志。

详解element-ui设置下拉选择切换必填和非必填

12-10

<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> </el-form-item> </el-form> export default { data() { let validateName = (rule, value, callback) => { if (this....

vue3加载element-plus学习button

luhouxiang的专栏

06-22

936

一、引子其实最初的目的只是想写一个登录页面，然后里面有几个子页面显示K线，设置，收益什么的。开始想用django做，毕境python用的还算可以，结果看了两天发现django用起来好麻烦，还是要写前端且要遵循django框架，相当于要同时学两个。因此还是直接搞vue3吧，刚好网上大把教学。直接开搞，前面过程不再赘述。这里假设所有的准备工作已经就续。二、搭建vue3+vite 命令行中输入： create-vite-app vue3-button 若这个命令不起作用，你需要先运行：

vue3+elementplus el-button按钮点击事件target绑定问题

Gossic的博客

12-28

1776

给el-button绑定@click事件时，根据点击到的位置不同返回的event.target会有五个不同的值：button,i,svg,path和span。这是由el-button的结构决定的。业务逻辑中需要在点击这个el-button后获取其id，则需要在点击对象是其他三个时进行判断和处理。

element plus el-button不同浏览器样式兼容问题，package.json固定构建依赖包版本

wiwenqiuya的博客

05-27

1957

问题描述：最近使用element plus框架时，项目最新版本出现不同浏览器el-button样式不同问题，同一套代码不同环境下显示也不同。打开官网才发现是最新版本有bug 解决方案：将element plus版本固定到2.2.0，即可解决 package.json详解：在 node.js中，有模块的概念，这个模块可以是一个库、框架、项目等。这个模块的描述文件就是 package.json。它是标准的json对象，描述了这个项目的配置信息（名称、版本、许可证等元数据）以及所需要的各种模块

element-plus中通过按钮来控制el-input输入框的禁用可用状态

载_酒i

04-27

2096

在 Vue.js 中，您可以使用el-input组件的disabled属性来设置输入框的可编辑状态。这个属性接受一个布尔值，当设置为true时，输入框将不可编辑；当设置为false或省略时，输入框将是可编辑的。

element-plus的text按钮直接设置color属性不生效，可以通过添加类名来实现，注意disabled 的样式要自己定义哦！

weixin_53736936的博客

07-05

339

elementplus的按钮颜色自定义；文字按钮；

【Vue3】3-6 : 仿ElementPlus框架的el-button按钮组件实

ladymorgana的博客

03-04

1135

上节,我们学习了slot插槽，组件内容的分发处理。

【elementplus】给确认提示框的确认按钮增加加载状态的写法

bbt953的博客

08-19

1105

给确认提示框的确认按钮增加加载状态

ElementUI ElementPlus按钮聚焦样式

ly-chn的博客

07-24

1318

问题原因: element-ui和element-plus, 以及第三方ui都为按钮focus设置了CSS, 按钮在点击后根据规范是不会失去焦点的。最终我选用的是方案1, 这样可以最小化降低键盘操作的体验感, 而且不影响鼠标操作体验。解释: 对于鼠标用户来说, focus看起来显得用户操作体验大大降低。如图: 按钮点击后效果变为朦胧效果。自定义指令, 点击后触发blur。使用自定义指令完成控制即可。这样用起来又比较麻烦。

element-plus el-button

07-27

Element Plus的Button按钮是Element Plus基础组件中的一部分，提供了按钮的基础用法、禁用状态、链接按钮、文字按钮、图标按钮、按钮组等功能。\[1\]在ElementUI中，Button按钮实际渲染出的DOM节点是一个button元素，点击按钮时可以使用event.target.blur()来触发失焦效果。如果点击到按钮上的文字，即span标签上时，需要使用event.target.parentNode.blur()来触发失焦效果。\[2\]在代码中，可以使用el-button组件和el-button-group组件来创建按钮和按钮组。\[3\] #### 引用[.reference_title] - *1* *3* [Element Plus 实例详解（二）___Button 按钮](https://blog.csdn.net/weixin_69553582/article/details/129761751)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [elememt-plus中el-button点击后不自动失焦问题](https://blog.csdn.net/yans121/article/details/121163678)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]