vuetify v-switch 点击Switch开关弹出对话框确认后再改变switch开关状态

不要假努力

已于 2022-03-25 15:18:35 修改

阅读量1.7k

点赞数 1

分类专栏： vue debug经历文章标签：网络协议算法分治算法

于 2022-03-25 15:16:37 首次发布

本文链接：https://blog.csdn.net/m0_56070223/article/details/123736369

版权

debug经历同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

vuetify v-switch 点击Switch开关弹出对话框确认后再改变switch开关状态

目标：点击switch组件之后，弹出一个Dialog，然后后这个dialog做判断，再决定这个switch是否变化。

在网上一直搜到的是element-ui，以及都是用的$confirm，但我的需求是要有一个dialog，实在没办法了。

解决：在v-switch 上加disabled，使之不能点击。在v-switch外面套一层<div>。在这个div的地方绑定@click，这个click是开启dialog的，然后后面根据dialog的选择直接改变绑定在v-switch的值。

<div class="d-flex justify-space-between" @click="handleSwitch(i)">
	<v-switch
		v-model="item.flag"
        disabled
    ></v-switch>
</div>

优惠劵

不要假努力

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vuetify v-switch 点击Switch开关弹出对话框确认后再改变switch开关状态

vuetify v-switch 点击Switch开关弹出对话框确认后再改变switch开关状态。
复制链接

扫一扫

专栏目录

knitter-switch新型开关达3000次以上寿命

12-01

欧洲开关制造商knitter-switch日前宣布推出DBS3000-VM双列直插(DIP)开关，这是专门为多种消费者及工业产品应用设计的。 DBS3000-VM采用了自主设计，重要的一点是，保证开关不会在PCB上面歪斜。该公司表示，这是...

【Vue】1.ElementUI中el-switch开关切换改变值遇到的问题

返璞归真

02-27

2883

这样遇到的问题是：切换开关，el-switch会立即改变值，不会根据传入的值改变，因为v-model是双向绑定的。需求：在切换开关的时候给个提示，确定切换开关就改变值，取消就不改变开关值。解决办法：把v-model换成:value。

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

antd vue中的switch自定义传参问题解决

AnNong

09-07

1788

<a-select @change="checked=> handleChange(checked, record)"> </a-select> 以上代码即可解决传递自定义参数问题

vuetify3 弹窗中使用 element-plus 时间控件异常解决

最新发布

qq_26408545的博客

03-21

431

【代码】vuetify3 弹窗中使用 element-plus 时间控件异常解决。

react + Ant design项目中，使用Menu+Switch时遇到的问题

发果叁

06-09

958

这个标题我实在是不知道该怎么起，之前一直在搞的vue的项目，react之前用的时候写的是很简单的，最近的一个react项目，前端部分从项目搭建到页面实现基本全是我一个人完成。前端UI组件使用的是Ant Design。我进行刷新操作，发现仍是不起作用，然后我就想不明白，于是我又仔细看了一下代码，发现了Menu.Item的key我使用的是我map的时候的下标，而不是路由，我改了之后，它就好了。 2. 因为做的是一个后台管理系统，所以就涉及到权限问题，我们的menu是通过antd的Switch来控制是否显示权

前端问题集（1）：Ant Design Vue 中 switch 实现前端修改用户状态不需要重新请求后台数据

Yooao的博客

06-26

4943

今天在自建系统编码时，发现在前端页面通过 switch 按钮实现用户状态切换时，涉及到实时刷新和如何减少后台请求次数的问题，这里记录一下我自己的解决方法。

Vue-v-if及switch的使用

qq_36008278的博客

03-09

3949

首先讲下v-for <meta charset="utf-8">  <script src="js/vue.js"></script> <title> vue的实例</title> </head> <body>  <div id="app"> <!--v-pre:不

Vuetify—— 使用v-switch组件

月来better

05-25

1083

v-switch组件的使用过程中，鼠标悬停上方时，会出现圆圈浮层，如何去掉此效果呢？使用ripple，其默认值是true，将其设置成false即可 <v-switch inset :label="`Switch 1: ${switch1.toString()}`" class="switch_btn" :ripple="false" v-model="switch1" ></v-switch> vuetify v-switch组件官方文档地址：h

vue 点击Switch开关弹出对话框确认后再改变switch开关状态

weixin_42264750的博客

06-08

991

最近在搞vue的前端开发，遇到一个问题，就是列表中有一列状态开关，点击后会弹出确认框，确认的话抵用js逻辑后改变状态，取消就不做操作。但是，在我还没确认，开关按钮是已经改变了的，如果点击取消，本应该不做操作的，也就是实际应该还是关闭状态，但页面却已经显示为打开状态。在说一下input的value属性，在组件内部要定义一个value的props属性，以便能够动态绑定上父组件传过来的值；v-model是动态绑定值到value，然后监听input的事件获取值后赋给inputValue的一个过程。

ElementUI el-switch开关在消息框Messagebox确认后再作修改

weixin_44466651的博客

09-27

2094

业务场景有这么一个开关，在点击时不即时作出变化，而是弹出一个消息弹窗，进行Confirm后再决定是否改变其绑定的值。 before: Click case “确定”: 源码分析在组件点击时触发该事件，即若组件未disabled则执行handleChange方法再看到handleChange这个方法，首先是获取修改后的绑定值，然后向父组件emit input和change事件。 as we all know，该组件是使用v-moel绑定checked的值的。回顾v-model 在 Vue 2

【elementUI】switch确认后再改变状态 switch回调

02-02

3884

switch只有个change事件，但很多时候我们是需要用户确认后再去改变状态的，解决办法就是在调用change时把switch绑定的值的父级对象当参数，然后在change的回调里执行取反 <el-switch v-model="form.isShow" @change="changeSwitch(form)"></el-switch> export default { data () { form: { isShow: true } }, methods: {

vant 列表【增删改查】和表单

cmmboy1990的博客

06-17

1629

vant 列表【增删改查】和表单 1.列表  <template> <div class="container" style="background-color: #ddd"> <van-nav-bar title="测试标题" left-text="返回" left-arrow @click-left="onClickLeft"

layui switch 开关监听弹出确定状态转换的例子

10-16

今天小编就为大家分享一篇layui switch 开关监听弹出确定状态转换的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

电源技术中的基于DPA-Switch的四路输出开关电源设计

10-21

本文提出了基于该器件小功率四路输出的单端正激式开关电源设计方案，给出了简化设计步骤和参数计算。　1 引言　单片开关电源集成电路具有高集成度、高性价比、外围电路简单等特点，可构成高效率、无工频变压器的...

knitter-switch推出具备ESD保护功能彩色按键开关

12-01

欧洲开关制造商能德(knitter-switch)日前推出两种尺寸的彩色按钮(button cap)，用于公司的ESP系列按键开关。KA4100/5100系列按钮有七种不同颜色可供选择：黄、红、绿、蓝、灰、白和黑色，直径包括4毫米或者5毫米两款...

ant design vue a-table表格中插入操作按钮（以switch开关 [a-switch]为例）

LL__Sunny的博客

07-24

4068

ant design vue a-table表格中插入操作按钮（以switch开关 [a-switch]为例）

关于el-switch开关无法点击的问题

qq_42453751的博客

11-12

4900

关键知识点this.$forceUpdate() 介绍this.$forceUpdate()：是vue里面强制刷新的方法，一般用在数据层次太多，render函数无法自动更新，这时候需要手动更新，this.$forceUpdate()以此来更新数据和视图，触发updated生命周期,常用于for循环很多的时候或者嵌套很深的结构里面注意：1.一般如果el-switch默认值没有赋值的话，也有可能导致开关无法点击，这时候给value一个默认值可以解决 2.开关无法点击的情况也有可能是z-index的原因，此时

ant design的Switch组件的坑，怎么更改Switch的状态?

清颖的博客

11-19

8211

文章目录不能更改状态？错误示范：更改状态后，Switch以下的其他组件也被重置，错误示范：正确代码：用Switch时，怎么都改不了状态；要么就是切换页面时，再回本页，选择的值不见了；还有，切换Switch时，怎么把其他表单项给重置了呢？重点：使用setFieldsValue更改取值；使用defaultChecked确定默认值。看下错误代码，你是否犯过该类问题呢？如果有其他问题，欢迎评论区留言，一起讨论。不能更改状态？错误示范： this.state={ show:false } <Form.

ant_design switch按钮点击没反应

weixin_49992414的博客

06-20

408

接口用common返回key和text,由于不是用true和false返回，所以需要转一下，用val存放true和false，key10为true、20为false，就不会有按钮没反应的情况了。

el-switch点击后如何弹出对话框且页面上的开关不动点击确定后开关再变动

06-07

要实现这个功能，你可以使用以下方法： 1. 在 el-switch 组件上添加一个点击事件，当用户点击开关时触发该事件； 2. 在事件处理函数中，弹出一个对话框，并将该开关的状态保存到一个变量中； 3. 在对话框中添加一个确定按钮，在用户点击确定按钮时，更新该开关的状态，并关闭对话框。在更新开关状态时，需要判断该开关之前的状态与当前状态是否一致，如果一致则不需要再次更新状态，否则会导致开关状态的错误变化。以下是一个简单的示例代码（假设你在 Vue.js 框架中使用 el-switch 组件）： ```html <template> <div> <el-switch v-model="switchValue" @change="handleSwitchChange"></el-switch> <el-dialog :visible="dialogVisible" @close="handleDialogClose"> <span slot="title">确认</span> <div>确定要改变开关状态吗？</div> <span slot="footer"> <el-button @click="handleDialogClose">取消</el-button> <el-button type="primary" @click="handleDialogConfirm">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { switchValue: false, dialogVisible: false, originalSwitchValue: false }; }, methods: { handleSwitchChange(value) { // 记录原始状态 this.originalSwitchValue = value; // 显示对话框 this.dialogVisible = true; }, handleDialogClose() { // 关闭对话框时，恢复原始状态 this.switchValue = this.originalSwitchValue; this.dialogVisible = false; }, handleDialogConfirm() { // 确认改变状态时，更新开关状态 this.dialogVisible = false; if (this.switchValue !== this.originalSwitchValue) { // 发送请求更新开关状态 // ... } } } }; </script> ```

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交