vue+iviewui menu+tabs联动及tabs切换总结

Life is short , "play" more!
本文来自lihao's Blog,转载请注明。

因为试着开发一个含有前端的平台软件,所以学习了下前端框架。 纯属巧合接触到了vue(据网上查找资料,国内使用vue的相对更多)。作为一个vue新手,本着目的为导向,对vue的基础知识掌握的并不是很牢靠。凭着一点点的代码编写和逐渐的解决问题,终于有了一点眉目。 这里我使用了iviewui ui vue 组件(国人开发) ,简单的完成了menu(左侧菜单)和 tabs 联动,以及tabs之间跳转切换的功能。实现了我当初计划的功能。

这个平台前端页面分为3大块区域。 顶部菜单,左侧菜单,内容区(由iviewui 的tabs 实现)。

1) 顶部菜单是比较独立的一部分。 和左侧菜单及内容区基本无交互。 除了有一些全局数据需要保存并被其他模块引用。 这里使用Vuex.Store 来保存全局数据。 这样其他模块可以通过this.$store.state来访问这些数据。

2)左侧menu菜单(iviewui 的menu) 为了简单实现,并没有使用vue-router。 我点击左侧某一个菜单后, 如果tabs上没有打开过,则打开此菜单对应的tab页。 如果该菜单对应的tab页已经打开,则将焦点focus在该tab页即可。

3) tab页的跳转。 某个tab页comonent里需要发送事件给自己的父component。 通过父component 来完成触发tab页的切换。

例如我有2个component, A 在tabA。 B在tabB。
那么我们期望在A 页时, 点击某个功能自动跳转到B, 然后实现触发B 页面的功能。

上面就是简单的一个 vue+iviewui menu+tabs联动及tabs切换总结 的实现方式。

此篇文章已被阅读597 次


一条评论

  1. The Tester说道:

    关闭tab建议将tabs数组对应元素进行移除(而不是简单的隐藏显示), 否则会有一些渲染的问题.

发表评论

电子邮件地址不会被公开。 必填项已用*标注