Skip to content

组件拖拽之页面栅格化布局,vue、elementUI、vuedraggable可拖拽页面布局

License

Notifications You must be signed in to change notification settings

ronliruonan/aya-draglayout

Repository files navigation

aya-draglayout

这个是自己调研的一个比较糙的Demo, 里面有些垃圾代码,有点乱

主要有两个核心点:

  1. 支持拖拽
  2. 用了Vue的动态组件 <component is='component_name'>

余下的就是一些糙的code逻辑:

  1. 准备几个Vue的组件,用.js文件把这些组件export出去,
  2. Vue的支持的动态组件,利用:is来绑定被拖拽的组件名字
  3. 利用Vue.Draggel的事件,来完成组件数据记录
  4. 准备好 数据结构 + 页面布局,就ok了,

目前demo欠缺的是:

  1. 都需要手动把Vue挂件import,没能自动

Demo演示地址:https://ronliruonan.github.io/aya-draglayout/

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your end-to-end tests

npm run test:e2e

About

组件拖拽之页面栅格化布局,vue、elementUI、vuedraggable可拖拽页面布局

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published