|
@@ -9,10 +9,12 @@
|
|
class="avue-tags__contentmenu">
|
|
class="avue-tags__contentmenu">
|
|
<div
|
|
<div
|
|
class="item"
|
|
class="item"
|
|
- @click="closeOthersTags">关闭其他</div>
|
|
|
|
|
|
+ @click="closeOthersTags">关闭其他
|
|
|
|
+ </div>
|
|
<div
|
|
<div
|
|
class="item"
|
|
class="item"
|
|
- @click="closeAllTags">关闭全部</div>
|
|
|
|
|
|
+ @click="closeAllTags">关闭全部
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
:class="{'avue-tags__box--close':!website.isFirstPage}"
|
|
:class="{'avue-tags__box--close':!website.isFirstPage}"
|
|
@@ -48,118 +50,120 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-import { mapGetters, mapState } from 'vuex'
|
|
|
|
-export default {
|
|
|
|
- name: 'Tags',
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- active: '',
|
|
|
|
- contentmenuX: '',
|
|
|
|
- contentmenuY: '',
|
|
|
|
- contextmenuFlag: false
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- watch: {
|
|
|
|
- tag() {
|
|
|
|
- this.setActive()
|
|
|
|
- },
|
|
|
|
- contextmenuFlag() {
|
|
|
|
- window.addEventListener('mousedown', this.watchContextmenu)
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- created() {},
|
|
|
|
- mounted() {
|
|
|
|
- this.setActive()
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- ...mapGetters(['tagWel', 'tagList', 'tag', 'website']),
|
|
|
|
- ...mapState({
|
|
|
|
- showTag: state => state.common.showTag
|
|
|
|
- }),
|
|
|
|
- tagLen() {
|
|
|
|
- return this.tagList.length || 0
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- watchContextmenu() {
|
|
|
|
- if (!this.$el.contains(event.target) || event.button !== 0) {
|
|
|
|
- this.contextmenuFlag = false
|
|
|
|
- }
|
|
|
|
|
|
+ import { mapGetters, mapState } from 'vuex'
|
|
|
|
|
|
- window.removeEventListener('mousedown', this.watchContextmenu)
|
|
|
|
- },
|
|
|
|
- handleContextmenu(event) {
|
|
|
|
- let target = event.target
|
|
|
|
- // 解决 https://github.com/d2-projects/d2-admin/issues/54
|
|
|
|
- let flag = false
|
|
|
|
- if (target.className.indexOf('el-tabs__item') > -1) flag = true
|
|
|
|
- else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
|
|
|
|
- target = target.parentNode
|
|
|
|
- flag = true
|
|
|
|
|
|
+ export default {
|
|
|
|
+ name: 'Tags',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ active: '',
|
|
|
|
+ contentmenuX: '',
|
|
|
|
+ contentmenuY: '',
|
|
|
|
+ contextmenuFlag: false
|
|
}
|
|
}
|
|
- if (flag) {
|
|
|
|
- event.preventDefault()
|
|
|
|
- event.stopPropagation()
|
|
|
|
- this.contentmenuX = event.clientX
|
|
|
|
- this.contentmenuY = event.clientY
|
|
|
|
- this.tagName = target.getAttribute('aria-controls').slice(5)
|
|
|
|
- this.contextmenuFlag = true
|
|
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ tag() {
|
|
|
|
+ this.setActive()
|
|
|
|
+ },
|
|
|
|
+ contextmenuFlag() {
|
|
|
|
+ window.addEventListener('mousedown', this.watchContextmenu)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- // 激活当前选项
|
|
|
|
- setActive() {
|
|
|
|
- this.active = this.tag.value
|
|
|
|
|
|
+ created() {
|
|
},
|
|
},
|
|
- menuTag(value, action) {
|
|
|
|
- if (action === 'remove') {
|
|
|
|
- let { tag, key } = this.findTag(value)
|
|
|
|
- this.$store.commit('DEL_TAG', tag)
|
|
|
|
- if (tag.value === this.tag.value) {
|
|
|
|
- tag = this.tagList[key === 0 ? key : key - 1] // 如果关闭本标签让前推一个
|
|
|
|
- this.openTag(tag)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ mounted() {
|
|
|
|
+ this.setActive()
|
|
},
|
|
},
|
|
- openTag(item) {
|
|
|
|
- let tag
|
|
|
|
- if (item.name) {
|
|
|
|
- tag = this.findTag(item.name).tag
|
|
|
|
- } else {
|
|
|
|
- tag = item
|
|
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters(['tagWel', 'tagList', 'tag', 'website']),
|
|
|
|
+ ...mapState({
|
|
|
|
+ showTag: state => state.common.showTag
|
|
|
|
+ }),
|
|
|
|
+ tagLen() {
|
|
|
|
+ return this.tagList.length || 0
|
|
}
|
|
}
|
|
- this.$router.push({
|
|
|
|
- path: this.$router.$avueRouter.getPath({
|
|
|
|
- name: tag.label,
|
|
|
|
- src: tag.value
|
|
|
|
- }),
|
|
|
|
- query: tag.query
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- closeOthersTags() {
|
|
|
|
- this.contextmenuFlag = false
|
|
|
|
- this.$store.commit('DEL_TAG_OTHER')
|
|
|
|
},
|
|
},
|
|
- findTag(value) {
|
|
|
|
- let tag, key
|
|
|
|
- this.tagList.map((item, index) => {
|
|
|
|
- if (item.value === value) {
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ watchContextmenu() {
|
|
|
|
+ if (!this.$el.contains(event.target) || event.button !== 0) {
|
|
|
|
+ this.contextmenuFlag = false
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ window.removeEventListener('mousedown', this.watchContextmenu)
|
|
|
|
+ },
|
|
|
|
+ handleContextmenu(event) {
|
|
|
|
+ let target = event.target
|
|
|
|
+ // 解决 https://github.com/d2-projects/d2-admin/issues/54
|
|
|
|
+ let flag = false
|
|
|
|
+ if (target.className.indexOf('el-tabs__item') > -1) flag = true
|
|
|
|
+ else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
|
|
|
|
+ target = target.parentNode
|
|
|
|
+ flag = true
|
|
|
|
+ }
|
|
|
|
+ if (flag) {
|
|
|
|
+ event.preventDefault()
|
|
|
|
+ event.stopPropagation()
|
|
|
|
+ this.contentmenuX = event.clientX
|
|
|
|
+ this.contentmenuY = event.clientY
|
|
|
|
+ this.tagName = target.getAttribute('aria-controls').slice(5)
|
|
|
|
+ this.contextmenuFlag = true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 激活当前选项
|
|
|
|
+ setActive() {
|
|
|
|
+ this.active = this.tag.value
|
|
|
|
+ },
|
|
|
|
+ menuTag(value, action) {
|
|
|
|
+ if (action === 'remove') {
|
|
|
|
+ let { tag, key } = this.findTag(value)
|
|
|
|
+ this.$store.commit('DEL_TAG', tag)
|
|
|
|
+ if (tag.value === this.tag.value) {
|
|
|
|
+ tag = this.tagList[key === 0 ? key : key - 1] // 如果关闭本标签让前推一个
|
|
|
|
+ this.openTag(tag)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ openTag(item) {
|
|
|
|
+ let tag
|
|
|
|
+ if (item.name) {
|
|
|
|
+ tag = this.findTag(item.name).tag
|
|
|
|
+ } else {
|
|
tag = item
|
|
tag = item
|
|
- key = index
|
|
|
|
}
|
|
}
|
|
- })
|
|
|
|
- return { tag: tag, key: key }
|
|
|
|
- },
|
|
|
|
- closeAllTags() {
|
|
|
|
- this.contextmenuFlag = false
|
|
|
|
- this.$store.commit('DEL_ALL_TAG')
|
|
|
|
- this.$router.push({
|
|
|
|
- path: this.$router.$avueRouter.getPath({
|
|
|
|
- src: this.tagWel.value
|
|
|
|
- }),
|
|
|
|
- query: this.tagWel.query
|
|
|
|
- })
|
|
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: this.$router.$avueRouter.getPath({
|
|
|
|
+ name: tag.label,
|
|
|
|
+ src: tag.value
|
|
|
|
+ }),
|
|
|
|
+ query: tag.query
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ closeOthersTags() {
|
|
|
|
+ this.contextmenuFlag = false
|
|
|
|
+ this.$store.commit('DEL_TAG_OTHER')
|
|
|
|
+ },
|
|
|
|
+ findTag(value) {
|
|
|
|
+ let tag, key
|
|
|
|
+ this.tagList.map((item, index) => {
|
|
|
|
+ if (item.value === value) {
|
|
|
|
+ tag = item
|
|
|
|
+ key = index
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ return { tag: tag, key: key }
|
|
|
|
+ },
|
|
|
|
+ closeAllTags() {
|
|
|
|
+ this.contextmenuFlag = false
|
|
|
|
+ this.$store.commit('DEL_ALL_TAG')
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: this.$router.$avueRouter.getPath({
|
|
|
|
+ src: this.tagWel.value
|
|
|
|
+ }),
|
|
|
|
+ query: this.tagWel.query
|
|
|
|
+ })
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|