一种基于Vue的可视化拖拽式布局编辑方法及系统

本发明提供了一种基于Vue的可视化拖拽式布局编辑方法及系统，涉及新一代信息技术产业技术领域，方法包括：初始化Vue组件的布局配置；根据布局配置，判断编辑模式是否为定制模式；若是，则禁用布局编辑权限，并加载布局数据和定制数据；否则，仅加载布局数据；基于布局数据和定制数据，渲染画布区域；设置组件工具栏；监听用户对组件工具栏中组件的拖拽事件，得到监听结果；根据监听结果，实时计算画布区域内的组件位置信息，并通过Vue响应式原理，动态渲染预览效果；基于组件位置信息和预览效果，响应于用户的保存指令，对页面数据进行数据验证与格式转换，得到标准化格式数据；将标准化格式数据保存并同步配置到目标显示终端设备。