当我们在使用v-model的时候,虽然我们点击确认框的“取消”,是先又原来的开关切换状态,再切换回去。因为v-model再点击的时候已经改变了el-switch的状态了,取消时再将值变回去。如下图所示:会有一个切换的动画状态。
<template>
<div class="home">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="开"
inactive-text="关"
@change="handleChange"
>开关</el-switch>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
value: true
};
},
methods: {
handleChange () {
this.$confirm('关闭后可能导致问题', '确定关闭吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//
}).catch(() => {
this.value = true;
});
}
}
}
</script>
而使用:value进行数据绑定,则展示形式又大不相同了。
:value没有改变值,所以不会有过渡状态。
<template>
<div class="home">
<el-switch
:value="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="开"
inactive-text="关"
@change="handleChange"
>开关</el-switch>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
value: true
};
},
methods: {
handleChange () {
this.$confirm('关闭后可能导致问题', '确定关闭吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//
}).catch(() => {
// this.value = true;
});
}
}
}
</script>
个人感觉还是用:value比较好~~