github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 20:42:55 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #4964 from dataease/pr@dev@fix_tab-scoll

Browse Source 
fix(仪表板): 选项卡组件tab页过多时，轮播标题被遮挡，看不见部分标题了 #4956
This commit is contained in:
王嘉豪 2023-04-04 18:15:13 +08:00 committed by GitHub
commit 2cc9809688
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/widget/deWidget/DeTabs.vue
View File

@ -278,6 +278,7 @@ export default {
}, },
data() { data() {
return { return {
tabsAreaScroll: false,
timer: null, timer: null,
scrollLeft: 50, scrollLeft: 50,
scrollTop: 10, scrollTop: 10,
@ -312,7 +313,11 @@ export default {
return Boolean(this.$store.state.dragComponentInfo) return Boolean(this.$store.state.dragComponentInfo)
}, },
headClass() { headClass() {
return 'tab-head-' + this.element.style.headPosition if(this.tabsAreaScroll){
return 'tab-head-left'
}else{
return 'tab-head-' + this.element.style.headPosition
}
}, },
curCanvasScaleSelf() { curCanvasScaleSelf() {
return this.curCanvasScaleMap[this.canvasId] return this.curCanvasScaleMap[this.canvasId]
@ -405,6 +410,11 @@ export default {
this.initCarousel() this.initCarousel()
} }
}, },
'element': {
handler(newVal, oldVla) {
this.calcTabLength()
}
},
activeTabName: { activeTabName: {
handler(newVal, oldVla) { handler(newVal, oldVla) {
this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName }) this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
@ -452,17 +462,30 @@ export default {
}, },
created() { created() {
bus.$on('add-new-tab', this.addNewTab) bus.$on('add-new-tab', this.addNewTab)
this.activeTabName = this.element.options.tabList[0].name this.$nextTick(() => {
this.activeTabName = this.element.options.tabList[0].name
});
this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName }) this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
this.setContentThemeStyle() this.setContentThemeStyle()
}, },
mounted() { mounted() {
this.initCarousel() this.initCarousel()
this.calcTabLength()
}, },
beforeDestroy() { beforeDestroy() {
bus.$off('add-new-tab', this.addNewTab) bus.$off('add-new-tab', this.addNewTab)
}, },
methods: { methods: {
calcTabLength(){
this.$nextTick(()=>{
if(this.element.options.tabList.length>0){
const containerDom = document.getElementById("tab-"+this.element.options.tabList[this.element.options.tabList.length -1].name)
this.tabsAreaScroll = containerDom.parentNode.scrollWidth > containerDom.parentNode.parentNode.scrollWidth
}else{
this.tabsAreaScroll = false
}
})
},
getType() { getType() {
return this.element.type return this.element.type
}, },
@ -501,11 +524,13 @@ export default {
_this.timer = setInterval(() => { _this.timer = setInterval(() => {
const nowIndex = switchCount % _this.element.options.tabList.length const nowIndex = switchCount % _this.element.options.tabList.length
switchCount++ switchCount++
_this.activeTabName = _this.element.options.tabList[nowIndex].name _this.$nextTick(() => {
const targetRef = _this.$refs['canvasTabRef-' + _this.activeTabName] _this.activeTabName = _this.element.options.tabList[nowIndex].name
if (targetRef) { const targetRef = _this.$refs['canvasTabRef-' + _this.activeTabName]
targetRef[0].restore() if (targetRef) {
} targetRef[0].restore()
}
});
}, switchTime) }, switchTime)
} }
}, },