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

html 复制代码
// 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>
javascript 复制代码
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()
	}
}
相关推荐
晚星star1 分钟前
2.2 Node的模块实现
前端·node.js
zYear2 分钟前
Three.js 入门指南:揭开 3D 网页的魔法面纱
前端
Crystal3284 分钟前
图片懒加载
前端·javascript·代码规范
Revol_C19 分钟前
开箱即用!轻量级轮询方案,支持同步获取轮询结果!
前端·javascript·设计模式
38242782732 分钟前
python:正则表达式
前端·python·正则表达式
用户479492835691540 分钟前
我是怎么把模型回复用tts播放的更自然的
前端
JS_GGbond40 分钟前
前端崩溃监控:给网页戴上“生命体征监测仪”
前端
俊劫41 分钟前
AI 编码技巧篇(内部分享)
前端·javascript·ai编程
Maxkim42 分钟前
一文读懂 Chrome CRX📦:你需要了解的核心知识点
前端·前端工程化
JackJiang43 分钟前
AI大模型爆火的SSE技术到底是什么?万字长文,一篇读懂SSE!
前端·websocket