center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

fix(移动端): 修复移动端Tab组件激活字体大小显示较小,视图可能存在空白区域问题

Browse Source
This commit is contained in:
wangjiahao 2022-12-06 18:00:45 +08:00
parent 5fc59d7801
commit a8acd5e058
8 changed files with 87 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/canvas/components/editor/MobileCheckBar.vue
View File

@ -13,6 +13,7 @@
<script>
import { mapState } from 'vuex'
export default {
props: {
element: {
@ -55,7 +56,7 @@ export default {
},
deleteComponent() {
this.$emit('amRemoveItem')
this.$store.commit('deleteComponent')
this.$store.commit('deleteComponentWithId', this.element.id)
this.$store.commit('setCurComponent', { component: null, index: null })
},
updateMobileSelected(id, mobileSelected) {
@ -70,29 +71,30 @@ export default {
</script>
<style lang="scss" scoped>
.bar-main{
position: absolute;
float:right;
z-index: 10000;
border-radius:2px;
padding-left: 1px;
padding-right: 1px;
cursor:pointer!important;
text-align: center;
background-color: var(--primary,#3370ff);
}
.bar-main i{
color: white;
float: right;
margin-right: 3px;
}
.bar-main {
position: absolute;
float: right;
z-index: 10000;
border-radius: 2px;
padding-left: 1px;
padding-right: 1px;
cursor: pointer !important;
text-align: center;
background-color: var(--primary, #3370ff);
}
.bar-main ::v-deep .el-checkbox__inner{
width: 16px;
height: 16px;
}
.bar-main i {
color: white;
float: right;
margin-right: 3px;
}
.bar-main ::v-deep .el-checkbox__inner::after{
width: 4.5px;
}
.bar-main ::v-deep .el-checkbox__inner {
width: 16px;
height: 16px;
}
.bar-main ::v-deep .el-checkbox__inner::after {
width: 4.5px;
}
</style>

2
frontend/src/components/canvas/components/editor/Preview.vue
View File

@ -635,7 +635,7 @@ export default {
component.style[key] = this.format(component.style[key], this.scaleHeight)
}
if (this.needToChangeWidth.includes(key)) {
if (key === 'fontSize' && (this.terminal === 'mobile' || component.type === 'custom')) {
if ((key === 'fontSize' || key === 'activeFontSize') && (this.terminal === 'mobile' || component.type === 'custom')) {
// do nothing 移动端字符大小无需按照比例缩放，当前保持不变(包括 v-text 和 过滤组件)
} else {
component.style[key] = this.format(component.style[key], this.scaleWidth)

1
frontend/src/components/canvas/customComponent/UserView.vue
View File

@ -85,6 +85,7 @@
:ref="element.propValue.id"
class="chart-class"
:chart="chart"
:terminal-type="scaleCoefficientType"
:track-menu="trackMenu"
:search-count="searchCount"
@onChartClick="chartClick"

53
frontend/src/components/canvas/store/layer.js
View File

@ -5,40 +5,49 @@ export default {
mutations: {
upComponent({ componentData, curComponent }) {
const curComponentIndex = findCurComponentIndex(componentData, curComponent)
// 上移图层 index，表示元素在数组中越往后
if (curComponentIndex < componentData.length - 1) {
moveUp(componentData, curComponentIndex)
} else {
toast('已经到顶了')
if (curComponent) {
const curComponentIndex = findCurComponentIndex(componentData, curComponent)
// 上移图层 index，表示元素在数组中越往后
if (curComponentIndex < componentData.length - 1) {
moveUp(componentData, curComponentIndex)
} else {
toast('已经到顶了')
}
}
},
downComponent({ componentData, curComponent }) {
const curComponentIndex = findCurComponentIndex(componentData, curComponent)
// 下移图层 index，表示元素在数组中越往前
if (curComponentIndex > 0) {
moveDown(componentData, curComponentIndex)
} else {
toast('已经到底了')
if (curComponent) {
const curComponentIndex = findCurComponentIndex(componentData, curComponent)
// 下移图层 index，表示元素在数组中越往前
if (curComponentIndex > 0) {
moveDown(componentData, curComponentIndex)
} else {
toast('已经到底了')
}
}
},
topComponent({ componentData, curComponent }) {
const curComponentIndex = findCurComponentIndex(componentData, curComponent)
// 置顶
if (curComponentIndex < componentData.length - 1) {
toTop(componentData, curComponentIndex)
if (curComponent) {
const curComponentIndex = findCurComponentIndex(componentData, curComponent)
// 置顶
if (curComponentIndex < componentData.length - 1) {
toTop(componentData, curComponentIndex)
}
}
},
bottomComponent({ componentData, curComponent }) {
const curComponentIndex = findCurComponentIndex(componentData, curComponent)
// 置底
if (curComponentIndex > 0) {
toBottom(componentData, curComponentIndex)
} else {
toast('已经到底了')
if (curComponent) {
const curComponentIndex = findCurComponentIndex(componentData, curComponent)
// 置底
if (curComponentIndex > 0) {
toBottom(componentData, curComponentIndex)
} else {
toast('已经到底了')
}
}
}
}

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

@ -17,7 +17,7 @@
:active-color="activeColor"
:border-color="borderColor"
:border-active-color="borderActiveColor"
:addable="isEdit"
:addable="isEdit && !mobileLayoutStatus"
@tab-add="addTab"
@tab-click="handleClick"
>
@ -710,6 +710,7 @@ export default {
::v-deep .el-tabs__nav-prev {
line-height: 25px;
}
::v-deep .el-tabs__nav-next {
line-height: 25px;
}

6
frontend/src/store/index.js
View File

@ -232,8 +232,8 @@ const data = {
}
},
setShapeStyle({ curComponent, canvasStyleData, curCanvasScaleMap }, { top, left, width, height, rotate }) {
const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId]
if (curComponent) {
const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId]
if (top || top === 0) curComponent.style.top = Math.round((top / curCanvasScaleSelf.scalePointHeight))
if (left || left === 0) curComponent.style.left = Math.round((left / curCanvasScaleSelf.scalePointWidth))
if (width || width === 0) curComponent.style.width = Math.round((width / curCanvasScaleSelf.scalePointWidth))
@ -569,7 +569,7 @@ const data = {
// 移动端布局转换
state.componentData.forEach(item => {
item.mobileStyle = (item.mobileStyle || BASE_MOBILE_STYLE)
if (item.mobileSelected || item.canvasId !== 'canvas-main') {
if (item.mobileSelected && item.canvasId === 'canvas-main') {
item.style.width = item.mobileStyle.style.width
item.style.height = item.mobileStyle.style.height
item.style.top = item.mobileStyle.style.top
@ -581,6 +581,8 @@ const data = {
item.sizey = item.mobileStyle.sizey
item.auxiliaryMatrix = item.mobileStyle.auxiliaryMatrix
mainComponentData.push(item)
} else if (item.canvasId !== 'canvas-main') {
mainComponentData.push(item)
}
})
state.componentData = mainComponentData

26
frontend/src/views/chart/components/ChartComponentS2.vue
View File

@ -67,8 +67,8 @@
>
{{ $t('chart.total') }}
<span>{{
(chart.datasetMode === 0 && !not_support_page_dataset.includes(chart.datasourceType)) ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
}}</span>
(chart.datasetMode === 0 && !not_support_page_dataset.includes(chart.datasourceType)) ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
}}</span>
{{ $t('chart.items') }}
</span>
<de-pagination
@ -101,10 +101,15 @@ import { DEFAULT_TITLE_STYLE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/cha
import ChartTitleUpdate from './ChartTitleUpdate.vue'
import { mapState } from 'vuex'
import DePagination from '@/components/deCustomCm/pagination.js'
export default {
name: 'ChartComponentS2',
components: { TitleRemark, ViewTrackBar, ChartTitleUpdate, DePagination },
props: {
terminalType: {
type: String,
default: 'pc'
},
chart: {
type: Object,
required: true
@ -183,13 +188,18 @@ export default {
return this.previewCanvasScale.scalePointWidth
},
autoStyle() {
return {
height: (100 / this.scale) + '%!important',
width: (100 / this.scale) + '%!important',
left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
transform: 'scale(' + this.scale + ')'
if (this.terminalType === 'pc') {
return {
height: (100 / this.scale) + '%!important',
width: (100 / this.scale) + '%!important',
left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
transform: 'scale(' + this.scale + ')'
}
} else {
return {}
}
},
trackBarStyleTime() {
return this.trackBarStyle

6
frontend/src/views/panel/edit/ComponentWait.vue
View File

@ -1,6 +1,7 @@
<template>
<el-row class="component-wait">
<el-tabs
class="wait-tab"
v-model="activeName"
style="padding-left: 10px"
>
@ -36,7 +37,7 @@
class="component-wait-main"
style="padding:10px"
>
<mobile-background-selector />
<mobile-background-selector/>
</el-row>
</el-row>
</template>
@ -141,7 +142,8 @@ export default {
height: 100%;
}
::v-deep .el-tabs--top {
.wait-tab {
height: 40px !important;
background-color: #9ea6b2;
}