forked from github/dataease
feat(组件): Tab组件支持设置头部位置
This commit is contained in:
parent
c3ce2beb2e
commit
7d3a6cb0a2
frontend/src
components
lang
views
@ -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,
|
||||||
|
@ -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>
|
||||||
|
@ -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: {
|
||||||
|
|
||||||
|
@ -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'
|
||||||
|
@ -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,直接緩存所有頁面。詳情見'
|
||||||
|
@ -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,直接缓存所有页面。详情见'
|
||||||
|
@ -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 = {
|
||||||
|
@ -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 = {
|
||||||
|
Loading…
Reference in New Issue
Block a user