[学习笔记]vue右键在新标签页中打开链接
客户需求:tab标签点击右键时,需要有打开新标签页的选项。原本的tab标签用的element组件el-tab,因为渲染之后是div,所以不会有打开新标签页的选项,带有href的a标签才会有这个选项。而标签的内容又是在el-tab-pane的label里定义的,不是很好改。最后通过获取鼠标右击事件来动态添加a标签,从而使得右键菜单支持打开新标签页。用到了@contextmenu<el-tabs
·
客户需求:tab标签点击右键时,需要有打开新标签页的选项。
原本的tab标签用的element组件el-tab,因为渲染之后是div,所以不会有打开新标签页的选项,带有href的a标签才会有这个选项。而标签的内容又是在el-tab-pane的label里定义的,不是很好改。
最后通过获取鼠标右击事件来动态添加a标签,从而使得右键菜单支持打开新标签页。用到了@contextmenu
<el-tabs
v-if="info != null"
:value="customerTabName"
type="border-card"
@tab-click="changeTab"
@contextmenu.native="newtab($event)" //鼠标右击事件
>
</el-tabs>
通过接收e.target获取div,而每个标签div都有其惟一id,可以根据id进行动态判断。
最后通过innerHTML把a标签添加进去就可以了。
e.target.innerHTML = `<a href=${href}>${text}</a>`
更多推荐
已为社区贡献2条内容
所有评论(0)