加載數(shù)據(jù)

??本示例演示了怎樣加載已有的JSON到設計器中。

??如需了解詳細的API教程以及參數(shù)說明，請參考DDei文檔

外部數(shù)據(jù)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, //網(wǎng)格線 // [!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數(shù)據(jù) // [!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">加載數(shù)據(jù)</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