vue2+viewDesign实现tabs动态增减

背景

上次写了个vue3+element-ui版本的，其实已经够用了，不过闲来无事就想琢磨一下，弄了一个vue2+viewDesign的实现，原理差不多。

准备工作

备用组件

准备几个备用的用来切换的组件，如下：

<!-- 第一个组件 -->
<template>
	<div>组件一</div>
</template>
<!-- 第二个组件 -->
<template>
	<div>组件二</div>
</template>
<!-- 第三个组件 -->
<template>
	<div>组件三</div>
</template>

在你的测试component里面把这仨兄弟注册上，取个名字：

components: {
  p1: PartOne,
  p2: PartTwo,
  p3: PartThree
},

导航组件

<Menu theme="light" @on-select="handleMenuSelect">
  <Submenu name="1">
    <template slot="title">
      <Icon type="ios-paper" />
      测试组件
    </template>
    <MenuItem name="p1">组件一</MenuItem>
    <MenuItem name="p2">组件二</MenuItem>
    <MenuItem name="p3">组件三</MenuItem>
  </Submenu>
</Menu>

<script>
	handleMenuSelect(v) {
      if(this.repeatJudge(v)) {
        this.currentValue = `${v}`
        return
      }
      this.$nextTick(() => {
        this.keys.push({key: v, label: '组件' + v})
      })
      this.currentValue = `${v}`
    },
    repeatJudge(k) {
      for(let i = 0; i < this.keys.length; ++i) {
        if(this.keys[i].key === k) {
          return true
        }
      }
      return false
    },
</script>

说明：

• keys是实时渲染的所有组件，其中的数据结构是我自己定义的，格式是这样：[{key: 'p1', label: '组件p1'}]，你也可以根据你的需要任意修改，无所谓的
• currentValue是当前聚焦的tab
• handleMenuSelect函数用于处理导航点击事件，当点击导航时，首先进行重复检测，如果已经存在某个tabs，则跳转到这个tabs，没有重复时才渲染新的。
• 把新增tabs放在$nextTick里是保证正常渲染，不出幺蛾子。

以上部分实现了新增tab的需求，下面来说怎么delete一个tab。

delete tab

这个在view里面实现很容易，首先在tab组件上加上closeable，然后定义一个处理删除的回调函数，在函数里filter一下即可：

<Tabs type="card" closable :value="currentValue" @on-tab-remove="handleTabRemove">
  <TabPane v-for="(item) in keys" :key="item.key" :label="item.label" :name="item.key">
    <div>
      <component :is="item.key"></component>
    </div>
  </TabPane>
</Tabs>

<script>
	handleTabRemove(v) {
      this.keys = this.keys.filter(e => e.key !== v)
    }
</script>

巨简单，过滤一下就行。
说明：

• :value和TabPane的name属性是相对应的，name是tabPane的唯一主键

完