feat:仪表板视图改变大小时增加阴影效果

This commit is contained in:
wangjiahao 2021-09-16 12:04:21 +08:00
parent 6907d53306
commit 10e0f64b44
2 changed files with 16 additions and 4 deletions

View File

@ -21,6 +21,7 @@
@mouseleave="leave" @mouseleave="leave"
> >
<edit-bar v-if="active||linkageSettingStatus" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" /> <edit-bar v-if="active||linkageSettingStatus" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" />
<div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
<div <div
v-for="(handlei, indexi) in actualHandles" v-for="(handlei, indexi) in actualHandles"
:key="indexi" :key="indexi"
@ -440,6 +441,14 @@ export default {
...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto) ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
} }
}, },
resizeShadowStyle() {
return {
width: this.computedWidth,
height: this.computedHeight,
opacity: 0.2,
background: 'gray'
}
},
// //
actualHandles() { actualHandles() {
if (!this.resizable) return [] if (!this.resizable) return []
@ -1490,7 +1499,7 @@ export default {
// resize // resize
const self = this const self = this
setTimeout(function() { setTimeout(function() {
self.$emit('resizestop') self.$emit('resizeView')
}, 200) }, 200)
}, },
mountedFunction() { mountedFunction() {

View File

@ -12,7 +12,7 @@
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
> >
<!-- 网格线 --> <!-- 网格线 -->
<!-- <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />--> <!-- <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
<!-- 仪表板联动清除按钮--> <!-- 仪表板联动清除按钮-->
<canvas-opt-bar /> <canvas-opt-bar />
@ -41,7 +41,7 @@
:linkage-active="linkageSettingStatus&&item===curLinkageView" :linkage-active="linkageSettingStatus&&item===curLinkageView"
@refLineParams="getRefLineParams" @refLineParams="getRefLineParams"
@showViewDetails="showViewDetails(index)" @showViewDetails="showViewDetails(index)"
@resizestop="resizestop(index,item)" @resizeView="resizeView(index,item)"
> >
<component <component
:is="item.component" :is="item.component"
@ -104,6 +104,9 @@
:active="item === curComponent" :active="item === curComponent"
/> />
</de-drag> </de-drag>
<!--拖拽阴影部分-->
<!-- 右击菜单 --> <!-- 右击菜单 -->
<ContextMenu /> <ContextMenu />
<!-- 标线 (临时去掉标线 吸附等功能)--> <!-- 标线 (临时去掉标线 吸附等功能)-->
@ -631,7 +634,7 @@ export default {
showViewDetails(index) { showViewDetails(index) {
this.$refs.wrapperChild[index].openChartDetailsDialog() this.$refs.wrapperChild[index].openChartDetailsDialog()
}, },
resizestop(index, item) { resizeView(index, item) {
if (item.type === 'view') { if (item.type === 'view') {
this.$refs.wrapperChild[index].chartResize() this.$refs.wrapperChild[index].chartResize()
} }