el-dropdown改成鼠标右键触发下拉菜单

m0_68937827

于 2024-06-19 14:00:45 发布

阅读量152

点赞数 4

文章标签： vue 前端 elementui

本文链接：https://blog.csdn.net/m0_68937827/article/details/139800834

版权

// handleChange鼠标右键才会触发
<div v-for="(item, index) in list" :key="index" @click.right.prevent="handleChange(item)">
	// 将trigger设置成manual，去掉默认触发拉下菜单的行为，添加ref
	<el-dropdown trigger="manual" :ref="`dropdown${item.id}`">
		<div class="tb-dropdown">
			<span>{{ item.code }}</span>
		</div>
		<el-dropdown-menu slot="dropdown" class="lang-select-dropdown">
			<el-dropdown-item command="0">黄金糕</el-dropdown-item>
			<el-dropdown-item command="1">狮子头</el-dropdown-item>
		</el-dropdown-menu>
	</el-dropdown>
</div>

data() {
	return {
		list: [
			{id: 1, code: 1},
			{id: 2, code: 2},
		]
	}
},
methods: {
	handleChange(item) {
		const name = `dropdown${item.id}`
		// 将触发的选择显示；show
		this.$refs[name][0].show()
	}
}