Vue组件用于可拖动和可调整大小的元素。
注意:带
beta
的版本为支持 Vue2 的版本
pnpm add @neosjs/vue-dragresizable
# or
npm install @neosjs/vue-dragresizable
<script lang="ts" setup>
import VueDragresizable from '@neosjs/vue-dragresizable'
const handles = ref(['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'])
const fitParent = ref(false)
const width = ref(338)
const height = ref(250)
const maxW = ref('100%')
const maxH = ref('100%')
const minW = ref(338)
const minH = ref(250)
const dragSelector = ref('.drag-header')
const left = ref(`calc( 50% - ${width.value / 2}px)`)
const top = ref(`calc(50% - ${height.value / 2}px)`)
const maximize = ref(false)
const checkEmpty = (value) => {
return typeof value !== 'number' ? 0 : value
}
</script>
<template>
<div>
<VueDragresizable
:drag-selector="dragSelector"
:maximize="maximize"
:handles="handles"
:fit-parent="fitParent"
:width="width"
:height="height"
:max-width="checkEmpty(maxW)"
:max-height="checkEmpty(maxH)"
:min-width="checkEmpty(minW)"
:min-height="checkEmpty(minH)"
:x="left"
:y="top"
class="resizable"
>
<div class="resizable-content">
<p class="drag-header">
<span>标题</span>
</p>
<p>这里是内容哦</p>
<p>这里是内容哦</p>
</div>
</VueDragresizable>
</div>
</template>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
width | 初始宽度 | String、Number | - |
height | 初始高度 | String、Number | - |
max-width | 最大宽度 | Number | - |
max-height | 最大高度 | Number | - |
min-width | 最小宽度 | Number | 0 |
min-height | 最小高度 | Number | 0 |
x(left) | 初始 x 坐标 | String、Number | 0 |
y(top) | 初始 y 坐标 | String、Number | 0 |
zIndex | z-index 层级 | String、Number | auto |
lockRatio | 是否锁定比例 | Boolean | false |
hideHandles | 是否隐藏 handles | Boolean | false |
handles | 调整大小的点位(可拖拽放大的点位) | [String] 'tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'
|
- |
roundHandle | 是否圆角 handles | Boolean | false |
fitParent | 在父级容器里调整大小 | Boolean | false |
maximize | 是否允许最大化 | Boolean | false |
active | 是否激活 | Boolean | true |
dragSelector | 拖拽选择器 | String | - |
dragCancel | 拖拽取消选择器 | String | - |
classNameResizable | 自定义 Resizable 类名 | String | - |
classNameResizing | 自定义 Resizing 类名 | String | - |
classNameDraggable | 自定义 Draggable 类名 | String | - |
classNameDragging | 自定义 Dragging 类名 | String | - |
classNameActive | 自定义 Active 类名 | String | - |
classNameHandle | 自定义 Handle 类名 | String | - |
grid | 元素所在的网格 | [Number, Number] | [1, 1] |
axis | 可拖动元素的轴 | [String] 'x', 'y', 'both'
|
both |
scale | 缩放比例 | Number、Array | 1 |
onDragStart | 拖拽开始回调 | Function | - |
onDrag | 拖拽时的回调 | Function | - |
onResizeStart | 调整大小开始回调 | Function | - |
onResize | 调整大小时的回调 | Function | - |
事件名 | 说明 | 回调参数 |
---|---|---|
mounted | 组件挂载完成时触发 | [eventName、left、top、width、height] |
destroyed | 组件销毁时触发 | [eventName、left、top、width、height] |
deactivated | 组件失活时触发 | [eventName、left、top、width、height] |
resizeMove、resizeing | 调整大小时触发 | [eventName、left、top、width、height] |
resizeEnd、resizeStop | 调整大小结束时触发 | [eventName、left、top、width、height] |
dragMove、dragging | 拖拽时触发 | [eventName、left、top、width、height] |
dragEnd、dragStop | 拖拽结束时触发 | [eventName、left、top、width、height] |
maximize | 最大化时触发 | [eventName、left、top、width、height、state] |
-
tl
- Top left -
tm
- Top middle -
tr
- Top right -
mr
- Middle right -
br
- Bottom right -
bm
- Bottom middle -
bl
- Bottom left -
ml
- Middle left