el-switch点击后弹出弹框为什么开关就立即变状态,如何让点击弹框的确定后再改变状态
时间: 2024-03-09 12:44:21 浏览: 94
BootstrapSwitch将复选框和单选按钮变成切换开关
el-switch组件的点击事件和状态改变事件是独立的,因此默认情况下,点击弹框中的确定按钮和开关状态会同时改变。如果你想让开关状态在确定按钮被点击后再改变,可以通过以下步骤实现:
1. 在el-switch组件上添加一个自定义属性,例如`is-clicked`,用于标记是否点击过开关。
2. 将el-switch的`v-model`绑定到一个变量上,例如`switchValue`。
3. 在点击switch时,判断`is-clicked`属性是否为true,如果为false,则将其设置为true,并且不改变`switchValue`的值。如果为true,则直接改变`switchValue`的值。
4. 在弹框的确定按钮被点击后,设置`is-clicked`属性为false,并且改变`switchValue`的值。这样就能够保证开关状态在确定按钮被点击后再改变了。
示例代码如下:
```html
<el-switch v-model="switchValue" :is-clicked="false" @change="handleChange"></el-switch>
```
```javascript
export default {
data() {
return {
switchValue: false
}
},
methods: {
handleChange(val) {
if (!this.isClicked) {
this.isClicked = true
} else {
this.switchValue = val
}
},
handleConfirm() {
this.isClicked = false
this.switchValue = !this.switchValue
}
}
}
```
阅读全文