elementUI中的Popconfirm 气泡确认框对确认按钮绑定方法

Dear 丶 2022-12-25 08:55 694阅读 0赞

使用el-popconfirm 和 el-popover 的效果：

![20201201105244444.png][]![20201201105843700.png][]

代码如下：

<el-popconfirm
          confirm-button-text="好的"
          cancel-button-text="不用了"
          icon="el-icon-info"
          icon-color="red"
          placement="top"
          @onConfirm="confirm"
          @onCancel="cancel"
          title="这是一段内容确定删除吗？？？？？？"
        >
          <el-button slot="reference" type="primary">删除</el-button>
        </el-popconfirm>
    
        <el-popover placement="top" width="160" v-model="visible">
          <p>这是一段内容这是一段内容确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="visible = false"
              >确定</el-button
            >
          </div>
          <el-button slot="reference" type="success">删除</el-button>
        </el-popover>

el-popover 的其他用法[https://element.eleme.io/\#/zh-CN/component/popover][https_element.eleme.io_zh-CN_component_popover]；

[20201201105244444.png]: https://img-blog.csdnimg.cn/20201201105244444.png
[20201201105843700.png]: /images/20221120/681c0402313e4ec4a3f017aede89873a.png
[https_element.eleme.io_zh-CN_component_popover]: https://element.eleme.io/#/zh-CN/component/popover

发表评论取消回复

表情：

评论列表（有 0 条评论，694人围观）

还没有评论，来说两句吧...

相关阅读

相关 RabbitMQ------发布确认（单个确认、批量确认、未确认）（四）

RabbitMQ------发布确认（四）发布确认原理生产者将信道设置为confirm模式，一旦信道进入confirm模式，所有再该信道上面发布的消息都会被指派

超、凢脫俗/ 2024年04月01日 15:20/ 0 赞/ 38 阅读

相关 elementUI中的Popconfirm 气泡确认框对确认按钮绑定方法

使用el-popconfirm 和 el-popover 的效果： ![20201201105244444.png][]![20201201105843700.png][]

Dear 丶/ 2022年12月25日 08:55/ 0 赞/ 695 阅读

相关【Vue.js】Vue.js组件库Element中的弹出框、气泡确认框、卡片和走马灯

1、Popover 弹出框基础用法 Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Toolt

妖狐艹你老母/ 2022年12月03日 13:07/ 0 赞/ 1622 阅读

相关 elementUI中popconfirm组件的确认和删除事件

先看源码： ![20210407101530309.png][] 所以在el-popconfirm组件上写事件时应该这样写： ![watermark_type_ZmFuZ

亦凉/ 2022年11月16日 10:55/ 0 赞/ 258 阅读

相关 android中的退出确认框的实现

这里是通过对回退键操作的阻断并重写实现：当按下回退键，弹出提示框选择是否退出，是则执行退出代码，否则什么都不做。在Mianactivity中重写： @O

阳光穿透心脏的1/2处/ 2022年06月16日 04:15/ 0 赞/ 150 阅读

相关 easyUI Confirm 确认框

$.messager.confirm("操作提示", "您确定要删除该转速运行李记录吗？", function (data) { if(data) {

水深无声/ 2022年05月26日 02:36/ 0 赞/ 299 阅读

相关 JS警告框和确认框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BOM

太过爱你忘了你带给我的痛/ 2021年12月12日 16:25/ 0 赞/ 281 阅读

相关 layerconfirm确认框的使用

$('\id-act-cancel').click(function() \{ layer.confirm('确定要作废该合同？', \{

╰半橙微兮°/ 2021年09月28日 22:44/ 0 赞/ 1342 阅读

相关拥有确认和取消两个按钮的提示框

定义和用法 confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。语法 confirm(message) <table sty

缺乏、安全感/ 2021年09月26日 07:18/ 0 赞/ 288 阅读

相关 JS确认框

本文主要介绍js确认框的几种种使用方法一. function del() { var msg = "您真的确定要删除吗？\n\n请确认！";

ゝ一世哀愁。/ 2021年09月26日 06:12/ 0 赞/ 314 阅读