el-switch實現邏輯判斷後再改變狀態

必須要給switch組件設置disable禁用掉，不然點擊時就會改變switch開關的值，實現不了想要的效果

<el-switch
      v-model="autoUpdate"
      style="margin-top:200px"
      active-color="#5eb058"
      inactive-color="#cccccc"
      :disabled='true'
      @click.native="handleUpdate(autoUpdate)"
    ></el-switch>

// 點擊開啓開關
    handleUpdate(autoUpdate) {
      if (!autoUpdate) {
        this.$confirm('是否更改按鈕狀態?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.autoUpdate = true;
        })
      } else {
        this.$confirm('是否更改按鈕狀態?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.autoUpdate = false;
        })
      }
    }

樣式也很關鍵,因爲禁用了,鼠標懸停顯示狀態需要修改

<style lang="less">
.el-switch.is-disabled .el-switch__core,
.el-switch.is-disabled .el-switch__label {
  cursor: pointer;
}
</style>