leafer-ui
leafer-ui copied to clipboard
双击文本进入编辑模式时,文本就飘出编辑边框
如图所示,蓝色框是编辑框,文本飘到编辑框下方了
const box = new Text({
text: "Welcome to LeaferJS",
resizeFontSize:true,
editable: true
})
app.tree.add(box)
补充,经过反复测试已找到触发条件: 当leafer App挂载元素发生位置变化后,双击文本编辑,用于编辑的div会创建在位置变化之前的坐标。 测试代码如下:
<template>
<div style="height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;">
<div id="leaferEl" style="width: 400px;height: 400px;border: 1px solid red;"></div>
<!--准备用来顶leaferEl使其向上移动-->
<div id="block" style="height: 100px;width: 800px;background: red;display: none;"></div>
</div>
</template>
<script setup lang="ts">
import {App,Text} from "leafer-editor"
import { onMounted } from "vue";
onMounted(() => {
let app=new App({
view:"leaferEl",
width:400,
height:400,
tree:{},
editor:{}
})
const box = new Text({
text: "Welcome to LeaferJS",
resizeFontSize:true,
editable: true,
x:100,
y:100
})
app.tree.add(box)
setTimeout(() => {//这里100ms后 将block设置为可见,它会将leaferEl向上顶100px,那么后续的文本编辑框将会向下偏移100px
document.getElementById("block")!.style.display="block"
}, 100);
})
</script>
<style scoped lang="scss">
</style>
强制更新一下应用的client包围盒:app.updateClientBounds()
https://www.leaferjs.com/ui/reference/display/Leafer.html#updateclientbounds