konvajs 在 element dialog弹框中, 弹框加载出来, konvajs => canvas 却没有加载出来
原因: konvajs在普通页面上可以直接加载, 在弹框中, 想要加载出来, 则需要使用 dialog的两个事件, 打开弹框后调用和,离开弹框调用
<!-- 详情: @opened="onDialogOpened" dialog弹框打开后才会执行,避免konvajs未加载, @closed="onDialogClosed" 重置 -->
javascript
<template>
<div>
<el-button @click="openDialog">打开弹框</el-button>
<!-- 详情 @opened="onDialogOpened" dialog弹框打开后才会执行,避免konvajs未加载, @closed="onDialogClosed" 重置 -->
<el-dialog v-model:visible="dialogVisible" title="KonvaJS 弹框示例" width="50%" @opened="onDialogOpened">
<div>
<div ref="container" style="width: 500px; height: 500px;"></div>
</div>
</el-dialog>
</div>
</template>
<script>
import Konva from 'konva';
export default {
data() {
return {
dialogVisible: false,
stage: null
};
},
methods: {
openDialog() {
this.dialogVisible = true;
},
createKonvaStage() {
const container = this.$refs.container;
if (container) {
this.stage = new Konva.Stage({
container: container,
width: 300,
height: 300
});
const layer = new Konva.Layer();
const rect = new Konva.Rect({
x: 50,
y: 50,
width: 100,
height: 100,
fill: 'red',
draggable: true
});
layer.add(rect);
this.stage.add(layer);
}
},
onDialogOpened() {
this.createKonvaStage();
}
}
};
</script>
<style scoped>
/* 添加样式以适应您的需求 */
</style>
高德地图也是如此 (父传递子组件,子监听),不过我高德地图用的是监听解决的, 后边konvajs发现dialog有事件可以解决
这里就不过多演示了
javascript
// 监听 map地图 的变化, dialog中
watch(dialogVisible, (newValue) => {
if (newValue === true) {
mapFun()
} else {
showInputCircle.value = false // 默认隐藏
// console.log(showInputCircle.value);
path.value = [] // 多边形编辑
inputCircleValue.value = 1000 // 圆 半径
// lng.value = '' // 圆 经度
// lat.value = '' // 圆 维度
// const lng = ref('113.625317') //经度 默认
// const lat = ref('34.746308') //维度 默认
map?.destroy()
// console.log('地图已关闭')
}
})