成都优化网站推广,网站未备案wordpress链接,局网站建设合同,新像素ui设计培训学校前言
最近接手了一个低代码平台可视化大屏做二次开发#xff0c;在这里做一些记录。
低代码平台简介#xff1a;低代码平台是一种开发工具#xff0c;它可以让开发人员使用简单的拖拽和配置来创建应用程序#xff0c;而不需要编写大量的代码。低代码平台通常包括一个可视化…前言
最近接手了一个低代码平台可视化大屏做二次开发在这里做一些记录。
低代码平台简介低代码平台是一种开发工具它可以让开发人员使用简单的拖拽和配置来创建应用程序而不需要编写大量的代码。低代码平台通常包括一个可视化的界面编辑器可以让开发人员通过拖拽和配置来创建应用程序的用户界面和业务逻辑。相关低代码平台 大屏可视化低代码在线体验 8.3k amis 可视化编辑器在线体验 1.9k
拖拽-vuedraggable
理解低代码通过拖拽组件来快速创建应用程序的用户界面
原生拖拽基本步骤拖拽开始 dragstart拖拽移动 dragover拖拽结束 dragend
本次demo使用一个支持vue的组件库vuedraggable快捷的实现拖拽功能npm i vuedraggablenext组件物料使用element-plus
npm i element-plus代码
// main.ts
import { createApp } from vue
import App from ./App.vue
// 导入组件库
import ElementPlus from element-plus
import element-plus/dist/index.css
// 或者 import element-plus/lib/theme-chalk/index.cssconst app createApp(App)
app.use(ElementPlus) // 使用组件库
app.mount(#app)script setup langts
import { ref } from vue
import draggable from vuedraggable// 需要使用ref
const list1 ref([{id: 1,tag: el-button,props: {type: primary},text: 按钮},{id: 2,tag: el-input,props: {placeholder: 请输入内容}},{id: 3,tag: el-switch}
])// 组件数据列表
const list2 ref([])
/scripttemplateel-container classcontainerel-aside classaside width200pxdraggableclasslistv-modellist1item-keyid:group{ name: component, pull: clone, put: false }:sortfalsetemplate #item{ element }div classitem{{ element.tag }}/div/template/draggable/el-asideel-main classmaindraggable v-modellist2 item-keyid classcontent :group{ name: component }template #item{ element }div classcomponent!-- is: 组件名v-bind: 动态 props--component :iselement.tag v-bindelement.props{{ element.text }}/component/div/template/draggable/el-main/el-container
/templatestyle scoped langscss
.container {display: flex;
}
.aside {background-color: pink;
}
.main {flex: 1;height: 100vh;background-color: skyblue;.content{background-color: #fff;height: 100%;}
}
.list {.item {border: #0083ee 1px solid;margin: 10px;padding: 10px;}
}
/style如果对值进行修改可以参考这个git-demo https://gitee.com/SongTaoo/lowcode
