当前位置: 首页 > Web前端 > CSS

VUE实战2:Slot实现tab切换效果,随意填充内容,后台管理Admin界面

时间:2023-03-31 01:46:11 CSS

是RXEditor的主界面,StudioUI需要大量使用tab切换,我梦想中的tab切换自由填充内容。可惜自己实现不了,只好上网搜索,就像你现在做的一样,看看有没有好心人实现过类似的功能,分享一下。百度搜索的结果不是很理想。通过传入对象数据实现,扩展性差,不能单独定制每个页面的样式。转谷歌,发现有个外国小哥实现了我想要的功能,果断采纳,给了个大大的好评。喜欢的话可以直接参考他在codepen上的代码:https://codepen.io/tatimblin/pen/oWKdjR?editors=1010稍微修改一下这段代码,就变成我的了,已经喜欢了,不要了不好意思,就大胆使用吧,效果如下:两个VUE组件可以实现其功能,一个是tabs组件,一个是tab组件。左边的标签组件命名为:WidgetTabs.vue,右边的标签组件命名为PageTabs.vue,它们的子组件使用一个公共组件:Tab.vue。这样做的目的主要是为了控制和区分tab容器中的样式。代码结构:详细介绍一个实现WidgetTabs,另一个类似,直接copy即可。调用代码:`StudioContentFilesList其他内容`容器代码:``具体选项卡代码:``整个项目在这个history节点的代码,请到我的Github查看:https://github.com/vularsoft/studio-ui如何找到history节点:RXEditor是一个Boostrap代码的可视化编辑工具。本系列记录了软件的开发过程。如果有任何问题,请在ithub上给我留言