npm install --save vue-draggable-resizable
使用:<template>demo:
<div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
<vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
<p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
</vue-draggable-resizable>
</div>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
data: function () {
return {
width: 0,
height: 0,
x: 0,
y: 0
}
},
components:{VueDraggableResizable },
methods: {
onResize: function (x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
},
onDrag: function (x, y) {
this.x = x
this.y = y
}
}
}
</script>
https://mauricius.github.io/vue-draggable-resizable/
参数:1.active--是否激活
Type: Boolean
Required: false
Default: false
<vue-draggable-resizable :active="true">
2.draggable--是否可拖拽
Type: Boolean
Required: false
Default: true
Type: Boolean
Required: false
Default: true
Type: Number
Required: false
Default: 200
Type: Number
Required: false
Default: 200
Type: Number
Required: false
Default: 50
Type: Number
Required: false
Default: 50
Type: Number
Required: false
Default: 0
Type: Number
Required: false
Default: 0
Type: Number|String
Required: false
Default: auto
Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']
tl
- Top lefttm
- Top middletr
- Top rightmr
- Middle rightbr
- Bottom rightbm
- Bottom middlebl
- Bottom leftml
- Middle left
Type: String
Required: false
Default: both
Type: Array
Required: false
Default: [1,1]
Type: Boolean
Required: false
Default: false
Type: String
Required: false
Type: String
Required: false
true
allows the component to fill its parent when double-clicked.
Type: Boolean
Required: false
Default: false
Required: false
Parameters: -
Called whenever the component gets clicked, in order to show handles.
<vue-draggable-resizable @activated="onActivated"> 2.deactivatedRequired: false
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
<vue-draggable-resizable @deactivated="onDeactivated"> 3.resizingRequired: false
Parameters:
left
the X position of the elementtop
the Y position of the elementwidth
the width of the elementheight
the height of the element
Called whenever the component gets resized.
<vue-draggable-resizable @resizing="onResizing"> 4.resizestopRequired: false
Parameters:
left
the X position of the elementtop
the Y position of the elementwidth
the width of the elementheight
the height of the element
Called whenever the component stops getting resized.
<vue-draggable-resizable @resizestop="onResizstop"> 5.draggingRequired: false
Parameters:
left
the X position of the elementtop
the Y position of the element
Called whenever the component gets dragged.
<vue-draggable-resizable @dragging="onDragging"> 6.dragstopRequired: false
Parameters:
left
the X position of the elementtop
the Y position of the element
Called whenever the component stops getting dragged.
<vue-draggable-resizable @dragstop="onDragstop">
引用:https://www.npmjs.com/package/vue-draggable-resizable#demo
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)