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()
	}
}
相关推荐
css趣多多4 小时前
ctx 上下文对象控制新增 / 编辑表单显示隐藏的逻辑
前端
_codemonster4 小时前
Vue的三种使用方式对比
前端·javascript·vue.js
寻找奶酪的mouse4 小时前
30岁技术人对职业和生活的思考
前端·后端·年终总结
梦想很大很大4 小时前
使用 Go + Gin + Fx 构建工程化后端服务模板(gin-app 实践)
前端·后端·go
We་ct4 小时前
LeetCode 56. 合并区间:区间重叠问题的核心解法与代码解析
前端·算法·leetcode·typescript
张3蜂4 小时前
深入理解 Python 的 frozenset:为什么要有“不可变集合”?
前端·python·spring
无小道4 小时前
Qt——事件简单介绍
开发语言·前端·qt
广州华水科技4 小时前
GNSS与单北斗变形监测技术的应用现状分析与未来发展方向
前端
code_YuJun4 小时前
corepack 作用
前端
千寻girling5 小时前
Koa.js 教程 | 一份不可多得的 Node.js 的 Web 框架 Koa.js 教程
前端·后端·面试