elementui switch 开关,做点击确认按钮后在进行开关

一开始这么想的:
获取switch的点击事件,在点击后先做确认操作。
但是element没有封装switch的点击事件,只有一个change事件。
然后想着用jquery获取switch这个dom,先截获点击操作,确认后再触发change事件或者直接修改switch的value值。
但是这样要引入jq,好像说vue里引入jq理念不符,vue不喜欢直接操作dom(但是这个使用场景中,我觉得引入jq没问题,毕竟还是有需要直接操作dom的地方),这里我还是不太理解

附上前辈自己封装的函数:思路是,在点击switch后,先把change的状态改变回原本状态,确认之后再修改状态。(其实我一开始有这么想,只是在想有没有通用的封装方法,但还是搞复杂了。。。)
https://www.cnblogs.com/tlfe/p/11710423.html

应用:

    // ******************************************监听 switch 开关状态的改变
    async userStateChanged(userinfo) {
      userinfo.mg_state = !userinfo.mg_state
      const confirmResult = await this.$confirm(
        '此操作将跟新用户使用状态,是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('取消了更新!')
      }
      const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
      if(res.meta.status !== 200) {
        return this.$message.error('更新用户状态失败!')
      }
      userinfo.mg_state = !userinfo.mg_state
      this.$message.success('更新用户状态成功!')
    },

你可能感兴趣的:(elementui switch 开关,做点击确认按钮后在进行开关)