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()
	}
}
相关推荐
步行cgn4 小时前
Vue 中的数据代理机制
前端·javascript·vue.js
GH小杨4 小时前
JS之Dom模型和Bom模型
前端·javascript·html
星月心城5 小时前
JS深入之从原型到原型链
前端·javascript
你的人类朋友5 小时前
🤔Token 存储方案有哪些
前端·javascript·后端
烛阴5 小时前
从零开始:使用Node.js和Cheerio进行轻量级网页数据提取
前端·javascript·后端
liuyang___6 小时前
日期的数据格式转换
前端·后端·学习·node.js·node
贩卖纯净水.7 小时前
webpack其余配置
前端·webpack·node.js
码上奶茶7 小时前
HTML 列表、表格、表单
前端·html·表格·标签·列表·文本·表单
抹茶san7 小时前
和 Trae 一起开发可视化拖拽编辑项目(1) :迈出第一步
前端·trae