鍍金池/ 問答/HTML/ 這種tagsview點(diǎn)每一個關(guān)閉相應(yīng)頁面如何寫,復(fù)雜嗎

這種tagsview點(diǎn)每一個關(guān)閉相應(yīng)頁面如何寫,復(fù)雜嗎

clipboard.png

點(diǎn)擊相應(yīng)的tag要關(guān)閉相應(yīng)的頁面,這個該如何寫能,麻煩嗎

<template>
<!-- 快速導(dǎo)航tab -->
<div class='tabs-view-container'>

<router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
  <el-tag :closable="true" @close='closeViewTabs(tag,$event)'>
    {{tag.name}}
  </el-tag>
</router-link>
</div>

</template>

<script>

export default {
  computed: {
    visitedViews() {
      return this.$store.state.app.visitedViews.slice(-6)
    }
  },
  methods: {
    closeViewTabs(view, $event) {
      this.$store.dispatch('delVisitedViews', view)
      $event.preventDefault()
    },
    addViewTabs() {
      this.$store.dispatch('addVisitedViews', this.$route.matched[this.$route.matched.length - 1])
    }
  },
  watch: {
    $route() {
      this.addViewTabs()
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.tabs-view-container{

display: inline-block;
vertical-align: top;
margin-left: 10px;
.tabs-view{
  margin-left: 10px;
}

}

</style>

回答
編輯回答
尐飯團(tuán)

你好,請問你這個效果做出來了嗎

2017年4月30日 23:03