vue iview ui 实现左侧menu菜单和tabs联动

想实现左侧menu菜单和tabs 联动, 因为对vue是初学不是特别熟悉, 还是折腾了好几天.   前些日期发现了iview ui, 感觉不错, 并不必bootstrap 差, 所以用iview 重新写了一个demo.  iview 貌似还是国人开发的, 值得推荐.

menu菜单和tabs的联动是指, 我在左侧点击某个菜单时, 右侧的tab页自动创建一个tab标签, 如果点击的该菜单已经存在于tab标签下, 则自动激活该标签显示该标签下内容.    标签下 面需要动态加载dynamic vue component 的内容.   单独的tab页,增加tab和移除tab 标签中并不复杂, 因为iview的tab 组件默认已经支持了.  所以我这里仅是实现menu和tab的联动.  menu 菜单点击后,  触发一个 select 操作,  那么我们需要获取tabs的component 设计activeKey即可实现.

主要的技术点:

1.   动态加载vue compoenent

<component ref="tabComponents"  :is="tab.component"></component> 

2.  可以通过ref 指示获取该vue component.  具体用法为

<TabPane  ref="tabPanes" :key="tab.component" :name="tab.component" :label="tab.component" v-if="tab.display" v-for="tab in tabs" >

vue里通过  this.$refs.tabPanes  获取该元素.  如果该ref的name 不唯一, 则获取到的是一个数组对象.

完整代码如下:

<template>
  <div class="hello">


      <Menu active-name="1-2" :open-names="['1']" @on-select="select($event)">
          <Submenu name="1" >
              <template slot="title">
                  <Icon type="ios-analytics" />
                  testmenu1
              </template>
                  <MenuItem name="dynamic1" >Option 1</MenuItem>
                  <MenuItem name="dynamic2" >Option 2</MenuItem>
                  <MenuItem name="dynamic3">Option 3</MenuItem>
                  <MenuItem name="dynamic4">Option 4</MenuItem>
              </MenuGroup>
          </Submenu>
          <Submenu name="2">
              <template slot="title">
                  <Icon type="ios-filing" />
                  testmenu2
              </template>
              <MenuItem name="2-1">Option 5</MenuItem>
              <MenuItem name="2-2">Option 6</MenuItem>
          </Submenu>
        
      </Menu>



          <Tabs type="card" closable @on-tab-remove="handleTabRemove">
          <TabPane  ref="tabPanes" :key="tab.component" :name="tab.component" :label="tab.component" v-if="tab.display" v-for="tab in tabs" >
          <component ref="tabComponents"  :is="tab.component"></component>
          </TabPane>
          </Tabs>

  </div>
</template>

<script>

import Vue from 'vue'
import vuetabs from 'vue-nav-tabs'
import boostrapvue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'iview/dist/styles/iview.css'
import iview from 'iview'
import dynamic1 from '@/components/dynamicComponent1.vue'
import dynamic2 from '@/components/dynamicComponent2.vue'
import dynamic3 from '@/components/dynamicComponent3.vue'
import dynamic4 from '@/components/dynamicComponent4.vue'

Vue.component("dynamic1",dynamic1)
Vue.component("dynamic2",dynamic2)
Vue.component("dynamic3",dynamic3)
Vue.component("dynamic4",dynamic4)



Vue.use(boostrapvue)
Vue.use(iview)

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tabs:[ // 初始的tabs 为空
      ]
    }
  },
  methods:{
   handleTabRemove(name) {  // 移除标签的动作
                console.log(name)
                console.log(this.tabs )
                var thiz=this
                var index
                this.tabs.forEach(function(element){

                    if(element.component == name)  {
                    index = thiz.tabs.indexOf(element)
                    element.display = false
                    }
                })
              console.log(index)  // 找到index 并将tabs里的内容删除 
                this.tabs.splice(index, 1)
                console.log(this.tabs )
            },

            select(event){

           // 当选择某个菜单时

            console.log(this)

            var componentexist=false

            console.log(this.tabs.length)

            if(this.tabs.length == 0 )
            {
              this.tabs.push({display:true,component:event})
              return
            }
            else {

              console.log(this.$refs.tabPanes[0].$parent)


            }



            console.log(this.$refs.tabPanes)

            var thiz = this
            this.$refs.tabPanes.forEach(function(element){


                if(element.name == event)  {
                componentexist = true
                thiz.$refs.tabPanes[0].$parent.activeKey = event

                //element.display = true
                return
                }
            })

            if(!componentexist)
            {
            this.tabs.push({display:true,component:event})
            this.$refs.tabPanes[0].$parent.activeKey = event
          }

            },

            open(){

            console.log(this)

            }
  }
}



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.ivu-menu{

float:left;
}

.ivu-tabs{

margin-top:20px;
padding-left:20px;

}
</style>

此篇文章已被阅读2499 次