vue-dragable-box
v0.1.5
基于vue2.x的拖动缩放组件,可嵌套子组件
Build Setup
# 根据自己网络情况选择,cnpm怎么用请自行百度npm install vue-dragable-boxcnpm install vue-dragable-boxthen---vue<template><div id="demo"><vue-dragable-box :your-list="list"><template v-for="(item,index) in list" :slot="'slot'+index">//循环自己需要的组件</template></vue-dragable-box></div></template><script>import drag from 'vue-dragable-box'export default{data(){return {list:[{x:1,y:1,sizex:1,sizey:1}]}},components:{'vue-dragable-box':drag}}</script>
Document
Attributes
props: , baseHeight: {//最小单元格高度 required: false, type: Number, default: 50 }, baseMarginLeft: {//单元格左边距 required: false, type: Number, default: 20 }, baseMarginTop: {//单元格上边距 required: false, type: Number, default: 20 }, draggable: {//是否允许拖动 required: false, default: true, type: Boolean }, dragStart: {//拖动开始时的事件 required: false, type: Function, default: }, dragging: {//拖动过程中的事件 required: false, type: Function, default: }, dragEnd: {//拖动结束时的事件 required: false, type: Function, default: }, resizable: {//是否允许缩放 required: false, type: Boolean, default: true, }, resizeStart: {//缩放开始事件 required: false, type: Function, default: }, resizing: {//缩放过程中的事件 required: false, type: Function, default: }, resizeEnd: {//缩放结束时的事件 required: false, type: Function, default: } }
API
// 在组件mounted后的手动初始化方式,方便多次初始化而不用去重新载入组件。 } addItemBox:function{ // item:布局方框,属性值应和props中的yourList数组对应的对象相同 } removeItem:function{ // index:方框所在list中的下标 } //此方法返回将yourList按照asc排序的数组 return sortedList; } //此方法返回当前宽度下每行的最大单元格个数 }
指定拖动和缩放触发器
vue-dragable-box默认以.item元素作为拖动触发器,以方格右下角的三角形为缩放触发器, 如果需要指定其他元素作为拖动触发器,可以为xx元素指定.dragHandle类名 同样,如果要指定xx元素作为缩放触发器,那么可以指定.resizeHandle类名
适配各个分辨率的屏幕
可以参考 src/test.vue里的102行的做法。
//屏幕适配,使得当前布局能在所有分辨率下适用,示例是在1366*638分辨率下完成 let screenWidth = window.innerWidth; // 当前屏幕的宽度 let screenHeight = window.innerHeight; // 当前屏幕的高度 this.baseWidth = 90.8333 * ; // 假设这里我们设置vue-dragable-box的最小单元格宽度为90.8333px,那么他在其他分辨率的屏幕上应该是该屏幕宽度与原本设置90.8333px的屏幕宽度的比值*90.83333 this.baseHeight = 100 * ; // 以此类推 this.baseMarginLeft = 20 * ; this.baseMarginTop = 20 * ;
TODO
- 继续完善文档
- 继续自己测试