一个组件拖动插件

一个可移动拖拽的布局组件

# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

npm i drag-component-area 全局注册

import DragComponentArea from "drag-component-area"; Vue.use(DragComponentArea); 使用

<template> <drag-component-area ref="content"> <template #item="{ id }"> <div> {{ id }} </div> </template> </drag-component-area> </template> <script> export default { methods:{ addComponent(){ if (this.$refs.content) { for (let i = 0; i < 10; i++) { this.$refs.content.dragComponentArea.addComponent(); } } }, delComponent(id){ if (this.$refs.content) { this.$refs.content.dragComponentArea.delComponent(id); } } } } </script> drag-component-area 组件属性 disableMoveResize 禁止移动及放大 default: false maxCol 每行分割成多少列 default: 12 rowHeight 每行高度 default: 60 addComponent 参数 config： {Object} x 起始x偏移 y 起始y偏移 w 宽度 h 高度 @returns 新增的组件实例