| 1 |
- {"remainingRequest":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/src/components/main/components/tags-nav/tags-nav.vue?vue&type=style&index=0&lang=less&","dependencies":[{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/src/components/main/components/tags-nav/tags-nav.vue","mtime":1618306924000},{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/css-loader/index.js","mtime":1665684004023},{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1665684006115},{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/less-loader/dist/cjs.js","mtime":1665684007621},{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/cache-loader/dist/cjs.js","mtime":1665684022107},{"path":"/usr/local/develop/php/www/waibao/NN2022100801/NN2022100801/addons/admin/node_modules/vue-loader/lib/index.js","mtime":1665684006084}],"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\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\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\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\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@import './tags-nav.less';\n",{"version":3,"sources":["tags-nav.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+MA","file":"tags-nav.vue","sourceRoot":"src/components/main/components/tags-nav","sourcesContent":["<template>\n <div class=\"tags-nav\">\n <div class=\"close-con\">\n <Dropdown transfer @on-click=\"handleTagsOption\" style=\"margin-top:7px;\">\n <Button size=\"small\" type=\"text\">\n <Icon :size=\"18\" type=\"ios-close-circle-outline\" />\n </Button>\n <DropdownMenu slot=\"list\">\n <DropdownItem name=\"close-all\">关闭所有</DropdownItem>\n <DropdownItem name=\"close-others\">关闭其他</DropdownItem>\n </DropdownMenu>\n </Dropdown>\n </div>\n <ul v-show=\"visible\" :style=\"{left: contextMenuLeft + 'px', top: contextMenuTop + 'px'}\" class=\"contextmenu\">\n <li v-for=\"(item, key) of menuList\" @click=\"handleTagsOption(key)\" :key=\"key\">{{item}}</li>\n </ul>\n <div class=\"btn-con left-btn\">\n <Button type=\"text\" @click=\"handleScroll(240)\">\n <Icon :size=\"18\" type=\"ios-arrow-back\" />\n </Button>\n </div>\n <div class=\"btn-con right-btn\">\n <Button type=\"text\" @click=\"handleScroll(-240)\">\n <Icon :size=\"18\" type=\"ios-arrow-forward\" />\n </Button>\n </div>\n <div class=\"scroll-outer\" ref=\"scrollOuter\" @DOMMouseScroll=\"handlescroll\" @mousewheel=\"handlescroll\">\n <div ref=\"scrollBody\" class=\"scroll-body\" :style=\"{left: tagBodyLeft + 'px'}\">\n <transition-group name=\"taglist-moving-animation\">\n <Tag\n type=\"dot\"\n v-for=\"(item, index) in list\"\n ref=\"tagsPageOpened\"\n :key=\"`tag-nav-${index}`\"\n :name=\"item.name\"\n :data-route-item=\"item\"\n @on-close=\"handleClose(item)\"\n @click.native=\"handleClick(item)\"\n :closable=\"item.name !== $config.homeName\"\n :color=\"isCurrentTag(item) ? 'primary' : 'default'\"\n @contextmenu.prevent.native=\"contextMenu(item, $event)\"\n >{{ showTitleInside(item) }}</Tag>\n </transition-group>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport { showTitle, routeEqual } from '@/libs/util'\nimport beforeClose from '@/router/before-close'\nexport default {\n name: 'TagsNav',\n props: {\n value: Object,\n list: {\n type: Array,\n default () {\n return []\n }\n }\n },\n data () {\n return {\n tagBodyLeft: 0,\n rightOffset: 40,\n outerPadding: 4,\n contextMenuLeft: 0,\n contextMenuTop: 0,\n visible: false,\n menuList: {\n others: '关闭其他',\n all: '关闭所有'\n }\n }\n },\n computed: {\n currentRouteObj () {\n const { name, params, query } = this.value\n return { name, params, query }\n }\n },\n methods: {\n handlescroll (e) {\n var type = e.type\n let delta = 0\n if (type === 'DOMMouseScroll' || type === 'mousewheel') {\n delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40\n }\n this.handleScroll(delta)\n },\n handleScroll (offset) {\n const outerWidth = this.$refs.scrollOuter.offsetWidth\n const bodyWidth = this.$refs.scrollBody.offsetWidth\n if (offset > 0) {\n this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset)\n } else {\n if (outerWidth < bodyWidth) {\n if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {\n this.tagBodyLeft = this.tagBodyLeft\n } else {\n this.tagBodyLeft = Math.max(this.tagBodyLeft + offset, outerWidth - bodyWidth)\n }\n } else {\n this.tagBodyLeft = 0\n }\n }\n },\n handleTagsOption (type) {\n if (type.includes('all')) {\n // 关闭所有，除了home\n let res = this.list.filter(item => item.name === this.$config.homeName)\n this.$emit('on-close', res, 'all')\n } else if (type.includes('others')) {\n // 关闭除当前页和home页的其他页\n let res = this.list.filter(item => routeEqual(this.currentRouteObj, item) || item.name === this.$config.homeName)\n this.$emit('on-close', res, 'others', this.currentRouteObj)\n setTimeout(() => {\n this.getTagElementByName(this.currentRouteObj.name)\n }, 100)\n }\n },\n handleClose (current) {\n if (current.meta && current.meta.beforeCloseName && current.meta.beforeCloseName in beforeClose) {\n new Promise(beforeClose[current.meta.beforeCloseName]).then(close => {\n if (close) {\n this.close(current)\n }\n })\n } else {\n this.close(current)\n }\n },\n close (route) {\n let res = this.list.filter(item => !routeEqual(route, item))\n this.$emit('on-close', res, undefined, route)\n },\n handleClick (item) {\n this.$emit('input', item)\n },\n showTitleInside (item) {\n return showTitle(item, this)\n },\n isCurrentTag (item) {\n return routeEqual(this.currentRouteObj, item)\n },\n moveToView (tag) {\n const outerWidth = this.$refs.scrollOuter.offsetWidth\n const bodyWidth = this.$refs.scrollBody.offsetWidth\n if (bodyWidth < outerWidth) {\n this.tagBodyLeft = 0\n } else if (tag.offsetLeft < -this.tagBodyLeft) {\n // 标签在可视区域左侧\n this.tagBodyLeft = -tag.offsetLeft + this.outerPadding\n } else if (tag.offsetLeft > -this.tagBodyLeft && tag.offsetLeft + tag.offsetWidth < -this.tagBodyLeft + outerWidth) {\n // 标签在可视区域\n this.tagBodyLeft = Math.min(0, outerWidth - tag.offsetWidth - tag.offsetLeft - this.outerPadding)\n } else {\n // 标签在可视区域右侧\n this.tagBodyLeft = -(tag.offsetLeft - (outerWidth - this.outerPadding - tag.offsetWidth))\n }\n },\n getTagElementByName (route) {\n this.$nextTick(() => {\n this.refsTag = this.$refs.tagsPageOpened\n this.refsTag.forEach((item, index) => {\n if (routeEqual(route, item.$attrs['data-route-item'])) {\n let tag = this.refsTag[index].$el\n this.moveToView(tag)\n }\n })\n })\n },\n contextMenu (item, e) {\n if (item.name === this.$config.homeName) {\n return\n }\n this.visible = true\n const offsetLeft = this.$el.getBoundingClientRect().left\n this.contextMenuLeft = e.clientX - offsetLeft + 10\n this.contextMenuTop = e.clientY - 64\n },\n closeMenu () {\n this.visible = false\n }\n },\n watch: {\n '$route' (to) {\n this.getTagElementByName(to)\n },\n visible (value) {\n if (value) {\n document.body.addEventListener('click', this.closeMenu)\n } else {\n document.body.removeEventListener('click', this.closeMenu)\n }\n }\n },\n mounted () {\n setTimeout(() => {\n this.getTagElementByName(this.$route)\n }, 200)\n }\n}\n</script>\n\n<style lang=\"less\">\n@import './tags-nav.less';\n</style>\n"]}]}
|
