vue怎么实现管理系统顶部tags浏览历史

发布时间:2022-03-07 15:32:13 作者:iii
来源:亿速云 阅读:256

本文小编为大家详细介绍“vue怎么实现管理系统顶部tags浏览历史”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现管理系统顶部tags浏览历史”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

不用任何vuex,乱七八糟的方法,全在一个文件,粘贴即用

放到你想要的位置即可(此demo,放在了面包屑上面)

先安装 (监听某dom元素大小的包)

npm install element-resize-detector

tags.vue

<template>

  <div>

    <div class="tags">

      <!-- 左箭头 -->

      <div

        class="arrow arrow_left"

        v-show="arrowVisible"

        @click="handleClickToLeft"

      >

        <i class="el-icon-arrow-left"></i>

      </div>

      <!-- 标签内容 -->

      <div class="tags_content" ref="box">

        <span ref="tags">

          <el-tag

            v-for="(tag, index) in tags"

            :key="tag.name"

            :class="[active == index ? 'active top_tags' : 'top_tags']"

            effect="dark"

            :closable="tag.name != 'Firstpage1'"

            @close="handleClose(index, tag)"

            @click="clickTag(index, tag)"

            @contextmenu.native.prevent="handleClickContextMenu(index, tag)"

          >

            {{ $t("router." + tag.name) }}

          </el-tag>

        </span>

      </div>

      <!-- 右箭头 -->

      <div

        class="arrow arrow_right"

        v-show="arrowVisible"

        @click="handleClickToRight"

      >

        <i class="el-icon-arrow-right"></i>

      </div>

    </div>

    <!-- 右键菜单 -->

    <ul

      v-show="contextMenu.isShow"

      :style="{ left: contextMenu.menuLeft, top: '96px' }"

      class="el-dropdown-menu el-popper"

      x-placement="bottom-end"

    >

      <li

        v-if="this.active == this.contextMenu.index"

        class="el-dropdown-menu__item"

        @click="refresh"

      >

        刷新

      </li>

      <li class="el-dropdown-menu__item" @click="closeRightTag">

        关闭右侧

      </li>

      <li class="el-dropdown-menu__item" @click="closeOtherTag">

        关闭其它

      </li>

      <div x-arrow="" class="popper__arrow" style="left: 44px;"></div>

    </ul>

  </div>

</template>

<script>

import elementResizeDetectorMaker from "element-resize-detector";

export default {

  data() {

    return {

      // 是否有箭头

      arrowVisible: true,

      // 点击次数

      num: 0,

      active: 0,

      tags: [],

      // 右键的元素

      contextMenu: {

        index: 0,

        tag: {},

        menuLeft: 0,

        isShow: false

      }

    };

  },

  watch: {

    $route() {

      this.getThisPage();

    },

    tags() {

      this.listenFun(this.$refs.tags, "tags");

    }

  },

  mounted() {

    this.listenFun(this.$refs.box, "box");

    var that = this;

    document.addEventListener("click", function(e) {

      that.contextMenu.isShow = false;

    });

  },

  methods: {

    // 监听可视区域宽,浏览器窗口大小改变执行

    listenFun(monitor, dom) {

      let boxWidth = this.$refs.box.offsetWidth,

        tagsWidth = this.$refs.tags.offsetWidth,

        erd = elementResizeDetectorMaker();

      erd.listenTo(monitor, ele => {

        this.$nextTick(() => {

          if (

            (dom == "box" && ele.offsetWidth >= tagsWidth) ||

            (dom == "tags" && ele.offsetWidth <= boxWidth)

          ) {

            this.arrowVisible = false;

            this.$refs.box.style.paddingLeft = "16px";

            this.$refs.box.style.paddingRight = "16px";

            this.$refs.box.style.transform = "TranslateX(0px)";

            this.num = 0;

          } else {

            this.arrowVisible = true;

            this.$refs.box.style.paddingLeft = "56px";

            this.$refs.box.style.paddingRight = "56px";

          }

        });

      });

    },

    // 判断当前页

    getThisPage() {

      let currentPgae = this.$route;

      // 判断tags里是否有当前页面

      var index = this.tags.findIndex(tag => tag.name == currentPgae.name);

      if (index == -1) {

        this.tags.push({

          name: currentPgae.name,

          path: currentPgae.path

        });

      }

      // 当前选择页

      this.active = this.tags.findIndex(tag => tag.name == currentPgae.name);

    },

    // 关闭标签

    handleClose(index, tag) {

      this.tags.splice(this.tags.indexOf(tag), 1);

      if (index == this.tags.length) {

        this.active = index - 1;

        this.$router.push(this.tags[index - 1].path);

      } else {

        this.$router.push(this.tags[index].path);

      }

    },

    // 点击标签

    clickTag(index, tag) {

      this.active = index;

      this.$router.push(tag.path);

    },

    // 左侧按钮

    handleClickToLeft() {

      if (this.num > 0) {

        this.num--;

        this.$refs.box.style.transform = &mdash;&mdash;TranslateX(-${this.num * 200}px)&mdash;&mdash;;

      }

    },

    // 右侧按钮

    handleClickToRight() {

      // 最后一个标签右测距离浏览器左侧距离

      let lastChild = document

        .querySelectorAll(".top_tags")

        [this.tags.length - 1].getBoundingClientRect()。right;

      // 可视窗口的宽

      let bodyWidth = document.body.offsetWidth;

      // 右侧箭头48+右侧边距16

      if (bodyWidth - lastChild <= 64) {

        this.num++;

        this.$refs.box.style.transform = &mdash;&mdash;TranslateX(-${this.num * 200}px)&mdash;&mdash;;

      }

    },

    // 右键

    handleClickContextMenu(index, tag) {

      this.contextMenu.isShow = true;

      this.contextMenu.index = index;

      this.contextMenu.tag = tag;

      let isTag = document

        .querySelectorAll(".top_tags")

        [index].getBoundingClientRect();

      this.contextMenu.menuLeft = isTag.left - 48 + isTag.width / 2 + "px";

    },

    // 刷新

    refresh() {

      this.$router.go(0);

    },

    // 关闭其他

    closeOtherTag() {

      let tagsLin = this.tags.length,

        { index, tag, menuLeft } = this.contextMenu;

      if (index != 0) {

        this.tags = [

          {

            name: "Firstpage1",

            path: "/First/page1"

          },

          {

            name: tag.name,

            path: tag.path

          }

        ];

      } else {

        this.tags = [

          {

            name: "Firstpage1",

            path: "/First/page1"

          }

        ];

      }

      this.active = index;

      this.$router.push(tag.path);

    },

    // 关闭右侧

    closeRightTag() {

      let tagsLin = this.tags.length,

        { index, tag, menuLeft } = this.contextMenu;

      this.tags.splice(index + 1, tagsLin - index);

      this.active = index;

      this.$router.push(tag.path);

    }

  },

  created() {

    // 监听页面刷新

    window.addEventListener("beforeunload", e => {

      localStorage.setItem(

        "tagInfo",

        JSON.stringify({

          active: this.active,

          tags: this.tags

        })

      );

    });

    let tagInfo = localStorage.getItem("tagInfo")

      ? JSON.parse(localStorage.getItem("tagInfo"))

      : {

          active: 0,

          tags: [

            {

              name: "Firstpage1",

              path: "/First/page1"

            }

          ]

        };

    this.active = tagInfo.active;

    this.tags = tagInfo.tags;

  }

};

</script>

<style lang="less" scoped>

/deep/.el-tag--dark {

  border-color: transparent;

}

/deep/.el-tag--dark .el-tag__close {

  color: #86909c;

  font-size: 16px;

}

/deep/.el-tag--dark .el-tag__close:hover {

  background: #e7eaf0;

}

.tags {

  position: relative;

  overflow: hidden;

  .arrow {

    width: 48px;

    text-align: center;

    cursor: pointer;

    background: #fff;

    position: absolute;

    z-index: 1;

    &_left {

      left: 0;

      top: 0;

    }

    &_right {

      right: 0;

      top: 0;

    }

  }

  &_content {

    transition: 0.3s;

    white-space: nowrap;

    // padding: 0 16px;

  }

  .top_tags {

    margin-right: 8px;

    cursor: pointer;

    background: #fff;

    font-size: 12px;

    font-weight: 400;

    color: #1d2129;

  }

  .top_tags:hover,

  .active,

  .arrow:hover {

    background: #e7eaf0;

  }

}

</style>

重点

需要修改的地方

currentPgae.name 是路由结构的name,判断有无存在,没有就添加,有就定位到上面,根据项目修改

监听刷新时,去本地存储 tags 和 当前页面的active,Ftistpage1 改成自己的首页即可

读到这里,这篇“vue怎么实现管理系统顶部tags浏览历史”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. vue实现滑动超出指定距离回顶部功能
  2. 如何使用vue才能实现顶部菜单栏功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue tags

上一篇:Vue怎么实现图片懒加载

下一篇:css如何取消a超链接下划线样式

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》