Vue iview Selece下拉框内部套用Radio 点选按钮（change阻止默认事件问题）

最新推荐文章于 2024-12-29 01:08:42 发布

原创最新推荐文章于 2024-12-29 01:08:42 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #view design #前端

VUE 同时被 2 个专栏收录

30 篇文章

订阅专栏

html

2 篇文章

订阅专栏

文章探讨了在Vue.js应用中，Select下拉框内部包含Radio点选按钮时，如何阻止事件冒泡，确保Select的change事件和Radio的click事件能正确处理。通过添加`@click.stop.native.prevent`修饰符，可以有效地阻止事件冒泡并防止错误报错，从而实现Select与Radio的交互功能。

主要问题点：Select 和 Radio组件的均为change事件，如何阻止冒泡。
原本以为是阻止change事件，但后来才意识到，其实应该阻止的是默认点击事件

解决方案如下：

使用事件 @click.stop.native.prevent 解决
(使用@click.stop 或者 @click.prevent都无效，直接报错还阻止不了事件)

<Select
	v-model.trim="data[index].source"
	size="small"
	placehold="选择字段"
	transfer
	filterable
	@on-click.stop
	@on-change="changeField(index)"
>
	<Option v-for="(item, sourceIndex) in sourceList" :value="item.columnName" :key="sourceIndex" :label="item.columnName">
    {{ item.columnName }}
		<RadioGroup
			type="button"
			button-style="solid"
			style="float: right"
			@on-click.stop.native.prevent
			@on-change="(data) => changeRadioGroup(data, index, 'changeSourceType')"
			size="small"
		>
			<Radio label="DATE">字符串</Radio>
			<Radio label="INT">数字</Radio>
			<Radio label="VARCHAR">时间</Radio>
		</RadioGroup>
	</Option>
</Select>

如图显示

在这里插入图片描述