《ElementPlus 与 ElementUI 差异集合》el-popconfirm 气泡确认框之插槽写法有差异

于 2024-04-17 11:50:37 发布
阅读量923 收藏 6
点赞数 6
分类专栏： 《ElementPlus 与 ElementUI 差异集合》 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31213021/article/details/137866792
版权
文章比较了ElementUI和elementPlus中如何通过``实现自定义删除操作的弹出确认框，展示了在el-button上使用slot以及内嵌模板的两种方法和效果。
摘要由CSDN通过智能技术生成

ElementUI

  • 直接在 el-button 上配置属性 slot；
<el-popconfirm title="确定删除吗？请谨慎操作！" @confirm="delete">
	<el-button slot="reference" size="small" type="danger">删除</el-button>
</el-popconfirm>

elementPlus

  • 内嵌 <template #reference> 实现插槽机制；
<el-popconfirm title="确定删除吗？请谨慎操作！" @confirm="delete">
	<template #reference>
		<el-button slot="reference" size="small" type="danger">删除</el-button>
	</template>
</el-popconfirm>

效果
在这里插入图片描述

AvatarGiser
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现 element-ui popconfirm
小冷_Blog
08-22 1万+
实现原因 在中后台的业务开发中，Popconfirm(确认操作弹出框)是一个常见的需求，但 element-ui 仅提供 popover，不支持如 ant design 的 popconfirm，直接使用 popover 做确认框代码复杂的同时还带来一些意料之外的问题，因此选择封装一个简单易用但又支持灵活配置的 Popconfirm组件供业务使用，提高开发效率。 解决的问题 使用麻烦，需要写较多...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
总之，理解并熟练掌握Vue的`v-for`指令以及如何与ElementUI的`el-table`组件配合，是构建灵活可扩展的表格的关键。通过动态生成列，可以极大地提高代码的可维护性和复用性。希望这篇文章能对你在开发过程中有所帮助...
【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案
bbt953的博客
04-18 6923
【vue3+elementPlus】在el-table中使用popconfirm、popover、tooltip、select时，出现placement错位或者框被table的列遮挡的解决方案
【element】之el-popconfirm：弹出组件确认按钮绑定
qq_37219845的博客
08-25 4544
element之el-popconfirm：弹出组件确认按钮绑定一、element官网说明element中el-popconfirm实例element提供的接口二、实际代码说明无用代码正确代码 一、element官网说明 element中el-popconfirm实例 简单介绍了一下，没有列举如和绑定事件 element提供的接口 可以看到：确认按钮是“confirm“；取消按钮是”cancel“ 二、实际代码说明 无用代码 点击button就会触发“resetSubmitForm”方法 <el
elementUI中的Popconfirm弹出框自定义调整（按钮位置，颜色调整）
m0_54853420的博客
03-03 4587
elementUI中的Popconfirm弹出框自定义调整 1.需求 2.更改组件 3.用法 只需要加入这段css样式，注意不能使用scoped <style lang="scss"> .el-popconfirm__main { margin: 23px 24px 17px 24px; font-size: 14px; font-family: MicrosoftYaHei; color: #333333; } .el-popconfirm__action { marg
【element ui】记一次element ui中Popconfirm 气泡确认框组件，confirm无法正常触发
元晖的博客
01-14 1984
confirm事件无法触发，回去查看Popconfirm 组件删除按键的回调方法，查看结果如下： 震惊！原本应该是confirm的字段，变成了onConfirm 所以当我们要调用文档中所说的confirm事件，应该改成调用onConfirm事件，实际使用案例参考如下： <el-popconfirm title="是否删除该管理员？" @onConfirm="deleteAdmin(scope.row.guid)" > <el-button slot="reference"&gt
Element-UI Popconfirm组件调用事件
热门推荐
jxysgzs的博客
12-30 1万+
今天更新了项目中的elementui到2.13.0的版本了，发现多了一个很漂亮的Popconfirm组件，但是使用上出现了一个问题，那就是代码按照API实现了，但是却找不到可以实现相应的事件函数： 点击好的并没有什么事件，已开始想到将@click放到里面的button上，发现也不行，于是网上搜了下源码才找到解决办法： 在Popconfirm标签中添加@onConfirm="pop(“1”)或者@...
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
ElementUI为el-table元素提供了直接设置高度（height）属性的方法，从而固定表头并实现内容的滚动。在本文中，将会详细探讨如何实现这一功能，并且提供动态监测浏览器高度来设置表格高度的解决方案。 ### ElementUI...
详解elementui之el-image-viewer(图片查看器)
10-16
总的来说，`el-image-viewer`组件提供了灵活的图片预览功能，不仅可以直接与`el-image`配合使用，也可以独立使用，这使得在Element UI的项目中实现图片查看功能变得更加简单和高效。通过掌握它的基本属性和使用方式...
element中的$confirm的使用
10-15
主要介绍了element中的$confirm的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui确认框
最新发布
m0_67587248的博客
01-09 1304
组件是一个确认框，它显示一个提示文本，并提供确定和取消按钮。当用户点击确定按钮时，会触发。这是一个Vue.js的模板代码片段，它使用了Element UI库中的。请注意，这只是一个代码片段，还需要在Vue组件中进行相应的配置和调用。属性指定插槽名为"reference"，表示它是。当用户点击该按钮时，会调用。属性来定义作用域插槽，将作用域对象。组件实现一个删除确认功能。组件是一个按钮，通过。
vue下elmentui中 el-popconfirm 气泡确认框
weixin_50450473的博客
04-25 7102
问题描述：点击el-popconfirm 气泡确认框时，同时会影响外层div的@click事件的弹出 解决方法：为el-popconfirm标签里层的el-button标签加上 @click.stop="" 事件即可 <div v-for="(chi,chiIndex) in me.children" :key="chiIndex" @click="toDetail(chi,me.type)"> <div>标题</div> <el-popc....
饿了么UI/element Popconfirm气泡确认框 confirm事件
06-08 4349
饿了么UI/element Popconfirm气泡确认框 confirm/cancel事件 很多人会发现，不知道怎么用，或者用不了，废话不多说：上代码：方法必须是 @onConfirm="successconfirm()" @onCancel="successcancel()"不这样就无法使用方法：...
Element-ui Popconfirm气泡确认框的确认及取消事件不生效
m0_67021283的博客
12-25 2865
el-popconfirm绑定事件不生效
修改elementUI的el-popconfirm 气泡确认框样式不起效果
夏天的博客
06-16 3088
在控制台上能够修改宽高度，把该元素拿来放在源文件中不能起效果；修改前： 修改后： 1.元素没有取对（其实一般改这种官方组件，不是写一长串的类名，以及深度处理器；相反它反而很简单，外面写一个组件定义的类名，里面写这个组件封装的类名就好了） 2.可以用不加scoped的全局样式 3.看elementUI官方文档，里面有一个poper-class属性总结：我没改对样式，是从源头上就错了，并且方法上也有问题；比如我之前取的是这个玩意，并且在编写源码的时候，我有将p写成.p，并且就是我有将同级的类在源码中用空格将它隔
elementUI中的Popconfirm 气泡确认框 对 确认按钮 绑定方法
寬真
10-20 1087
【代码】elementUI中的Popconfirm 气泡确认框 对 确认按钮 绑定方法。
【elementplus】解决el-table使用el-popconfirm，只剩下一行数据时，popconfirm提示框会被el-table边框遮挡的问题
bbt953的博客
07-03 1160
给el-table设置固定高度，通常我会给flex布局，适应不同屏幕的一屏展示。最后，如果给el-table设置了固定高度后，横向滚动条消失了，然后就是有可能会出现。
element ui气泡确认框事件无效
qq_36539696的博客
07-26 907
上面的代码全部按官方的文档写，但是触发不了confirm绑定的事件，其他业务代码都没有错误。查了很久的博客，不止我一个人遇到这个问题，但是指出这个问题的博主却少之又少。elementui官方修改了confirm事件的名称。原confirm事件，改为onConfirm即可。看elementui官方文档给出的说明。气泡按钮事件是这两个方法，...
el-popconfirm 内嵌el-radio
09-06
要实现el-popconfirm内嵌el-radio，可以将el-radio作为el-popconfirm的内容插槽(slot)的一部分。这样，在用户点击确认按钮时，可以获取el-radio组件的选中值，从而实现更复杂的操作。具体的代码示例如下所示： <el-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值