@neosjs/vue-dragresizable

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>

Props

参数	说明	类型	默认值
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	-

Events

事件名	说明	回调参数
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]

handles

• tl - Top left
• tm - Top middle
• tr - Top right
• mr - Middle right
• br - Bottom right
• bm - Bottom middle
• bl - Bottom left
• ml - Middle left

License

MIT License © 2021-PRESENT NeosJS