dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #246 from dataease/pr@dev@panel

Browse Source 
feat:增加过滤组件标题样式设置
This commit is contained in:
王嘉豪 2021-07-15 16:32:13 +08:00 committed by GitHub
commit 5c15ac930f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 172 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -200,7 +200,7 @@ export default {
// 矩阵数量 默认 12 * 24
matrixCount: {
x: 24,
y: 48
y: 72
},
customStyleHistory: null,
showDrag: true,

1
frontend/src/components/dataease/DeOutWidget.vue
View File

@ -112,7 +112,6 @@ export default {
.first-title {
width: 100%;
overflow: hidden;
inset: 10px 0px 10px;
position: absolute;
color: inherit;
display: flex;

167
frontend/src/views/Tinymce/FilterTextAttr.vue Normal file
View File

@ -0,0 +1,167 @@
<template>
<el-card class="el-card-main" :style="mainStyle">
<div style="position: relative;">
<el-tooltip :content="$t('panel.fontSize')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="iconfont icon-font_size" />
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" />
</div>
<el-tooltip :content="$t('panel.fontWeight')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-font-weight-bold" />
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" />
</div>
<el-tooltip :content="$t('panel.letterSpacing')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-letter_spacing" />
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" />
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip :content="$t('panel.color')">
<i class="icon iconfont icon-zimua" @click="goColor" />
</el-tooltip>
<div :style="letterDivColor" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="背景颜色">
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
</div>
</el-card>
</template>
<script>
import { mapState } from 'vuex'
export default {
props: {
scrollLeft: {
type: Number,
default: 0
},
scrollTop: {
type: Number,
default: 0
}
},
data() {
return {
textAlignOptions: [
{
icon: 'iconfont icon-juzuo',
tooltip: this.$t('panel.text_align_left'),
label: 'left'
},
{
icon: 'iconfont icon-align-center',
tooltip: this.$t('panel.text_align_center'),
label: 'center'
},
{
icon: 'iconfont icon-juyou',
tooltip: this.$t('panel.text_align_right'),
label: 'right'
}
] }
},
computed: {
letterDivColor() {
const style = {
height: '2px',
background: this.styleInfo.color
}
return style
},
backgroundDivColor() {
const style = {
height: '2px',
background: this.styleInfo.backgroundColor
}
return style
},
mainStyle() {
const style = {
left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
}
return style
},
styleInfo() {
return this.$store.state.curComponent.style
},
...mapState([
'curComponent',
'curCanvasScale',
'canvasStyleData'
])
},
methods: {
goColor() {
this.$refs.colorPicker.handleTrigger()
},
goBackgroundColor() {
this.$refs.backgroundColorPicker.handleTrigger()
},
getPositionX(x) {
if (this.canvasStyleData.selfAdaption) {
return (x * this.curCanvasScale.scaleWidth / 100) + 60
} else {
return x + 60
}
},
getPositionY(y) {
if (this.canvasStyleData.selfAdaption) {
return y * this.curCanvasScale.scaleHeight / 100
} else {
return y
}
}
}
}
</script>
<style lang="scss" scoped>
.attr-list {
overflow: auto;
padding: 20px;
padding-top: 0;
height: 100%;
}
.el-card-main {
height: 34px;
z-index: 1000000000;
width: 350px;
position: absolute;
}
.el-card-main ::v-deep .el-card__body {
padding: 0px!important;
}
::v-deep .el-radio-button__inner{
padding: 5px!important;
width: 30px!important;
}
</style>

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

@ -161,7 +161,7 @@
<!--矩形样式组件-->
<RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
<TextAttr v-if="curComponent&&curComponent.type==='v-text'" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
<FilterTextAttr v-if="curComponent&&curComponent.type==='custom'&&curComponent.options.attrs.title" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
<!--复用ChartGroup组件 不做显示-->
<ChartGroup
ref="chartGroup"
@ -213,6 +213,7 @@ import { commonStyle, commonAttr } from '@/components/canvas/custom-component/co
import generateID from '@/components/canvas/utils/generateID'
import RectangleAttr from '@/components/canvas/components/RectangleAttr'
import TextAttr from '@/views/Tinymce/TextAttr'
import FilterTextAttr from '@/views/Tinymce/FilterTextAttr'
export default {
name: 'PanelEdit',
@ -234,7 +235,8 @@ export default {
PanelTextEditor,
RectangleAttr,
TextAttr,
ChartGroup
ChartGroup,
FilterTextAttr
},
data() {
return {