建设银行不良资产处置网站,wordpress 跳转插件,360渠道推广系统,新郑网站建设加载数据 本示例演示了怎样加载已有的JSON到设计器中。 如需了解详细的API教程以及参数说明#xff0c;请参考DDei文档
外部数据JSON
demo.vue
script setup langts
import DDeiEditorView from ddei-editor;
import { DDeiCoreStandLayou…加载数据 本示例演示了怎样加载已有的JSON到设计器中。 如需了解详细的API教程以及参数说明请参考DDei文档
外部数据JSON
demo.vue
script setup langts
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)
};/scripttemplatediv stylewidth:400px;height:400px;margin:100px auto;textarea v-modeljsontext styleborder:1px solid grey;margin-left:5px;padding:5px;width:100%;height:100%/textareabutton clickloadDataToEditor styleborder:1px solid grey;margin-left:5px;margin-top:20px;padding:5px加载数据/button/divdiv stylewidth:400px;height:400px;margin:100px auto;DDeiEditorView :optionsoptions refddei_editor_1 idddei_editor_1/DDeiEditorView/div
/template效果截图 仓库信息
源码: https://gitee.com/hoslay/ddei-editor
文档: http://docs.ddei.top
在线体验: https://www.ddei.top
