elementUI_el-radio踩坑_设置点击事件会触发两次

问题描述

使用了elementUI的单选按钮，点击按钮时对数据进行校验

• [1]若校验成功，则打开弹框；
• [2]若是校验失败，则给出提示；

代码实现

• <el-radio-group v-model="switch">
      <el-radio border :label='1' @click.native='chooseIdClick(1)'>手动选择el-radio>
      <el-radio border :label='2' @click.native='chooseIdClick(2)'>手动输入el-radio>
  el-radio-group>
  1
  2
  3
  4

• chooseIdClick(val){
      if(!this.form.prdouct_info.length){
        this.$message.warning('请先选择产品~')
        return
      }
      if(val==1){
        this.visible1 = true
      }else{
        this.visible2 = true
      }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

问题

当运行时，点击按钮，发现chooseIdClick方法执行了两次；

• 

原因

与lable标签的默认事件有关

我发现elementUI的el-radio标签在封装过程中是这样的

• <label>
      <span> <input type='radio' /> span>
      <span> 手动选择 span>
  label>
  1
  2
  3
  4

• 方法是添加在label标签上的；

所以用户点击之后的执行是这样的

• 点击按钮
  • [1]点击了label标签，触发chooseIdClick方法；
  • [2]点击了label标签，label标签与input标签关联 ->相当于点击input->input通过冒泡触发了chooseIdClick方法；
• 因此一共触发了两次chooseIdClick方法；

解决

chooseIdClick方法无需执行两次，仅需要在input点击时触发即可；

<el-radio-group v-model="switch">
    <el-radio border :label='1' @click.native='chooseIdClick($event,1)'>手动选择el-radio>
    <el-radio border :label='2' @click.native='chooseIdClick($event,2)'>手动输入el-radio>
el-radio-group>
1
2
3
4

chooseIdClick(e,val){
    if(e.target.tagName != 'INPUT'){
        return
    }
    if(!this.form.prdouct_info.length){
      this.$message.warning('请先选择产品~')
      return
    }
    if(val==1){
      this.visible1 = true
    }else{
      this.visible2 = true
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14