fix: 修复web组件跳转按钮不容易点击显示问题

This commit is contained in:
wangjiahao 2022-04-25 15:08:10 +08:00
parent ae38dc2715
commit dad008ee7d
4 changed files with 31 additions and 10 deletions

View File

@ -37,7 +37,7 @@
{{ $t('chart.export') }}<i class="el-icon-download" />
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
<el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
<el-dropdown-item v-if="showExportImgButton" icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>

View File

@ -159,7 +159,7 @@
{{ $t('chart.export') }}<i class="el-icon-download" />
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
<el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
<el-dropdown-item v-if="showExportImgButton" icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>

View File

@ -2,11 +2,15 @@
<el-row class="main-frame">
<div v-if="element.frameLinks.src" class="main-frame">
<iframe v-if="frameShow" id="iframe" :src="element.frameLinks.src" scrolling="auto" frameborder="0" class="main-frame" @load="loaded" @error="onError" />
<div v-if="editMode==='edit'" class="frame-mask">
<div v-if="editMode==='edit'" class="frame-mask edit-mask">
<span style="opacity: 1;">
<span style="font-weight: bold;color: lawngreen;">{{ $t('panel.edit_web_tips') }}</span>
</span>
</div>
<!--Here are three 15px wide masks(left top right) for easy clicking on the display jump button-->
<div v-if="editMode!=='edit'" class="frame-mask preview-top-mask" />
<div v-if="editMode!=='edit'" class="frame-mask preview-right-mask" />
<div v-if="editMode!=='edit'" class="frame-mask preview-left-mask" />
<div v-if="screenShot" class="frame-mask" />
</div>
<div v-else class="info-class">
@ -100,17 +104,34 @@ export default {
}
.frame-mask {
display: flex;
height: 100%!important;
width: 100% !important;
background-color: #5c5e61;
opacity: 0.5;
position:absolute;
top:0px;
left: 0px;
z-index: 2;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.edit-mask{
left: 0px;
background-color: #5c5e61;
height: 100%!important;
width: 100% !important;
}
.preview-top-mask{
left: 0px;
height: 15px!important;
width: 100% !important;
}
.preview-right-mask{
right: 0px;
height: 100%!important;
width: 15px !important;
}
.preview-left-mask{
left: 0px;
height: 100%!important;
width: 15px !important;
}
</style>

View File

@ -307,8 +307,8 @@ export default {
this.dataLoading = false
}, 300)
})
}, 500)
}, 0)
}, 1500)
}, 500)
},
downloadAsPDF() {