DDei在线设计器-加载数据

加载数据

  本示例演示了怎样加载已有的JSON到设计器中。

  如需了解详细的API教程以及参数说明，请参考DDei文档

外部数据JSON

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import { ref,getCurrentInstance } from "vue"; // [!code ++:4]
import {DDeiEditor,DDeiFile} from "ddei-editor";
//获取主对象实例，代替this获取$refs
const {proxy} = getCurrentInstance()const options = {config: { "grid": 0, //网格线 // [!code --]"background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]"background": -1, //无背景 // [!code ++]initData: { // [!code --:8]controls: [{model: "102010",text: "初始化图形"},]}},//配置扩展插件extensions: [//布局的配置DDeiCoreStandLayout.configuration({//配置插件'top': [],'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],'bottom': [],'left': [],'right': []}),],
}
//初始化json数据 // [!code ++:4]
const jsontext = ref(`{"name":"新建文件_NEW","desc":"","extData":{},"state":2,"publish":"0","lastUpdateTime":1721809587831,"path":"/新建文件_NEW","sheets":[{"name":"页面-1","desc":"页面-1","stage":{"id":"stage_1","layers":[{"id":"layer_default","name":"图层","models":{"task_1":{"id":"task_1","modelCode":"102010","modelType":"DDeiPolygon","cpv":{"x":148.5,"y":105,"z":1},"hpv":[{"x":148.5,"y":105,"z":1},{"x":174.95833333333334,"y":105,"z":1}],"exPvs":{},"poly":2,"mirrorX":false,"mirrorY":false,"sptStyle":{},"text":"加载图形","bpv":{"x":177.60416666666669,"y":123.52083333333333,"z":1},"model":"102010"}},"midList":["task_1"],"modelType":"DDeiLayer","baseModelType":"DDeiLayer","index":-1,"background":null,"display":1,"lock":false,"print":true,"centerOpPoints":[],"modelCode":"DDeiLayer","modelChanged":true,"modelNumber":1}],"layerIndex":0,"idIdx":1,"modelType":"DDeiStage","ratio":1,"width":2245.0393700787404,"height":1587.4015748031497,"wpv":{"x":-778.5196850393702,"y":-496.20078740157487,"z":0},"links":[],"spv":{"x":561.2598425196851,"y":396.85039370078744,"z":1},"modelCode":"DDeiStage","drawing":true,"unit":"mm"},"active":1,"modelType":"DDeiSheet","unicode":"10be3e690ac86f84a0de69fa49247019"}],"currentSheetIndex":0,"modelType":"DDeiFile","modelNumber":1,"unicode":"7f7864f482a9623988489f9c1621f93f","ddeiVersion":1239}
`)const loadDataToEditor = () => { // [!code ++:9]//获取编辑器实例let editor:DDeiEditor = proxy.$refs["ddei_editor_1"].editor;//获取文件jsonlet fileJSON = JSON.parse(jsontext.value)//加载json到编辑器editor.loadData(fileJSON)
};</script><template><div style="width:400px;height:400px;margin:100px auto;"><textarea v-model="jsontext" style="border:1px solid grey;margin-left:5px;padding:5px;width:100%;height:100%"></textarea><button @click="loadDataToEditor" style="border:1px solid grey;margin-left:5px;margin-top:20px;padding:5px">加载数据</button></div><div style="width:400px;height:400px;margin:100px auto;"><DDeiEditorView :options="options" ref="ddei_editor_1"  id="ddei_editor_1"></DDeiEditorView></div>
</template>

效果截图

仓库信息

源码: https://gitee.com/hoslay/ddei-editor

文档: http://docs.ddei.top

在线体验: https://www.ddei.top