1.0.4 • Published 1 year ago
drag-component-area v1.0.4
drag-component-area
一个可移动拖拽的布局组件
Build Setup
# 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
新增的组件实例