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()
	}
}
相关推荐
xiaotao1315 小时前
03. 原子化 CSS 思想
前端·css·tailwind
小小亮015 小时前
qiankun的面试题
前端
爱宇阳5 小时前
Nuxt4 + Tailwind CSS v4 自定义响应式断点完整指南
前端·css·nuxt4
Jutick6 小时前
揭秘低延迟:WebSocket 实时行情如何拯救你的量化策略?——Python 生产级实现
前端
~欲买桂花同载酒~6 小时前
项目优化-vite打包优化
前端·javascript·vue.js
林夕sama6 小时前
多线程基础(五)
java·开发语言·前端
我叫蒙奇6 小时前
husky 和 lint-staged
前端
kyriewen6 小时前
JavaScript 继承的七种姿势:从“原型链”到“class”的进化史
前端·javascript·ecmascript 6
穷鱼子酱6 小时前
ElSelect二次封装组件-实现分页(下拉加载、缓存)、回显
前端
科科睡不着6 小时前
拆解iOS实况照片📷 - 附React web实现
前端