elementUI_el-radio踩坑_设置点击事件会触发两次
chooseIdClick方法无需执行两次,仅需要在input点击时触发即可;当运行时,点击按钮,发现chooseIdClick方法执行了两次;我发现elementUI的el-radio标签在封装过程中是这样的。使用了elementUI的单选按钮,点击按钮时对数据进行校验。方法是添加在label标签上的;所以用户点击之后的执行是这样的。......
·
问题描述
使用了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>
-
chooseIdClick(val){ if(!this.form.prdouct_info.length){ this.$message.warning('请先选择产品~') return } if(val==1){ this.visible1 = true }else{ this.visible2 = true } }
问题
当运行时,点击按钮,发现chooseIdClick方法执行了两次;
原因
与lable标签的默认事件有关
我发现elementUI的el-radio标签在封装过程中是这样的
-
<label> <span> <input type='radio' /> </span> <span> 手动选择 </span> </label>
-
方法是添加在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>
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
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)