vue可拖拽可伸缩的组件,目前只是借鉴,详见以下 传送门
npm install vue-draggable-div
<script>
import VueDraggableDiv from 'vue-draggable-div'
...
components: {VueDraggableDiv}
需要使用默认样式时,import 'vue-draggable-div/dist/vue-draggable-div.css'
Props:
-
draggable
descibe: 是否可拖拽
type: Boolean
require: false
default: true
<vue-draggable-div :draggable="false">
-
resizable
descibe: 是否可缩放
type: Boolean
require: false
default: true
<vue-draggable-div :resizable="false">
-
w
descibe: 宽度
type: Number
require: false
default: 200
<vue-draggable-div :w="200">
-
h
descibe: 高度
type: Number
require: false
default: 200
<vue-draggable-div :h="200">
-
parent
descibe: 限制在父元素内移动
type: Boolean
require: false
default: false
<vue-draggable-div :parent="true">
-
dragHandle
descibe: 可拖拽的元素。定义应该用于拖动组件的选择器。绑定的值为元素的class选择器。
type: String
require: false
default: 默认整个组件。
<vue-draggable-div drag-handle=".draggable"> <span class="undraggable">不可拖拽</span> <span class="draggable">可拖拽</span> </vue-draggable-div>
Events:
-
activated
descibe: 拖拽触发事件
type: Boolean
params: -
require: false
<vue-draggable-div @activated="activeFunc"> </vue-draggable-div> ... <script> methods: { activeFunc() {} } </script>
-
resizing
descibe: 拖拽触发事件
type: Boolean
params: (left, top, width, height)
require: false
<vue-draggable-div @resizing="resizingFunc"> </vue-draggable-div> ... <script> methods: { resizingFunc() {} } </script>
<template>
<div>
<vue-draggable-div>
<span>你拽我试试!!!</span>
</vue-draggable-div>
</div>
</template>
<script>
import VueDraggableDiv from 'vue-draggable-div'
export default {
name: 'Test',
data() {
return {}
},
components: {
VueDraggableDiv
}
}
</script>
打包使用命令 npm run build-bundle
See git.