github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-24 11:32:57 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor:修复仪表板矩形悬浮框部分样式设置

Browse Source
This commit is contained in:
wangjiahao 2021-07-27 14:42:00 +08:00
parent c0e86e6e30
commit 009c6ac9d0
1 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/canvas/components/RectangleAttr.vue
View File

@ -32,13 +32,29 @@
</el-tooltip>
</div>
<el-tooltip :content="$t('panel.borderRadius')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-fangxing-" />
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.borderRadius" type="number" size="mini" min="0" max="100" step="1" @change="styleChange" />
</div>
<el-tooltip :content="$t('panel.opacity')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" @change="styleChange" />
</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-huabi" @click="goBoardColor" />
</el-tooltip>
<div :style="boardDivColor" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
</div>
</div>
@ -48,9 +64,10 @@
<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" @change="styleChange"/>
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
</div>
</div>
</div>
</el-card>
</template>
@ -101,7 +118,20 @@ export default {
}, {
value: '5',
label: '5'
}]
}],
innerOpacity: 0
}
},
watch: {
innerOpacity: {
handler(oldVal, newVal) {
this.styleInfo['opacity'] = this.innerOpacity / 100
}
}
},
mounted() {
if (this.styleInfo['opacity']) {
this.innerOpacity = this.styleInfo['opacity'] * 100
}
},
computed: {
@ -176,7 +206,7 @@ export default {
.el-card-main {
height: 34px;
z-index: 10;
width: 210px;
width: 400px;
position: absolute;
}