如何解决在 Element UI 的 Tabs 组件的右侧添加一个按钮
我正在使用 Vue 2 的 Element UI 组件库。Element 有一个 Tabs 组件,如下面的屏幕截图(蓝色矩形)所示:
我想在红色箭头所指的位置添加一个按钮。但是 Tabs 组件没有像这样添加辅助 UI 组件的本机方式,例如使用插槽。由于该区域在 Tabs 组件内,所以我看不到在该区域插入附件组件的方法。
如果您查看检查器,我基本上必须在类 div
的 tablist
之后插入一个 Button 组件。
解决方法
您可以以编程方式执行此操作:
-
在
el-tabs
中设置导航栏样式以设置display:flex
和justify-content:space-between
:.el-tabs__nav-scroll { display: flex; justify-content: space-between; }
-
向模板添加一个
el-button
,并为其提供一个模板引用(名为btn
)。<el-button ref="btn">Click me!</el-button>
-
将模板引用应用于
el-tabs
组件(名为tabs
)。<el-tabs ref="tabs">
-
在
mounted()
钩子中,将el-button
插入到el-tabs
中:export default { mounted() { const scrollBar = this.$refs.tabs.$el.querySelector('.el-tabs__nav-scroll') scrollBar.appendChild(this.$refs.btn.$el) } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。