el-switch点击后弹出提示框,点击提示框中的确定,再改变开关状态
时间: 2023-11-18 22:21:30 浏览: 353
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
你可以在el-switch组件的change事件中,弹出一个提示框,当用户点击确定时,再改变开关状态。具体实现步骤如下:
1. 在el-switch组件上添加一个自定义属性,例如`is-confirm`,用于标记是否已经确认过。
2. 将el-switch的`v-model`绑定到一个变量上,例如`switchValue`。
3. 在el-switch的change事件中,判断`is-confirm`属性是否为true,如果为false,则弹出提示框,并且不改变`switchValue`的值。如果为true,则直接改变`switchValue`的值。
4. 在弹框的确定按钮被点击后,设置`is-confirm`属性为true,并且改变`switchValue`的值。这样就能够保证开关状态在确定按钮被点击后再改变了。
示例代码如下:
```html
<el-switch v-model="switchValue" :is-confirm="false" @change="handleChange"></el-switch>
```
```javascript
export default {
data() {
return {
switchValue: false
}
},
methods: {
handleChange(val) {
if (!this.isConfirm) {
this.$confirm('确定要改变开关状态吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.isConfirm = true
this.switchValue = val
}).catch(() => {
this.switchValue = !val
})
} else {
this.switchValue = val
}
}
}
}
```
这样,当用户点击开关时,会先弹出提示框,当用户点击确定后再改变开关状态。如果用户点击取消,则开关状态不会改变。
阅读全文