{"remainingRequest":"D:\\jiayue\\pig-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jiayue\\pig-ui\\src\\page\\index\\tags.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jiayue\\pig-ui\\src\\page\\index\\tags.vue","mtime":1619070292875},{"path":"D:\\jiayue\\pig-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jiayue\\pig-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jiayue\\pig-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jiayue\\pig-ui\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport { mapGetters, mapState } from \"vuex\";\r\nexport default {\r\n  name: \"tags\",\r\n  data() {\r\n    return {\r\n      active: \"\",\r\n      contentmenuX: \"\",\r\n      contentmenuY: \"\",\r\n      contextmenuFlag: false\r\n    };\r\n  },\r\n  created() {},\r\n  mounted() {\r\n    this.setActive();\r\n  },\r\n  watch: {\r\n    tag() {\r\n      this.setActive();\r\n    },\r\n    contextmenuFlag(contextmenuShow) {\r\n      // 只在右键菜单显示的时候监听鼠标点击事件\r\n      if (contextmenuShow) {\r\n        window.addEventListener(\"mousedown\", this.watchContextmenu);\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    ...mapGetters([\"tagWel\", \"tagList\", \"tag\", \"website\"]),\r\n    ...mapState({\r\n      showTag: state => state.common.showTag\r\n    }),\r\n    tagLen() {\r\n      return this.tagList.length || 0;\r\n    }\r\n  },\r\n  methods: {\r\n    watchContextmenu(e) {\r\n      if (!this.$el.contains(e.target)) {\r\n        this.contextmenuFlag = false;\r\n        window.removeEventListener(\"mousedown\", this.watchContextmenu);\r\n      }\r\n    },\r\n    handleContextmenu(event) {\r\n      let target = event.target;\r\n      // 解决 https://github.com/d2-projects/d2-admin/issues/54\r\n      let flag = false;\r\n      if (target.className.indexOf(\"el-tabs__item\") > -1) flag = true;\r\n      else if (target.parentNode.className.indexOf(\"el-tabs__item\") > -1) {\r\n        target = target.parentNode;\r\n        flag = true;\r\n      }\r\n      if (flag) {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        this.contentmenuX = event.clientX;\r\n        this.contentmenuY = event.clientY;\r\n        this.tagName = target.getAttribute(\"aria-controls\").slice(5);\r\n        this.contextmenuFlag = true;\r\n      }\r\n    },\r\n    //激活当前选项\r\n    setActive() {\r\n      this.active = this.tag.value;\r\n    },\r\n    menuTag(value, action) {\r\n      if (action === \"remove\") {\r\n        let { tag, key } = this.findTag(value);\r\n        this.$store.commit(\"DEL_TAG\", tag);\r\n        if (tag.value === this.tag.value) {\r\n          tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个\r\n          this.openTag(tag);\r\n        }\r\n      }\r\n    },\r\n    openTag(item) {\r\n      let tag;\r\n      if (item.name) {\r\n        tag = this.findTag(item.name).tag;\r\n      } else {\r\n        tag = item;\r\n      }\r\n      this.$router.push({\r\n        path: this.$router.$avueRouter.getPath({\r\n          name: tag.label,\r\n          src: tag.value\r\n        }),\r\n        query: tag.query\r\n      });\r\n    },\r\n    closeOthersTags() {\r\n      this.contextmenuFlag = false;\r\n      this.$store.commit(\"DEL_TAG_OTHER\");\r\n    },\r\n    findTag(value) {\r\n      let tag, key;\r\n      this.tagList.map((item, index) => {\r\n        if (item.value === value) {\r\n          tag = item;\r\n          key = index;\r\n        }\r\n      });\r\n      return { tag: tag, key: key };\r\n    },\r\n    closeAllTags() {\r\n      this.contextmenuFlag = false;\r\n      this.$store.commit(\"DEL_ALL_TAG\");\r\n      this.$router.push({\r\n        path: this.$router.$avueRouter.getPath({\r\n          src: this.tagWel.value\r\n        }),\r\n        query: this.tagWel.query\r\n      });\r\n    }\r\n  }\r\n};\r\n",{"version":3,"sources":["tags.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"tags.vue","sourceRoot":"src/page/index","sourcesContent":["<template>\r\n  <div class=\"avue-tags\"\r\n       v-if=\"showTag\">\r\n    <!-- tag盒子 -->\r\n    <div v-if=\"contextmenuFlag\"\r\n         class=\"avue-tags__contentmenu\"\r\n         :style=\"{left:contentmenuX+'px',top:contentmenuY+'px'}\">\r\n      <div class=\"item\"\r\n           @click=\"closeOthersTags\">关闭其他</div>\r\n      <div class=\"item\"\r\n           @click=\"closeAllTags\">关闭全部</div>\r\n    </div>\r\n    <div class=\"avue-tags__box\"\r\n         :class=\"{'avue-tags__box--close':!website.isFirstPage}\">\r\n      <el-tabs v-model=\"active\"\r\n               type=\"card\"\r\n               @contextmenu.native=\"handleContextmenu\"\r\n               :closable=\"tagLen!==1\"\r\n               @tab-click=\"openTag\"\r\n               @edit=\"menuTag\">\r\n        <el-tab-pane :key=\"item.value\"\r\n                     v-for=\"item in tagList\"\r\n                     :label=\"item.label\"\r\n                     :name=\"item.value\">\r\n        </el-tab-pane>\r\n\r\n      </el-tabs>\r\n      <el-dropdown class=\"avue-tags__menu\">\r\n        <el-button type=\"primary\"\r\n                   >\r\n          更多\r\n          <i class=\"el-icon-arrow-down el-icon--right\"></i>\r\n        </el-button>\r\n        <el-dropdown-menu slot=\"dropdown\">\r\n          <el-dropdown-item @click.native=\"closeOthersTags\">关闭其他</el-dropdown-item>\r\n          <el-dropdown-item @click.native=\"closeAllTags\">关闭全部</el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </el-dropdown>\r\n    </div>\r\n\r\n  </div>\r\n</template>\r\n<script>\r\nimport { mapGetters, mapState } from \"vuex\";\r\nexport default {\r\n  name: \"tags\",\r\n  data() {\r\n    return {\r\n      active: \"\",\r\n      contentmenuX: \"\",\r\n      contentmenuY: \"\",\r\n      contextmenuFlag: false\r\n    };\r\n  },\r\n  created() {},\r\n  mounted() {\r\n    this.setActive();\r\n  },\r\n  watch: {\r\n    tag() {\r\n      this.setActive();\r\n    },\r\n    contextmenuFlag(contextmenuShow) {\r\n      // 只在右键菜单显示的时候监听鼠标点击事件\r\n      if (contextmenuShow) {\r\n        window.addEventListener(\"mousedown\", this.watchContextmenu);\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    ...mapGetters([\"tagWel\", \"tagList\", \"tag\", \"website\"]),\r\n    ...mapState({\r\n      showTag: state => state.common.showTag\r\n    }),\r\n    tagLen() {\r\n      return this.tagList.length || 0;\r\n    }\r\n  },\r\n  methods: {\r\n    watchContextmenu(e) {\r\n      if (!this.$el.contains(e.target)) {\r\n        this.contextmenuFlag = false;\r\n        window.removeEventListener(\"mousedown\", this.watchContextmenu);\r\n      }\r\n    },\r\n    handleContextmenu(event) {\r\n      let target = event.target;\r\n      // 解决 https://github.com/d2-projects/d2-admin/issues/54\r\n      let flag = false;\r\n      if (target.className.indexOf(\"el-tabs__item\") > -1) flag = true;\r\n      else if (target.parentNode.className.indexOf(\"el-tabs__item\") > -1) {\r\n        target = target.parentNode;\r\n        flag = true;\r\n      }\r\n      if (flag) {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        this.contentmenuX = event.clientX;\r\n        this.contentmenuY = event.clientY;\r\n        this.tagName = target.getAttribute(\"aria-controls\").slice(5);\r\n        this.contextmenuFlag = true;\r\n      }\r\n    },\r\n    //激活当前选项\r\n    setActive() {\r\n      this.active = this.tag.value;\r\n    },\r\n    menuTag(value, action) {\r\n      if (action === \"remove\") {\r\n        let { tag, key } = this.findTag(value);\r\n        this.$store.commit(\"DEL_TAG\", tag);\r\n        if (tag.value === this.tag.value) {\r\n          tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个\r\n          this.openTag(tag);\r\n        }\r\n      }\r\n    },\r\n    openTag(item) {\r\n      let tag;\r\n      if (item.name) {\r\n        tag = this.findTag(item.name).tag;\r\n      } else {\r\n        tag = item;\r\n      }\r\n      this.$router.push({\r\n        path: this.$router.$avueRouter.getPath({\r\n          name: tag.label,\r\n          src: tag.value\r\n        }),\r\n        query: tag.query\r\n      });\r\n    },\r\n    closeOthersTags() {\r\n      this.contextmenuFlag = false;\r\n      this.$store.commit(\"DEL_TAG_OTHER\");\r\n    },\r\n    findTag(value) {\r\n      let tag, key;\r\n      this.tagList.map((item, index) => {\r\n        if (item.value === value) {\r\n          tag = item;\r\n          key = index;\r\n        }\r\n      });\r\n      return { tag: tag, key: key };\r\n    },\r\n    closeAllTags() {\r\n      this.contextmenuFlag = false;\r\n      this.$store.commit(\"DEL_ALL_TAG\");\r\n      this.$router.push({\r\n        path: this.$router.$avueRouter.getPath({\r\n          src: this.tagWel.value\r\n        }),\r\n        query: this.tagWel.query\r\n      });\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n\r\n"]}]}