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()
	}
}
相关推荐
华仔啊6 小时前
35岁程序员失业了,除了送外卖,还能做什么?
前端·后端·程序员
Mintopia7 小时前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia7 小时前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo7 小时前
🔔 Flutter 本地通知: 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊7 小时前
一、redis安装(单机)和使用
前端·数据库·redis
江城开朗的豌豆7 小时前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
天蓝色的鱼鱼7 小时前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
江城开朗的豌豆7 小时前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..7 小时前
VUE工程化开发模式
前端·javascript·vue.js
_oP_i7 小时前
dify之Web 前端工作流编排(Workflow Builder)
前端·dify