elementUI二次确认按钮

最新推荐文章于 2025-07-14 21:43:16 发布

原创最新推荐文章于 2025-07-14 21:43:16 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文介绍如何在 Element UI 的 el-button 中加入二次确认功能，通过 el-popconfirm 组件实现防止误操作的功能。

开发中需要用到二次确认按钮，防止误触等操作。

原代码为：

el-button @click="changeBtn()">修改</el-button>

(修改函数已省略)

加入二次确认功能后，代码改为：

<el-popconfirm title="这是一段内容确定删除吗？" @confirm="change()">
    <el-button slot="reference">修改</el-button>
</el-popconfirm>

其中，@confirm表示确认后触发的函数；@cancel表示取消后触发的函数（默认为取消后关闭二次提示框）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「Stand」

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【element】删除二次确认框 this.$confirm

jieweiwujie的博客

10-28

3228

<template> <div class="home"> <div id="nav"> <el-button type="info" @click="showFun">showFun</el-button> </div> </div> </template> <script> export default { methods:{ show.

【element】删除二次确认框 this.$prompt

jieweiwujie的博客

02-01

636

【代码】【element】删除二次确认框 this.$prompt。

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

VUE的页面用ElementUI实现按钮的二次确认功能

weixin_42260782的博客

05-19

3389

云平台增加后台遥控功能，为避免误触，在控制前加入遥控按钮，实现二次确认遥控这个按钮用的是Popover 弹出框，取消事件设置visible为false，使弹出框消失，确认事件changeButton()改变状态。 <el-popover placement="top" width="160" v-model="visible"> <p>确定开始操作机器人吗？</p> <div.

element-ui 二次封装系列- button(二)

sky2714的博客

01-11

862

看此篇前,请阅读上一篇https://blog.csdn.net/sky2714/article/details/112494719 在上一篇中, 我们用一个简单的 autoLoading属性二次封装了el-button得到了pl-button组件,本篇中,我们继续丰富pl-button组件. 和自动loading相似,我们经常会有点击按钮需要弹窗二次确认的情况,如:点击删除按钮时,我们需要使用messageBox组件进行二次确认 this.$confirm('此操作将永久删除该文件, 是否继续?',

element 二次确认框，内容自定义处理

卡卡罗特的博客

09-26

647

自定义二次确认框

element-ui的el-switch在修改值之前做二次确认操作

weixin_45776545的博客

03-28

1210

【代码】element-ui的el-switch在修改值之前做二次确认操作。

element-ui 确认弹窗二次封装

guodanpidashu的博客

10-10

790

element-ui

基于ElementUI二次封装弹窗组件

前端开发工程师

12-29

2149

组件封装是一个很常规的操作。随着时间的积累，组件也会越来越多，配合vuepress可以解决组件文档的统一化，但依然解决不了组件的跨项目复用问题。一个公司中不可能只基于一个框架或项目开发，不同的业务或模块会另起项目，这时，如果是把项目的复用组件通过复制的方式引入另一项目，就显得麻烦，而且如果组件升级或修复bug，不能实时同步。如何解决组件的跨项目复用，是每个团队都会面临的问题。就常见的就是把组件上传到npm仓库，这样不同的项目需要时直接从npm仓库中安装使用，如果组件升级或修复问题，其他项目同步更新就可以。

基于elementUI二次封装一个表格加上搜索的控件

weixin_45636198的博客

02-27

1359

script>props: {total: {},pageNum: {},},//列表是否可勾选},querys: {//搜索表单配置return [];},},//搜索按钮return [];},},loading: {},//表格数据return [];},},//字段列表},},data() {return {},get() {},set(v) {return v;

element的Switch开关添加二次确认弹框后再切换状态

zoukunyang的博客

09-13

2762

element

elementUI二次确认提示框需要展示的信息太多，给提示框加高度，自适应滚动条

weixin_42414634的博客

01-08

917

max-height:300px;overflow: auto

手滑误操作？ vue + Element UI 封装二次确认框 | 附源码

程序员一诺

07-14

1325

是一个带确认提示的单选框组件，底层用的是和自研的气泡确认框。切换选项时自动弹出确认气泡，防止误操作支持自定义提示文案、按钮、图标、气泡位置可以指定哪些选项需要确认完全兼容原生单选框的用法，支持 v-model事件丰富，方便业务扩展你可以自定义按钮文案、颜色、图标样式，让提示更贴合业务。confirm-title="确认要切换状态吗？confirm-button-text="立即切换"cancel-button-text="我再想想"

vue+elementui 注册：输入密码和再次输入密码验证

weixin_45606890的博客

09-01

3943

输入密码和再次输入密码验证

【使用elementui中的checkBox复选框组件时，绑定click事件会触发两次（已解决）】

qq_30312887的博客

06-05

3243

使用elementui中的checkBox复选框组件时，绑定click事件会触发两次。点击取消会再弹出一次。

vue3+element-plus 二次确认弹窗

billershi的博客

02-27

799

该组件用于在用户进行危险操作时，二次确认是否继续操作。

element-ui二次封装实现短信验证码登录组件

weixin_43476677的博客

04-01

4111

文章目录前言一、实现方法1.创建 PhoneLogin 组件2.全局注册组件3.使用组件二、组件效果总结前言在开发 vue 项目时，我们都可能用到 element-ui，但是有时 element-ui 提供的组件太简单或不满足应用的需求，因此我们需要在其基础上再对组件进行封装。一、实现方法需先在项目中安装 element-ui：Vue项目使用element-ui 1.创建 PhoneLogin 组件在 components 文件夹创建 phoneLogin 文件夹，然后在 accountLog

实现一个二次点击按钮

平凡的世界的博客

06-16

442

前端表格多是一些增删改查，但是删也是其中一项，当我们点击删除的时候，会弹出一个选择框会提示我们确认要删除吗？这是很正常的一个功能，我们不可能说，点击删除，然后就删除了，万一点错了那。今天就封装一个小的二次点击功能。 <template> <el-button v-bind="$attrs" @click="handleClick"> <slot /> </el-button> </template> <script&g

Vue使用ElementUI的确认框进行删除操作(包含前后端代码)

见证自己学习,成长的记录

02-02

8317

今天做自己项目的时候，有一个删除的业务，正好遇到了确认框，在此纪念一下。这里我是使用的ElementUI的确认框！先看下我的页面布局吧由于使用起来比较简单，直接上代码了。总的来说，使用起来还是很简单的。后面遇到什么情况，再回来补充！

vue二次确认弹窗组件

fightingcoder419的博客

01-14

8186

1、二次确认弹窗组件reconfirm.vue <template> <el-dialog :visible="dialogFlag" @close="closeDialog()" width="420px" class="myz-info-reconfirm"> <div slot="title" class=&quot

vue 点击删除附件按钮弹出二次确认弹框再掉删除接口

最新发布

11-16

在 Vue 项目中实现点击删除附件按钮后弹出二次确认弹框，确认后调用删除接口的功能，以下以 Element UI 为例给出实现方法： #### 安装 Element UI 如果尚未安装 Element UI，可以使用以下命令进行安装： ```bash npm install element-ui ``` #### 引入 Element UI 在 `main.js` 中引入 Element UI： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ render: h => h(App), }).$mount('#app'); ``` #### 实现代码在组件中实现点击删除附件按钮弹出二次确认弹框并调用删除接口的功能： ```vue <template> <div> <button @click="handleDelete">删除附件</button> </div> </template> <script> export default { methods: { handleDelete() { this.$confirm('确定要删除该附件吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 调用删除接口 this.deleteAttachment(); }).catch(() => { // 用户取消操作 this.$message({ type: 'info', message: '已取消删除' }); }); }, deleteAttachment() { // 模拟删除接口调用 // 这里需要替换为实际的接口地址和请求方式 // 例如使用 axios 发送请求 // axios.delete('/api/deleteAttachment', { params: { id: attachmentId } }) // .then(response => { // this.$message({ // type: 'success', // message: '附件删除成功' // }); // }) // .catch(error => { // this.$message({ // type: 'error', // message: '附件删除失败' // }); // }); console.log('调用删除接口'); } } }; </script> ``` 在上述代码中，点击“删除附件”按钮时会触发 `handleDelete` 方法，该方法会弹出二次确认弹框。用户点击“确定”后，会调用 `deleteAttachment` 方法模拟删除接口的调用；点击“取消”则会给出提示信息。