共计 621 个字符,预计需要花费 2 分钟才能阅读完成。
<el-popconfirm> + <el-switch> 应用
业务场景,点击音讯告诉开关之后 switch 的状态仍然是蓝色(open 状态),跳出一个弹出确认的窗口,当点击确认后,确认窗口敞开,switch 状态变为灰色
重点是管制 switch
应用 <el-switch>+<el-popconfirm> 来实现下面场景的交互。重点是管制 el-switch 的状态(即何时扭转 el-switch 的数据)
1、将 el-switch 的 v -model 换成:value,让数据单向流动,这样点击 el-switch 的时候就不会间接批改 el-switch 的绑定值。(不会变为灰色)。
2、用 el-popconfirm 包裹 el-switch。留神 element-ui 的版本,晚期版本的 element-ui 用的是 onConfirm 事件,前期改成了 confrim 事件。
参见此文[《[Vue] el-popconfirm confirm 事件生效》](https://segmentfault.com/a/1190000042028689)
到这里曾经实现了当点击确认后,确认窗口敞开,switch 状态变为灰色。
想做的更好,还能够往下实现仅在 switch 由 true 变成 false 的时候呈现 el-popconfirm 的弹窗二次确认。(实现这个要求须要一点巧思)
完结。
同步更新到本人的语雀
https://www.yuque.com/dirackeeko/blog/yp0ugx1zgirlpl0p
正文完