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

使用:value与$confirm实现Switch开关二次确认功能
最新推荐文章于 2024-10-03 22:35:37 发布
原创 最新推荐文章于 2024-10-03 22:35:37 发布 · 2.7k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui

本文介绍了如何在Vue中使用:value属性替代v-model，结合$confirm弹框实现Switch开关的二次确认功能。当点击Switch时，只有在用户确认修改后才会更新状态。示例代码展示了在表格列中应用此功能的方法。

当我们在使用v-model的时候，只要点击了Switch开关就会执行change事件改变当前的状态。如果想实现点击了二次确认弹框后再改变状态的话，此时应该使用 :value来代替v-model。
具体实例如下：

<el-table-column label="是否启用" align="center">
  <template slot-scope="scope">
    <el-switch
      :value="scope.row.touchStatus"
      ac
最低0.47元/天 解锁文章
（近5w字）面向小白のVue全家桶开发电商管理系统项目总结文档
超逸の学习技术博客
07-05 2666
（近5w字）面向小白のVue全家桶开发电商管理系统项目，挖掘项目亮点，提供学习地址。
Vue3 - 详细实现调用浏览器摄像头拍照并生成图片预览，支持将抓拍的图像保存到用户本地或上传到服务器、调取前置摄像头和后置摄像头，开启摄像头并进行拍照，vue实现调用摄像头，电脑或手机调用摄像头拍照
🏆 前端领域优质创作者
10-03 8227
vue3，nuxt3，摄像头，vue3网站打开摄像头拍照，vue3项目调用摄像头实现拍照功能，拍照后怎么保存，照相后上传到后端服务器，开启摄像头黑屏，如何默认后置摄像头，网页开启电脑摄像头并照相，前置拍照，vue3如何调用手机摄像头进行拍摄，拒绝权限后不再弹出了，微信公众号网页，摄像头报错，拍照左右镜像反了，浏览器不兼容怎么办，vue3调用电脑端摄像头实时拍照，解决调用摄像头权限无法弹出，打不开摄像头，Vue3如何调用手机的摄像头，调用本地摄像头实现拍照，浏览器不弹摄像头权限了，如何不使用https运行测试
el-switch开关 添加二次确认弹框后,再切换状态实现
前端泡面人
07-20 992
【代码】el-switch开关 添加二次确认弹框后,再切换状态实现。
Element ui Switch 开关二次确认弹窗后再更改开关状态
vsapx的博客
09-21 8454
Element ui Switch 开关二次确认弹窗后再更改开关状态Switch 开关基本用法Events重点：禁用状态 Switch 开关 表示两种相互对立的状态间的切换，多用于触发「开/关」。 基本用法 绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。 <el-switch v-model="...
element-ui 点击Switch开关弹出对话框确认后再改变switch开关状态
lhz_333的博客
12-13 1万+
点击switch开关按钮后，弹出一个确认对话框，根据用户的操作来决定是否改变switch的开关状态。
el-Switch 开关二次确认
ZYXKN的博客
03-12 1330
最近在做毕设，有个需求是点击按钮控制用户的状态是否禁用，就看到element有个switch组件可以改造一下，就上网看了一下，结果为了这个效果忙活了很久。。。所以说记录一下，让大家少踩坑。
element-ui switch开关 点击按钮后，弹窗确认后再改变开关状态
Gomeer的博客
12-25 4591
设置active-value和inactive-value属性，分别代表激活状态的值和关闭时候的值，与value绑定。接受Boolean,String或Number类型的值。 <el-switch v-model="itemValue" active-value="100" inactive-value="0" @chan...
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统-用户列表制作
weixin_48884617的博客
03-27 6608
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统--用户列表制作
Vue2 - 详细实现调用浏览器摄像头拍照并生成图片预览，开启摄像头并进行拍照，支持将抓拍的图像保存到用户本地或上传到服务器、调取前置摄像头和后置摄像头，vue实现调用摄像头，电脑或手机调用摄像头拍照
🏆 前端领域优质创作者
10-03 1万+
vue2，nuxt2，摄像头，vue网站打开摄像头拍照，vue项目调用摄像头实现拍照功能，vue调用电脑端摄像头实时拍照，解决调用摄像头权限无法弹出，打不开摄像头，vue如何调用手机的摄像头，调用本地摄像头实现拍照，浏览器不弹摄像头权限了，如何不使用https运行测试，拍照后怎么保存，照相后上传到后端服务器，开启摄像头黑屏，如何默认后置摄像头，网页开启电脑摄像头并照相，前置拍照，vue2如何调用手机摄像头进行拍摄，拒绝权限后不再弹出了，微信公众号网页，摄像头报错，拍照左右镜像反了，浏览器不兼容怎么办，前置摄
【Element】el-switch开关 点击弹窗确认框时状态先改变----点击弹窗取消框失效
weixin_71403100的博客
11-24 2568
需求：在列表中添加定期出账的开关按钮，点击开关时，原来的状态不改变，弹出弹窗；点击弹窗取消按钮：状态不改变，点击弹窗确定按钮：状态改变，并调取列表数据刷新页面。
element ui switch开关 点击按钮后，弹窗确认再改变开关状态
热门推荐
ymumi的博客
11-14 2万+
<el-switch v-model="autoUpdate" active-color="#5eb058" inactive-color="#cccccc" disabled @click.native="handleUpdate(autoUpdate)"> </el-switch> ...
element-ui的el-switch在修改值之前做二次确认操作
weixin_45776545的博客
03-28 1201
【代码】element-ui的el-switch在修改值之前做二次确认操作。
el-switch进行二次确认
weixin_45776308的博客
12-07 660
将el-switch的v-model 换成:value，让数据单向流动，这样点击el-switch的时候就不会直接修改el-switch的绑定值
【elementUI】switch确认后再改变状态 switch回调
OG
02-02 4282
switch只有个change事件，但很多时候我们是需要用户确认后再去改变状态的，解决办法就是在调用change时把switch绑定的值的父级对象当参数，然后在change的回调里执行取反 <el-switch v-model="form.isShow" @change="changeSwitch(form)"></el-switch> export default { data () { form: { isShow: true } }, methods: {
el-switch 改状态之前先给弹框提示确认修改以后再改
weixin_43773663的博客
09-25 1530
代码2：//是否关闭 confirmButtonText: ‘确定’,cancelButtonText: ‘取消’,type: ‘warning’ ———————————————— 原文链接：https://blog.youkuaiyun.com/kuang_nu/article/details/129580920你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了
Elemet-ui开关组件el-switch ：点击时状态不变出现弹窗，点击确认再改变按钮状态
yimeichengxuyuan的博客
06-01 2311
默认使用方法 <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> ----------------------------------------------------- export default { data() { return { value: true } } }; 更
vue的el-switch开关组件增加change监听事件
AVATAR
07-05 8973
vue的el-switch开关组件增加change监听事件
elementUI el-table中多列使用el-switch切换导致的问题
heirui的专栏
08-26 3634
el-table表格中多列使用el-switch开关时的冲突解决
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` 方法模拟删除接口的调用；点击“取消”则会给出提示信息。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值