d32a27749ed86b4566f9d08f043a60a6.json 9.8 KB

1
  1. {"remainingRequest":"D:\\cloud\\template\\demo-ui\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\cloud\\template\\demo-ui\\src\\page\\index\\tags.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\cloud\\template\\demo-ui\\src\\page\\index\\tags.vue","mtime":1619070292875},{"path":"D:\\cloud\\template\\demo-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\cloud\\template\\demo-ui\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\cloud\\template\\demo-ui\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\cloud\\template\\demo-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"]}]}