13
0
forked from github/dataease

feat(组件): Tab组件支持设置头部位置

This commit is contained in:
wangjiahao 2022-10-31 11:01:54 +08:00
parent c3ce2beb2e
commit 7d3a6cb0a2
8 changed files with 52 additions and 17 deletions
frontend/src
components
canvas/components
widget/DeWidget
lang
views
chart/chart
panel

View File

@ -414,9 +414,10 @@ import StreamMediaLinks from '@/components/canvas/components/Editor/StreamMediaL
import DateFormat from '@/components/canvas/components/Editor/DateFormat' import DateFormat from '@/components/canvas/components/Editor/DateFormat'
import { COLOR_PANEL } from '@/views/chart/chart/chart' import { COLOR_PANEL } from '@/views/chart/chart/chart'
import FrameLinks from '@/components/canvas/components/Editor/FrameLinks' import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'
import TitlePosition from '@/components/widget/DeWidget/TitlePosition'
export default { export default {
components: { FrameLinks, DateFormat, VideoLinks, StreamMediaLinks }, components: { TitlePosition, FrameLinks, DateFormat, VideoLinks, StreamMediaLinks },
props: { props: {
canvasId: { canvasId: {
type: String, type: String,

View File

@ -1,6 +1,8 @@
<template> <template>
<div class="de-tabs-div"> <div
class="de-tabs-div"
:class="heatClass"
>
<dataease-tabs <dataease-tabs
v-model="activeTabName" v-model="activeTabName"
type="card" type="card"
@ -293,6 +295,9 @@ export default {
} }
}, },
computed: { computed: {
heatClass() {
return 'tab-head-' + this.element.style.headPosition
},
curCanvasScaleSelf() { curCanvasScaleSelf() {
return this.curCanvasScaleMap[this.canvasId] return this.curCanvasScaleMap[this.canvasId]
}, },
@ -634,5 +639,20 @@ export default {
.canvas_move_in { .canvas_move_in {
border-color: blueviolet; border-color: blueviolet;
} }
::v-deep .el-tabs__nav{
width: 100%;
}
.tab-head-left ::v-deep .el-tabs__nav{
width: 100%;
text-align: left;
}
.tab-head-right ::v-deep .el-tabs__nav{
width: 100%;
text-align: right;
}
.tab-head-center ::v-deep .el-tabs__nav{
width: 100%;
text-align: center;
}
</style> </style>

View File

@ -8,7 +8,7 @@
ref="tabsStyleForm" ref="tabsStyleForm"
:model="styleInfo" :model="styleInfo"
size="small" size="small"
class="demo-form-inline" class="de-form-item"
> >
<el-form-item <el-form-item
label="头部字体颜色" label="头部字体颜色"
@ -102,8 +102,17 @@
</el-input> </el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item :label="$t('detabs.head_position')">
<el-radio-group
v-model="styleInfo.headPosition"
size="mini"
>
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form> </el-form>
<i <i
slot="reference" slot="reference"
class="iconfont icon-tabs" class="iconfont icon-tabs"
@ -114,6 +123,7 @@
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
name: 'TabStyle', name: 'TabStyle',
props: { props: {
@ -123,9 +133,7 @@ export default {
} }
}, },
data() { data() {
return { return {}
}
}, },
computed: { computed: {

View File

@ -534,7 +534,8 @@ export default {
selectview: 'Select View', selectview: 'Select View',
selectOthers: 'Select Others', selectOthers: 'Select Others',
availableComponents: 'Available Components', availableComponents: 'Available Components',
please: 'Please' please: 'Please',
head_position: 'Head Position'
}, },
example: { example: {
warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details' warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'

View File

@ -534,7 +534,8 @@ export default {
selectview: '選擇視圖', selectview: '選擇視圖',
selectOthers: '選擇組件', selectOthers: '選擇組件',
availableComponents: '可選組件', availableComponents: '可選組件',
please: '未' please: '未',
head_position: '頭部位置'
}, },
example: { example: {
warning: '創建和編輯頁面是不能被 keep-alive 緩存的因爲keep-alive 的 include 目前不支持根據路由來緩存,所以目前都是基於 component name 來進行緩存的。如果妳想類似的實現緩存效果,可以使用 localStorage 等瀏覽器緩存方案。或者不要使用 keep-alive 的 include直接緩存所有頁面。詳情見' warning: '創建和編輯頁面是不能被 keep-alive 緩存的因爲keep-alive 的 include 目前不支持根據路由來緩存,所以目前都是基於 component name 來進行緩存的。如果妳想類似的實現緩存效果,可以使用 localStorage 等瀏覽器緩存方案。或者不要使用 keep-alive 的 include直接緩存所有頁面。詳情見'

View File

@ -533,7 +533,8 @@ export default {
selectview: '选择视图', selectview: '选择视图',
selectOthers: '选择组件', selectOthers: '选择组件',
availableComponents: '可选组件', availableComponents: '可选组件',
please: '未' please: '未',
head_position: '头部位置'
}, },
example: { example: {
warning: '创建和编辑页面是不能被 keep-alive 缓存的因为keep-alive 的 include 目前不支持根据路由来缓存,所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果,可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include直接缓存所有页面。详情见' warning: '创建和编辑页面是不能被 keep-alive 缓存的因为keep-alive 的 include 目前不支持根据路由来缓存,所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果,可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include直接缓存所有页面。详情见'

View File

@ -1,15 +1,17 @@
export const DEFAULT_TAB_COLOR_CASE_DARK = { export const DEFAULT_TAB_COLOR_CASE_DARK = {
headFontColor: '#FFFFFF', headFontColor: '#FFFFFF',
headFontActiveColor: '#FFFFFF', headFontActiveColor: '#FFFFFF',
headBorderColor: '', headBorderColor: '#FFFFFF',
headBorderActiveColor: '' headBorderActiveColor: '#FFFFFF',
headPosition: 'left'
} }
export const DEFAULT_TAB_COLOR_CASE_LIGHT = { export const DEFAULT_TAB_COLOR_CASE_LIGHT = {
headFontColor: '#OOOOOO', headFontColor: '#OOOOOO',
headFontActiveColor: '#OOOOOO', headFontActiveColor: '#OOOOOO',
headBorderColor: '', headBorderColor: '#OOOOOO',
headBorderActiveColor: '' headBorderActiveColor: '#OOOOOO',
headPosition: 'left'
} }
export const DEFAULT_COLOR_CASE = { export const DEFAULT_COLOR_CASE = {

View File

@ -5,8 +5,9 @@ import { COMMON_BACKGROUND_BASE } from '@/components/canvas/custom-component/com
export const TAB_COMMON_STYLE = { export const TAB_COMMON_STYLE = {
headFontColor: '#000000', headFontColor: '#000000',
headFontActiveColor: '#000000', headFontActiveColor: '#000000',
headBorderColor: null, headBorderColor: '#ffffff',
headBorderActiveColor: null headBorderActiveColor: '#ffffff',
headPosition: 'left'
} }
export const FILTER_COMMON_STYLE = { export const FILTER_COMMON_STYLE = {