Browse Source

fix:svg和表格高度自适应

dev-xjf
肖晋飞 6 days ago
parent
commit
fdb7fb79b7
  1. 1
      src/views/dashboard/demo/components/ParameterInfo.vue
  2. 2
      src/views/dashboard/demo/components/staticSvg.vue
  3. 31
      src/views/dashboard/demo/components/svg.vue

1
src/views/dashboard/demo/components/ParameterInfo.vue

@ -89,7 +89,6 @@ onBeforeUpdate(async () => {
</template> -->
<BasicTable
:pagination="{ pageSize: 6 }"
:max-height="250"
:min-height="200"
:loading="loading" @register="registerTable"
>

2
src/views/dashboard/demo/components/staticSvg.vue

@ -44,6 +44,6 @@ function fullScreen() {
<style scoped>
::v-deep .ant-card-body {
padding: 5px;
height:calc(46vh - 56px)
height:calc(46vh - 60px);
}
</style>

31
src/views/dashboard/demo/components/svg.vue

@ -59,9 +59,9 @@ async function loadSvg() {
// DOM
await nextTick()
document.querySelector('.svg-container > svg')?.removeAttribute('width')
document.querySelector('.svg-container > svg')?.removeAttribute('height')
document.querySelector('.svg-container > svg')?.setAttribute('width', '100%')
document.querySelector('.svg-container > svg')?.setAttribute('height', '100%')
document.querySelector('.svg-container > svg')?.setAttribute('preserveAspectRatio', 'none')
// updateRealtimeValues()
}
catch (error) {
@ -76,8 +76,10 @@ async function updateRealtimeValues() {
return
try {
const svgElement = document.querySelector('.svg-container > svg')
svgElement?.removeAttribute('width')
svgElement?.removeAttribute('height')
svgElement?.setAttribute('width', '100%')
svgElement?.setAttribute('height', '100%')
svgElement?.setAttribute('preserveAspectRatio', 'none')
// SVG
if (!svgElement)
return
@ -212,9 +214,12 @@ defineExpose({
<style scoped>
.svg-wrapper {
width:100%;
height:100%;
border: 1px solid #e8e8e8;
border-radius: 6px;
overflow: hidden;
/* overflow: auto; */
}
/* .svg-controls {
@ -267,8 +272,16 @@ defineExpose({
}
/* SVG内容自适应 */
.svg-container > svg {
max-width: 100%;
max-height: 100%;
.svg-container {
/* max-width: 100%;
max-height: 100%; */
height:100%;
width:100%
}
svg {
height:98%;
width:100%;
}
</style>

Loading…
Cancel
Save