vuex tab 实现tag标签 Vue VSCode Snippets插件快捷代码

tab.js页面：

export default {

  state: {

    menu: [],

    currentMenu: null,

    tabList: [

      {

        path: '/',

        name: 'home',

        label: '首頁',

        icon: 's-home'

      }

    ]

  },

  mutations: {

    selectMenu(state, value) {

      //   state.currentMenu = value

      if (value.name === 'home') {

        state.currentMenu = null

      } else {

        state.currentMenu = value

        let result = state.tabList.findIndex(item => item.name === value.name)

        result == -1 ? state.tabList.push(value) : ''

      }

    },

    closeTab(state, value) {

      let result = state.tabList.findIndex(item => item.name === value.name)

      state.tabList.splice(result, 1)

    }

  },

  actions: {},

  modules: {}

}

 

 

commonTab页面：

<template>

  <div>

    <el-tag :key="tag.name" v-for="tag in tags" :closable="tag.name !== 'home'" :disable-transitions="false" @close="handleClose(tag)">

      {{ tag.label }}

    </el-tag>

  </div>

</template>

 

<script>

import { mapState, mapMutations } from 'vuex'

export default {

  computed: {

    ...mapState({

      tags: state => state.tab.tabList

    })

  },

  data() {

    return {

      dynamicTags: ['标签一', '标签二', '标签三']

    }

  },

  methods: {

    ...mapMutations({

      close: 'closeTab'

    }),

    handleClose(tag) {

      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)

      this.close(tag)

    }

  }

}

</script>

 

<style lang="scss" scoped>

.el-tag + .el-tag {

  margin-left: 10px;

}

.button-new-tag {

  margin-left: 10px;

  height: 32px;

  line-height: 30px;

  padding-top: 0;

  padding-bottom: 0;

}

.input-new-tag {

  width: 90px;

  margin-left: 10px;

  vertical-align: bottom;

}

</style>