Vue 拖拽缩放组件 vue |
您所在的位置：网站首页 › vuedragresizejs自适应 › Vue 拖拽缩放组件 vue |
|
1、插件安装
cnpm install --save vue-drag-resize
2、main.js全局引用
import VueDragResize from 'vue-drag-resize'
Vue.component('vue-drag-resize', VueDragResize)
3、.vue页面使用
/*
isActive：是否是激活状态
isDraggable：是否等比例缩放
isResizable ：是否允许缩放
isDraggable：是否等比例缩放
aspectRatio 是否等比例缩放
parentLimitation 是否超出父级元素
axis 允许拖拽的方向
*/
// 局部引用
// import VueDragResize from 'vue-drag-resize';
export default {
name: 'printDesign',
components: {
// VueDragResize
},
data() {
return {
listWidth: 0,
listHeight: 0,
rects: [{
'width': 200,
'height': 150,
'top': 10,
'left': 10,
'draggable': true,
'resizable': true,
'minw': 100,
'minh': 100,
'axis': 'both',
'parentLim': true,
'snapToGrid': false,
'aspectRatio': false,
'zIndex': 1,
'color': '#EF9A9A',
'active': false
},
]
}
},
methods: {
activateEv(index) {
console.log(index)
// this.$store.dispatch('rect/setActive', {id: index});
},
// 当前缩放的元素索引
deactivateEv(index) {
console.log(index)
// this.$store.dispatch('rect/unsetActive', {id: index});
},
// 拖动的位置
changePosition(newRect, index) {
console.log(newRect,index)
// this.$store.dispatch('rect/setTop', {id: index, top: newRect.top});
// this.$store.dispatch('rect/setLeft', {id: index, left: newRect.left});
// this.$store.dispatch('rect/setWidth', {id: index, width: newRect.width});
// this.$store.dispatch('rect/setHeight', {id: index, height: newRect.height});
},
// 改变拉伸的大小
changeSize(newRect, index) {
console.log(newRect,index)
// this.$store.dispatch('rect/setTop', {id: index, top: newRect.top});
// this.$store.dispatch('rect/setLeft', {id: index, left: newRect.left});
// this.$store.dispatch('rect/setWidth', {id: index, width: newRect.width});
// this.$store.dispatch('rect/setHeight', {id: index, height: newRect.height});
}
}
}
.vdr.active:before {
outline: none
}
.manbox {
width: 400px;
height: 300px;
border: 1px solid red;
position: relative;
}
属性
isActive 是否激活状态 //处于激活状态的组件才能进行拖拽与缩放等操作，状态呈现激活状态 Type: Boolean || Required: false || Default: falseisDraggable 是否允许拖拽 Type: Boolean || Required: false || Default: trueisResizable 是否允许缩放 Type: Boolean || Required: false || Default: truew 组件宽度 Type: Number || Required: false || Default: 200h 组件高度 Type: Number || Required: false || Default: 200minw 最小宽度 //注意，不能设置为0，因为这个组件里面属性要求大于0 Type: Number || Required: false || Default: 50minh 最小高度 //注意，不能设置为0，因为这个组件里面属性要求大于0 Type: Number || Required: false || Default: 50x 定位left Type: Number || Required: false || Default: 0y 定位top Type: Number || Required: false || Default: 0z 层级 //注意在元素激活的时候，z会被设置为最高的，所以在管理z的时候要注意 Type: Number || Required: false || Default: autosticks 元素缩放的节点定义 Type: Array || Required: false || Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'] tl - Top left tm - Top middle tr - Top right mr - Middle right br - Bottom right bm - Bottom middle bl - Bottom left ml - Middle leftpreventActiveBehavior 单击组件外区域来禁止组件行为 //设置这个属性true，就可以解决在其他区域操作返回到组件区域的时候，不需要再次点击就激活组件 Type: Boolean || Required: false || Default: falseparentLimitation 是否超出父级元素 Type: Boolean || Required: false || Default: false //设置为true，则限制操作组件不能超出父级元素parentW 父级宽度 Type: Number || Required: false || Default: 0 //该值限制了元素可以拖动的水平最大宽度，前提是parentLimitation=trueparentH 父级高度 Type: Number || Required: false || Default: 0 //该值限制了元素可以拖动的水平最大高度，前提是parentLimitation=trueparentScaleX Type: Number || Required: false || Default: 1parentScaleY Type: Number || Required: false || Default: 1axis 允许拖拽的方向， //取值可以为x、 y、 both、none Type: String || Required: false || Default: bothdragHandle 定义拖拽时的classname Type: String || Required: falsedragCancel 定义取消拖拽时的classname Type: String || Required: false 事件clicked 组件点击事件 Required: false || Parameters: 组件实例activated 点击组件外事件 Required: false || Parameters: 无resizing 缩放时事件 Required: false || Parameters: object { left: Number, //the X position of the component top: Number, //the Y position of the component width: Number, //the width of the component height: Number //the height of the component }resizestop 缩放结束 //object 同resizing的object Required: false || Parameters: objectdragging 拖拽时事件 //object 同resizing的object Required: false || Parameters: objectdragstop 拖拽结束事件 Required: false || Parameters: object object 同resizing的objectissues 在拖拽元素里面添加input等类似的表单性元素，无法正常点击操作，特别是focus无法做到，click也是经常失效 //vue-drag-resize 的设计问题，在元素内部只能触发本元素，如果是有表单元素，只能被动的触发；解决： activateEv(index) { console.log('activateEv' + index); this.$refs['drag-input'].focus(); }怎么修改使点击组件外面后，不需要点击组件才能进行？ :preventActiveBehavior="true" 设置这个属性，禁用点击组件外事件 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |