for the same requirement, no realizable method for directly manipulating switch is found, and other methods are selected to implement it. The method is as follows:
<div class="switch-box">
<div class="zhe" @click="handlestatus(index)"></div>
<i-switch v-model="item.enable"></i-switch>
</div>
JS part
handlestatus(index) {
this.navList[index].enable = !this.navList[index].enable;
let s = this.navList[index].enable;
if (s) {
if (this.showNavLeng >= 5) {
this.navList[index].enable = false;
this.$Message.warning('5');
return;
}
this.showNavLeng += 1;
} else {
this.showNavLeng -= 1;
}
}
CSS part
.switch-box {
position: relative;
}
.switch-box > div.zhe {
position: absolute;
top: 0;
left: 0;
width: 44px;
bottom: 0;
z-index: 1;
}
iview has no corresponding function to control, but you can use the disabled property to simulate
<i-switch v-model="switch1" @on-change="change" :disabled="!(disabled && switch1)"/>
data () {
return {
switch1: true,
disabled: true
}
},
methods: {
change (status) {
this.disabled = false
}
}
< H2 > 17:30 add < / H2 >
according to the link you sent, I thought that the before-change event had been added at first, but looking at the document, the source code did not find the corresponding content, checked the next three versions of the version update, and did not find the update content of the switch component before-change
iviewPromisePromise
truefalsefalsetruetrue300ms()false
false
value v-model
:
v-model
iViewSwitchSwitchisControlledtogglecurrentValue
iViewSwitchhandleTogglebeforeChange
.
roughly explain why: unless the form is submitted, all data binding scenarios should be one-way binding, that is, based on remote server data, to update the state,-driven UI update of the store/ page. But the problem encountered here is that after the switch value is changed, it retains a state in which the value is cached inside the control, and the whole page will not be cleaned from memory without refreshing this state, resulting in a zombie-like state.
here is the solution: use before-change to prevent on-change events and ensure that switch does not trigger internal changes. Refer to the official example:
//
......
// on-change
return new Promise(resolve => {
return false
})
then
