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页即可。






//下面是点击某个菜单后,触发select方法
select(event) {
console.log("---------select -------------")
// not display the welcome window
this.welcomedisplay = false

if (this.tabsHashTable[event] == undefined) {
// 如果此标签页没有打开过

let labelname = this.$refs["menuitem" + event][0].$el.innerText
// add tab
this.tabs.push({ display: true, component: event, label: labelname })
//add tab hash table (this used to locate the tab in tab array)
this.tabsHashTable[event] = this.tabs.length - 1
} else {

if(this.tabs[this.tabsHashTable[event]].display === false)
{
// 曾经打开过又隐藏[叉掉]的
this.tabs[this.tabsHashTable[event]].display = true
}

else{
//直接设置当前tab页为显示页即可,然后设置更新标志位(因为重新显示当前tab页,如果需要更新则自动更新即可.)

this.$refs[event][0].update = new Date().getTime()

}
//当display设置为true时, 如果之前为false,那么此component会重新创建. // 如何判断此component是否已经创建呢?

}
// 设置打开的tab为当前显示的tab
this.activeTab = event
console.log(this)
},
// 下面是关闭某个tab页的时候操作(根据iviewui的文档,直接将display设置为false即可)
handleTabRemove(name) {
// set this tab display to be false
this.tabs[this.tabsHashTable[name]].display = false;

// if displayed tabs size is 0, then show welcome message
if (this.tabs.filter(tab => tab.display == true).length == 0)
this.welcomedisplay = true;
},







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


这一段代码是在上面Tabs里面的一段, v-on:select-tab 接收子component select-tab事件。


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

//下面是A component (位于tabA)的触发切换TAB页跳转。因为我实现了,除了跳转tab页,还需要自动触发跳转到B后进行一个动作触发。 所以我们将数据放在this.$store.state中,供切换到B compoennt后自动从全局数据中获取。
billloanrelation(params) {
this.$store.state.billloanrelation.billkey = params.row.bill_proxy_serial_no
//this.$store.state.billloanrelation.billkey = this.partnerloanno; // test
this.$emit("select-tab", "billloanrelation")
}



//下面这段是B component。 需要实现2种方式一个是当B component(tabB)第一次打开加载时,会通过created (见vue组件的生命周期)来自动触发功能。 如果是B component(TabB)已经打开,仅是失去焦点。 那么这时候我们在上面select(event)的方法中, 将更新component B 的update值(这里就是简单设置为当前时间), 此时component B的watch 发现update值变更后, 会自触发功能。

created: function(){
console.log('bill created')
this.queryFromExternal()
},
watch:{
update: function (value) {
console.log('bill changed ')
this.queryFromExternal()
}
},

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


一条评论

  1. The Tester说道:

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

发表评论

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