element el-radio 点击触发两次问题

解决:

// html
<el-radio-group v-model="radio" @click.native="click">
    <el-radio :label="1" >备选项</el-radio>
    <el-radio :label="2">备选项</el-radio>
</el-radio-group>
// js
click(ev){
    if (ev.target.tagName === "INPUT") return
}

因为原生click事件会执行两次,第一次在label标签上,第二次在input标签上

此方法也适用于其他element组件

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-popconfirm是element-ui中的一个组件,用于在用户执行某个操作时进行确认提示。而el-radioelement-ui中的单选框组件。 要实现el-popconfirm内嵌el-radio,可以将el-radio作为el-popconfirm的内容插槽(slot)的一部分。这样,在用户点确认按钮时,可以获取el-radio组件的选中值,从而实现更复杂的操作。具体的代码示例如下所示: <el-popconfirm title="确认要执行操作吗?" confirmButtonText="确定" cancelButtonText="取消" @confirm="handleConfirm" > <el-radio-group v-model="radioValue"> <el-radio :label="1">选项1</el-radio> <el-radio :label="2">选项2</el-radio> <el-radio :label="3">选项3</el-radio> </el-radio-group> </el-popconfirm> 在上述代码中,el-popconfirm的title属性设置了确认提示的文本内容,confirmButtonText和cancelButtonText属性分别设置了确认按钮和取消按钮的文本内容。@confirm事件绑定了一个名为handleConfirm的方法,该方法会在用户点确认按钮时触发el-radio-group组件绑定了一个名为radioValue的v-model,用于双向绑定选中的值。el-radio组件的label属性设置了各个选项的值。 通过这样的方式,el-popconfirm和el-radio可以实现内嵌的效果,当用户点确认按钮时,可以在handleConfirm方法中获取到el-radio选中的值,从而进行相应的操作。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [el-drawer的入门学习](https://blog.csdn.net/qq_40765784/article/details/126464517)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [elementUi vue el-radio 监听选中变化的实例代码](https://download.csdn.net/download/weixin_38674223/12940007)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值