当前位置：首页 > news >正文

element-plus中Popconfirm气泡确认框组件的使用

news 来源：原创 2025/5/1 6:03:52

1、基本使用

从element-plus官网复制代码：

<template>
  <el-popconfirm title="Are you sure to delete this?">
    <template #reference>
      <el-button>Delete</el-button>
    </template>
  </el-popconfirm>
</template>

运行效果：

实现原理：在el-popconfirm组件（气泡确认框组件）内，自定义#reference插槽，然后在插槽中放一个el-buttton按钮，这样就能实现一点击按钮，就弹出气泡确认框的效果。

(具体是如何弹出的，归功于#reference插槽，这个插槽是element-plus官方定义的，我们知道如何使用即可。)

2、修改气泡确认框中，标题名称和两个按钮的名称

期望效果：

代码：

<el-popconfirm title="您的审核意见" confirm-button-text="通过" cancel-button-text="不通过">
    <template #reference>
        <el-button type="success" v-if="row.dailyState == 2" @click="review(row)">审核</el-button>
    </template>
</el-popconfirm>

解读：

①title="您的审核意见"表示修改气泡确认框的标题。

②confirm-button-text="通过"表示将确认按钮修改为“通过”

③cancel-button-text="不通过"表示将取消按钮修改为“不通过”

3、气泡确认框的两个事件：确认事件、取消事件

@confirm是确认事件，@cancel是取消事件。

举例：

<el-popconfirm title="您的审核意见" confirm-button-text="通过" cancel-button-text="不通过" @confirm="passInvoice(row)" @cancel="refuseInvoice(row)">
    <template #reference>
        <el-button type="success" v-if="row.dailyState == 2">审核</el-button>
    </template>
</el-popconfirm>

//点击气泡确认框的“通过”按钮,触发事件passInvoice()
const passInvoice = () => {
    alert("通过");
}

//点击气泡确认框的“不通过”按钮，触发事件refuseInvoice()
const refuseInvoice = () => {
    alert("不通过");

}