forked from github/dataease
fix(视图): echarts外边距设置
This commit is contained in:
fit2cloud-chenyw
parent
4b8b1aaf5d
commit
ebf36f8464
@ -916,6 +916,7 @@ export default {
|
||||
margin_model_absolute: 'Absolute',
|
||||
margin_model_relative: 'Relative',
|
||||
margin_placeholder: 'Please enter a number from 0-100',
|
||||
margin_absolute_placeholder: 'Please enter a number from 0-40',
|
||||
rich_text_view_result_tips: 'The rich text view selects only the first result',
|
||||
rich_text_view: 'Rich Text View',
|
||||
view_reset: 'View Reset',
|
||||
|
||||
@ -916,6 +916,7 @@ export default {
|
||||
margin_model_absolute: '絕對',
|
||||
margin_model_relative: '相對',
|
||||
margin_placeholder: '請輸入0-100數字',
|
||||
margin_absolute_placeholder: '請輸入0-40數字',
|
||||
rich_text_view_result_tips: '富文本只选取第一条结果',
|
||||
rich_text_view: '富文本视图',
|
||||
view_reset: '視圖重置',
|
||||
|
||||
@ -915,6 +915,7 @@ export default {
|
||||
margin_model_absolute: '绝对',
|
||||
margin_model_relative: '相对',
|
||||
margin_placeholder: '请输入0-100数字',
|
||||
margin_absolute_placeholder: '请输入0-40数字',
|
||||
rich_text_view_result_tips: '富文本只选取第一条结果',
|
||||
rich_text_view: '富文本视图',
|
||||
view_reset: '视图重置',
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<el-col>
|
||||
<el-form ref="marginForm" :model="marginForm" label-width="80px" size="mini" :rules="rules">
|
||||
<el-form-item v-show="showProperty('marginModel')" :label="$t('chart.margin_model')" class="form-item">
|
||||
<el-radio-group v-model="marginForm.marginModel" size="mini" @change="changeMarginStyle('marginModel')">
|
||||
<el-radio-group v-model="marginForm.marginModel" size="mini" @change="changeMarginStyle(marginForm.marginModel, 'marginModel')">
|
||||
<el-radio-button label="auto">{{ $t('chart.margin_model_auto') }}</el-radio-button>
|
||||
<el-radio-button label="absolute">{{ $t('chart.margin_model_absolute') }}</el-radio-button>
|
||||
<el-radio-button label="relative">{{ $t('chart.margin_model_relative') }}</el-radio-button>
|
||||
@ -11,25 +11,25 @@
|
||||
</el-form-item>
|
||||
<div v-show="showProperty('marginModel') && marginForm.marginModel !== 'auto'">
|
||||
<el-form-item v-show="showProperty('marginTop')" :label="$t('chart.text_pos_top')" class="form-item" prop="marginTop">
|
||||
<el-input v-model="marginForm.marginTop" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
|
||||
<el-input v-model="marginForm.marginTop" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
|
||||
<template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="showProperty('marginBottom')" :label="$t('chart.text_pos_bottom')" class="form-item" prop="marginBottom">
|
||||
<el-input v-model="marginForm.marginBottom" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
|
||||
<el-input v-model="marginForm.marginBottom" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
|
||||
<template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="showProperty('marginLeft')" :label="$t('chart.text_pos_left')" class="form-item" prop="marginLeft">
|
||||
<el-input v-model="marginForm.marginLeft" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
|
||||
<el-input v-model="marginForm.marginLeft" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
|
||||
<template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="showProperty('marginRight')" :label="$t('chart.text_pos_right')" class="form-item" prop="marginRight">
|
||||
<el-input v-model="marginForm.marginRight" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
|
||||
<el-input v-model="marginForm.marginRight" :placeholder="placeholder" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
|
||||
<template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
@ -84,6 +84,15 @@ export default {
|
||||
computed: {
|
||||
unitSuffix() {
|
||||
return getMarginUnit(this.marginForm)
|
||||
},
|
||||
placeholder() {
|
||||
if (this.marginForm.marginModel === 'absolute') {
|
||||
return this.$t('chart.margin_placeholder')
|
||||
} else if (this.marginForm.marginModel === 'relative') {
|
||||
return this.$t('chart.margin_absolute_placeholder')
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -113,6 +122,20 @@ export default {
|
||||
},
|
||||
|
||||
changeMarginStyle(value, modifyName) {
|
||||
if (modifyName === 'marginModel') {
|
||||
if (value === 'absolute') {
|
||||
this.marginForm.marginTop = JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)).marginTop
|
||||
this.marginForm.marginBottom = JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)).marginBottom
|
||||
this.marginForm.marginLeft = JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)).marginLeft
|
||||
this.marginForm.marginRight = JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)).marginRight
|
||||
}
|
||||
if (value === 'relative') {
|
||||
this.marginForm.marginTop = 15
|
||||
this.marginForm.marginBottom = 15
|
||||
this.marginForm.marginLeft = 5
|
||||
this.marginForm.marginRight = 5
|
||||
}
|
||||
}
|
||||
this.marginForm['modifyName'] = modifyName
|
||||
this.$emit('onMarginChange', this.marginForm)
|
||||
},
|
||||
@ -124,9 +147,14 @@ export default {
|
||||
callBack()
|
||||
return
|
||||
}
|
||||
if (value < 0 || value > 100) {
|
||||
if (this.marginForm.marginModel === 'absolute' && (value < 0 || value > 100)) {
|
||||
callBack(new Error(this.$t('chart.margin_placeholder')))
|
||||
this.marginForm[rule.field] = 0
|
||||
} else if (this.marginForm.marginModel === 'relative' && (value < 0 || value > 40)) {
|
||||
callBack(new Error(this.$t('chart.margin_absolute_placeholder')))
|
||||
this.marginForm[rule.field] = 0
|
||||
} else {
|
||||
callBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user