1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Popconfirm：
在你的 Vue 组件中导入 Popconfirm，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-popconfirm
title="确定执行该操作吗？"
confirmButtonText="确定"
cancelButtonText="取消"
@confirm="handleConfirm"
@cancel="handleCancel"
>
<el-button>点击触发</el-button>
</el-popconfirm>
</div>
</template>
<script>
import { ElPopconfirm, ElButton } from 'element-plus';
export default {
components: {
ElPopconfirm,
ElButton,
},
methods: {
handleConfirm() {
// 处理确认按钮点击事件
this.$message.success('操作已确认');
},
handleCancel() {
// 处理取消按钮点击事件
this.$message.info('操作已取消');
},
},
};
</script>
在上述代码中，我们导入了 ElPopconfirm 和 ElButton 组件，并在模板中使用 ElPopconfirm 包裹 ElButton 组件。当用户点击按钮时，将触发 Popconfirm 组件，并显示确认框。
在确认框中，我们通过设置 title 属性指定确认框的标题，通过 confirmButtonText 和 cancelButtonText 属性设置确认和取消按钮的文本。@confirm 和 @cancel 事件分别表示确认和取消按钮的点击事件，我们可以在这些事件中添加相应的逻辑。
3. 自定义 Popconfirm：
你可以根据需要自定义 Popconfirm，例如，设置主题、修改样式等：
<template>
<div>
<el-popconfirm
title="确定执行该操作吗？"
confirmButtonText="好的"
cancelButtonText="算了"
icon="el-icon-info"
icon-color="#f00"
@confirm="handleCustomConfirm"
>
<el-link type="primary">自定义触发</el-link>
</el-popconfirm>
</div>
</template>
<script>
import { ElPopconfirm, ElLink } from 'element-plus';
export default {
components: {
ElPopconfirm,
ElLink,
},
methods: {
handleCustomConfirm() {
// 处理确认按钮点击事件
this.$message.success('自定义操作已确认');
},
},
};
</script>
在这个例子中，我们通过设置 icon 和 icon-color 属性来自定义确认框中的图标。你还可以根据需要调整其他属性和样式。
转载请注明出处：http://www.zyzy.cn/article/detail/5578/ElementPlus