欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 金融 > el-dropdown改成鼠标右键触发下拉菜单

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

2024/11/30 9:00:10 来源:https://blog.csdn.net/m0_68937827/article/details/139800834  浏览:    关键词:el-dropdown改成鼠标右键触发下拉菜单
// 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>
data() {return {list: [{id: 1, code: 1},{id: 2, code: 2},]}
},
methods: {handleChange(item) {const name = `dropdown${item.id}`// 将触发的选择显示;showthis.$refs[name][0].show()}
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com