Vue.js 使用定时任务实现 el-switch 状态回弹 - 5 秒后恢复初始值

<el-switch style='display: inline-block' v-model='checked' active-color='#ff4949' inactive-color='#0fbdf0' @change='openAccess()'> methods: { openAccess() { this.originalChecked = this.checked; w51_event('changeAccess', this.id + '_' + this.checked); setTimeout(() => { this.checked = this.originalChecked; }, 5000); }, }, data: function () { return { checked: true, status: '', id: '--', originalChecked: true, }; }, 为了实现点击 openAccess() 后，让 checked 状态在 5 秒后回到初始值，可以使用定时任务和一个临时变量来实现。首先，在 data 中添加一个临时变量 originalChecked，用来保存初始值。修改 openAccess() 方法，在调用 w51_event() 前，将 checked 的值赋给 originalChecked。然后使用 setTimeout() 函数，在 5 秒后将 checked 的值回到 originalChecked。修改后的代码如下： ```javascript <el-switch style='display: inline-block' v-model='checked' active-color='#ff4949' inactive-color='#0fbdf0' @change='openAccess()'> </el-switch> methods: { openAccess() { this.originalChecked = this.checked; w51_event('changeAccess', this.id + '_' + this.checked); setTimeout(() => { this.checked = this.originalChecked; }, 5000); }, }, data: function () { return { checked: true, status: '', id: '--', originalChecked: true, }; }, 这样，当点击 openAccess() 时，checked 状态会在 5 秒后回到初始值。