iview使用i-switch 触发 beforeChange

好久没有更新，最近遇到一个坑，搞了很久才明白beforeChange的使用，建议小伙伴遇到问题时，首先要学会查iview api文档中switch组件的使用说明

• PS: before-change是switch的属性(一定要理解这点哦~~~)， 通过返回Promise，可以阻止切换,属性调用如下方法:before-change="handleBeforeChange" //不可带参数，那如何切换的传入参数呢？

handleBeforeChange(){
   return new Promise(resolve =>{
 	 resolve()
   })
}

通过render函数渲染使用，基于如何获取传入参数，在点击click事件之前就需要获取到参数，此时便想到通过触发mousedown事件(mousedown事件优先于click事件执行)，定义变量currWid,currStatus来接受参数，代码如下：

<i-switch
    value={row.status}
    onInput={(val) => {
      row.status = val;
    }}
    nativeOnMousedown={() => {
      vm.handelOnMounseDown(row.wid, row.status);
    }}
    trueValue="1"
    falseValue="0"
    beforeChange={vm.handleBeforeChange}
  >
    <span slot="open">开</span>
    <span slot="close">关</span>
</i-switch>

   //i-switch 开启 or 关闭 转换数据
    handelOnMounseDown(wid, status) {
      this.currWid = wid;
      this.currStatus = status === "1" ? false : true; //开启或关闭 true 开启 ， false 关闭
    }
    
    ## i-switch 开启 or 关闭 返回返回promise对象时则可以切换switch的状态，若什么都不返回则不可切换switch状态
    handleBeforeChange() {
      return new Promise(async (resolve) => {
        const [err, res] = await switchApi({ //调用接口 
          apiWid: this.currWid,
          status: this.currStatus,
        });
        if (err) {
          this.$Message.error(err.errmsg);
          return;
        }
        this.$Message.success("操作成功");
        resolve();
      });
    },

好了，简单的记录一下，若能帮助遇到同样问题的小伙伴，也是一件收获啦哈~~ 每日学习一丢丢，做一个有趣的小菜鸟~~~ ，你若觉得可以，顺手点赞吧，一个小小的动作便是给予小菜鸟的肯定哟~