通用后台管理——tag功能介绍与页面编写

tag功能介绍与页面编写

此功能主要是实现在commonHeader 组件中关于tag的显示与删除，其中里面的数据域 面包屑里面的数据时共用一套数据，所以可以直接将存储在vuex里面的数据进行操作

第一步

首先 对于tag的实现 首先要引入 tag 组件库进行实现
tag组件库

第二步

创建一个组件CommonTag 用来设计当前功能的页面，以及逻辑

html代码

<template>
  <div class="tags">
    <!-- type	类型	string	success/info/warning/danger默认为 空 -->
    <!-- 设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，
         如果不想使用，可以设置disable-transitions属性，它接受一个Boolean，true 为关闭。 
         :closable="item.name !== 'home' 意为不为home 就可以进行关闭
    -->
    <!-- effort 用来表示主题 $route.name === item.name" 判断当前路由的名称是否与当前所进行渲染的名称 一致的话，为dark-->
    <el-tag
      v-for="item in tags"
      :key="item.path"
      :effect="$route.name === item.name ? 'dark' : 'plain'"
      :closable="item.name !== 'home'"
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>

js代码

<script>
// 获取组件中的state 通过 mapState进行实现
import { mapState } from "vuex";
export default {
  name: "CommonTag",
  data() {
    return {};
  },
  //   在计算属性中进行处理
  computed: {
    ...mapState({
      tags: (state) => state.tab.tabsList,
    }),
  },
};
</script>

第三步

在Main.vue组件进行引入

<common-tag></common-tag>

import CommonTag from "@/components/CommonTag"; //引入组件
 components: {
    CommonAside,
    CommonHeader,
    CommonTag,
  },

报错问题

vue-router.esm。js？3423:2046未知（承诺）导航重复：避免了到当前位置的冗余导航：“/mall”。

解决办法 ：只需要在 router 文件夹下的 index.js 文件里面加入如下代码即可

// 解决 vue-router 升级导致的 Uncaught(in promise)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

const originalReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (location) {
  return originalReplace.call(this, location).catch(err => err)
}

tag点击与删除

点击tag标签进行跳转功能的实现

1. 在 HTML 里面的代码中 给当前的标签绑定一个 click 事件 ，并在函数中进行传入一个参数

<el-tag
      v-for="item in tags"
      :key="item.path"
      :effect="$route.name === item.name ? 'dark' : 'plain'"
      :closable="item.name !== 'home'"
      @click="changeMenu(item)"
    >

2 在JS 代码中进行函数逻辑的实现

methods: {
    // 点击tag跳转 的功能
    changeMenu(item) {
      // 此时拿到的item 所点击的tag里面的数据
      // console.log(item);
      // 其中一种跳转方式
      // this.$router.push('/home')
      // 第二种跳转方式 通过name进行跳转
      this.$router.push({ name: item.name });
    },
  },

tag 删除功能的实现

在 Element 组件库中 关于 tag标签的一些函数 其中 close 是在关闭的时候触发得到
tag 标签

在store文件夹下的 tab.js 文件进行配置

    // 删除指定的tag 数据
        closeTag(state,item){
            // console.log(item,'item');
            // 第一种方法 获取到当前数组的索引 如果传入获取到的名称与传入的名称相同的时候，返回当前的索引值
            const index = state.tabsList.findIndex(val => val.name === item.name)
            // 通过调用数组的split 进行删除当前的索引
            state.tabsList.splice(index,1) // 第一个参数 进行删除的位置 第二个参数 表示 删除的个数        
        }

删除主要是分为三种情况
1 删除的标签是未选中状态，此时不用做任何操作
2. 删除的为最后一项，此时需要将路由向前一个页面移动
3. 删除的为中间，已经选中的标签，此时向后移动

  // 点击 tag右上角之后，进行删除操作的逻辑
    handleClose(item, index) {
      // 当前的数据和当前的索引
      // console.log(item, index);

      // 获取组件中的state 一般是通过 this.$store.commit()方法
      // 另一种 通过 辅助函数进行,调用 store 中的Mutations
      this.closeTag(item);
      // 1 、 获取到数组里面的长度
      const length = this.tags.length;
      // 2 删除的是 store 里面 tableList
      // 删除之后的跳转逻辑
      // 存在两种情况 第一种 如果删除的是没有被选中的tag 标签，也就是当前显示的页面与删除的标签不同，不进行任何的操作
      if (item.name !== this.$route.name) {
        return;
      }
      // 表示的是删除的最后一项
      if (index === length) {
        this.$router.push({
          // 将页面向左进行移动
          name: this.tags[index - 1].name,
        });
      } else {
        // 第三种情况 删除的中间数据，往页面后一个进行跳转，删除自身
        this.$router.push({
          // 将页面向右进行移动
          name: this.tags[index].name,
        });
      }
    },