@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