位置: IT常识 - 正文
给饿了么Radio 单选框添加点击事件（vue2）(饿了么指定单)
编辑：rootadmin推荐整理分享给饿了么Radio 单选框添加点击事件（vue2）(饿了么指定单)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:饿了么单聊,饿了么指定单,饿了么怎么设置单量,饿了么接单提示音怎么设置,饿了么接单提示音怎么设置,饿了么指定单,饿了么单聊,饿了么单聊,内容如对您有帮助，希望把文章链接给更多的朋友！
最近有一个这样的需求，当点击不合格时打开一个弹窗进行不合格数据的录入。问题点在于当你想对不合格数据进行修改时，点击不合格是没有反应的；因为Radio 单选框只提供了一个change 事件
解决这里说明一下，项目是vue2的项目，写这个demo是vue3的项目。但是两者的情况有些不一样。
问题1vue2
<el-radio-group v-model="result"> <el-radio :label="0" @click.native="radioClick">不合格</el-radio> <el-radio :label="1">合格</el-radio></el-radio-group>vue3
<el-radio-group v-model="result"> <el-radio :label="0" @click="radioClick">不合格</el-radio> <el-radio :label="1">合格</el-radio></el-radio-group>在这里也发现了我的一个误解，@click 本质是一个自定义事件，只是与原生的点击事件功能上是一致的。 在vue2中有这样一句话 所以在vue2中直接@click是不生效的，因为Radio 单选框没有提供这样的事件；但是加上.native修饰符后这就是原生事件了，因此点击事件会生效。
在vue3中直接使用@click生效是因为vue3中移除了.native修饰符，@click默认就是原生的点击事件
问题2
点击事件解决了，但是该事件每次都会被触发两次。原因是因为el-radio被封装了好几层，根元素不是input，解决是在后面添加prevent
//vue2 <el-radio :label="0" @click.native.prevent="radioClick">不合格</el-radio> //vue3 <el-radio :label="0" @click.prevent="radioClick">不合格</el-radio>至于为什么使用prevent可以解决这个问题，暂时没有找到原因
问题3点击问题解决了，触发两次解决了，但是加上prevent后，单选框是无法被选中的。 解决：手动进行赋值
const radioClick = () => { result.value = 0; console.log('点击了', result.value);};最终方案看上面的动图其实可以看到还是有点小问题的，手动赋值后选中状态多了一圈，要在旁边空白地方点击一下才能变成正常的选中状态。如果不介意的话，这样就可以了，比较很简单。
还有一种解决方案，指令（yyds）
vue2
directives: { radioClick: { bind(el,binding) { // console.log(el); console.log(el.getElementsByClassName('el-radio__original')[0].getAttribute('value')); if(el.getElementsByClassName('el-radio__original')[0].getAttribute('value') == 2) { el.getElementsByClassName('el-radio__original')[0].addEventListener('click',() => { console.log('点击了',binding.value); }); } } } },vue3
const vRadioClick = { mounted: (el, binding) => { if (el.getElementsByClassName('el-radio__original')[0].getAttribute('value') == 0) { el.getElementsByClassName('el-radio__original')[0].addEventListener('click', () => { console.log('点击了', binding.value); }); } }};补充本来以为上面就解决了，原来小丑竟然是自己。在指令中是无法获取到this 的，查了下需要借助指令的第三个参数
vnode.context 就是我们需要的 this
下一篇：【微信小程序】WXSS和全局、页面配置(微信小程序制作)
