vue3-draggable-resizable-lollipope

Vue3 组件，用于可拖动和可调整大小的元素。
特别说明: 此库在Maurizio Bonani的[email protected]基础上进行了二次开发,并使用 vue3.x 和 ts 进行了重构

安装和基本用法

$ npm install --save vue3-draggable-resizable-lollipope

全局注册组件

import { createApp } from 'vue'
import VueDraggableResizable from 'vue3-draggable-resizable-lollipope'

// optionally import default styles
import 'vue3-draggable-resizable-lollipope/dist/style.css'
createApp(App).component('vue-draggable-resizable', VueDraggableResizable)

局部注册注册

• 非 setup 方式

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-draggable-resizable
      :w="100"
      :h="100"
      @dragging="onDrag"
      @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 'vue3-draggable-resizable-lollipope'
import 'vue3-draggable-resizable-lollipope/dist/style.css'

export default defineComponent({
  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
    },
    // other..
  }
})

</script>

• setup方式

<script setup lang="ts">
import { ref } from 'vue'
import VueDraggableResizable from 'vue3-draggable-resizable-lollipope'
import 'vue3-draggable-resizable-lollipope/dist/style.css'

const vLineRef = ref<LineProp[]>()
const hLineRef = ref<LineProp[]>()
// 辅助线回调事件
function getRefLineParams(params: { vLine: LineProp[]; hLine: LineProp[] }) {
  const { vLine, hLine } = params
  let id = 0
  vLineRef.value = vLine.map((item: LineProp) => {
    item['id'] = ++id
    return item
  })
  hLineRef.value = hLine.map((item: LineProp) => {
    item['id'] = ++id
    return item
  })
}
</script>

Props

className

Type: String Required: false Default: vdr

用于设置可拖动可调整大小的组件的自定义class。

<vue-draggable-resizable class-name="my-class"></vue-draggable-resizable>

classNameDraggable

Type: String Required: false Default: draggable

用于在启用draggable时设置可拖动可调整大小的组件的自定义class。

<vue-draggable-resizable class-name-draggable="my-draggable-class"></vue-draggable-resizable>

classNameResizable

Type: String Required: false Default: resizable

当启用resizable时，用于设置可拖动可调整大小的组件的自定义class。

<vue-draggable-resizable class-name-resizable="my-resizable-class"></vue-draggable-resizable>

classNameDragging

Type: String Required: false Default: dragging

用于在拖动时设置可拖动可调整大小的组件的自定义class。

<vue-draggable-resizable class-name-dragging="my-dragging-class"></vue-draggable-resizable>

classNameResizing

Type: String Required: false Default: resizing

用于在调整大小时设置可拖动可调整大小的组件的自定义class。

<vue-draggable-resizable class-name-resizing="my-resizing-class"></vue-draggable-resizable>

classNameActive

Type: String Required: false Default: active

用于在活动时设置可拖动可调整大小的组件的自定义class。

<vue-draggable-resizable class-name-active="my-active-class"></vue-draggable-resizable>

classNameHandle

Type: String Required: false Default: handle

用于设置每个句柄元素的自定义公共class。 这样你就可以使用选择器<your class> - <handle code>来单独设置每个句柄的样式，其中handle code标识handle prop 提供的句柄之一。

例如，这个组件：

<vue-draggable-resizable class-name-handle="my-handle-class"></vue-draggable-resizable>

呈现以下内容：

<div ...>
  <div class="my-handle-class my-handle-class-tl"></div>
  <div class="my-handle-class my-handle-class-tm"></div>
  <div class="my-handle-class my-handle-class-tr"></div>
  [...]
</div>

disableUserSelect

Type: Boolean Required: false Default: true

默认情况下，组件将样式声明user-select：none添加到自身以防止在拖动期间选择文本。 您可以通过将此 prop 设置为false来禁用此行为。

<vue-draggable-resizable :disable-user-select="false"></vue-draggable-resizable>

enableNativeDrag

Type: Boolean Required: false Default: false

默认情况下，浏览器的本机拖放功能（通常用于图像和其他一些元素）被禁用，因为它可能与组件提供的功能冲突。 如果您因任何原因需要恢复此功能，则可以将此道具设置为true。

<vue-draggable-resizable :enable-native-drag="true"></vue-draggable-resizable>

active

Type: Boolean Required: false Default: false

确定组件是否应处于活动状态。 道具对变化作出反应，也可以与sync modifier一起使用，以保持状态与父级同步。 您可以与preventDeactivation prop 一起使用，以便完全控制组件外部的活动行为。

<vue-draggable-resizable :active="true"></vue-draggable-resizable>

preventDeactivation

Type: Boolean Required: false Default: false

确定当用户在其外部单击/点击时是否应停用该组件。

<vue-draggable-resizable :prevent-deactivation="true"></vue-draggable-resizable>

draggable

Type: Boolean Required: false Default: true

定义组件应该是否可拖动。

<vue-draggable-resizable :draggable="false"></vue-draggable-resizable>

resizable

Type: Boolean Required: false Default: true

定义组件应该可以调整大小。

<vue-draggable-resizable :resizable="false"></vue-draggable-resizable>

w

Type: Number|String Required: false Default: 200

定义元素的初始宽度。它还支持auto，但是当您开始调整大小时，该值将退回到一个数字。

<vue-draggable-resizable :w="200"></vue-draggable-resizable>

h

Type: Number|String Required: false Default: 200

定义元素的初始高度。它还支持auto，但是当您开始调整大小时，该值将退回到一个数字。

<vue-draggable-resizable :h="200"></vue-draggable-resizable>

minWidth

Type: Number Required: false Default: 50

定义元素的最小宽度。

<vue-draggable-resizable :min-width="50"></vue-draggable-resizable>

minHeight

Type: Number Required: false Default: 50

定义元素的最小高度。

<vue-draggable-resizable :min-height="50"></vue-draggable-resizable>

maxWidth

Type: Number Required: false Default: null

定义元素的最大宽度。

<vue-draggable-resizable :max-width="400"></vue-draggable-resizable>

maxHeight

Type: Number Required: false Default: null

定义元素的最大高度。

<vue-draggable-resizable :max-height="50"></vue-draggable-resizable>

x

Type: Number Required: false Default: 0

定义元素的初始x位置。

<vue-draggable-resizable :x="0"></vue-draggable-resizable>

y

Type: Number Required: false Default: 0

定义元素的初始y位置。

<vue-draggable-resizable :y="0"></vue-draggable-resizable>

z

Type: Number|String Required: false Default: auto

定义元素的zIndex。

<vue-draggable-resizable :z="999"></vue-draggable-resizable>

handles

Type: Array Required: false Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']

定义句柄数组以限制元素大小调整：

• tl - 左上角
• tm - 上方中间

• tr - 右上角
• mr - 右中角
• br - 右下角
• bm - 底部中间
• bl - 左下角
• ml - 左中角

<vue-draggable-resizable :handles="['tm','bm','ml','mr']"></vue-draggable-resizable>

axis

Type: String Required: false Default: both

定义元素可拖动的轴。 可用值为x，y或both。

<vue-draggable-resizable axis="x"></vue-draggable-resizable>

grid

Type: Array Required: false Default: [1,1]

定义捕捉元素的网格。

<vue-draggable-resizable :grid="[1,1]"></vue-draggable-resizable>

parent

Type: Boolean | String Required: false Default: false

将组件的移动和尺寸限制为父组件（如果提供了就设置true），或者限制为由有效CSS选择器标识的元素。

<vue-draggable-resizable :parent="true"></vue-draggable-resizable>

<vue-draggable-resizable :parent=".selector"></vue-draggable-resizable>

dragHandle

Type: String Required: false

定义应该用于拖动组件的选择器。

<vue-draggable-resizable drag-handle=".drag"></vue-draggable-resizable>

dragCancel

Type: String Required: false

定义应该用于防止拖动初始化的选择器。

<vue-draggable-resizable drag-cancel=".drag"></vue-draggable-resizable>

lockAspectRatio

Type: Boolean Required: false Default: false

lockAspectRatio属性用于锁定宽高比。 此属性与grid不兼容，因此请确保一次只使用一个。

<vue-draggable-resizable :lock-aspect-ratio="true"></vue-draggable-resizable>

onDragStart

Type: Function Required: false Default: null

拖动开始时调用（单击或触摸元素）。 如果任何处理程序返回false，则操作将取消。 您可以使用此功能来防止事件冒泡。

<vue-draggable-resizable :onDragStart="onDragStartCallback"></vue-draggable-resizable>

function onDragStartCallback(ev){
   ...
   // return false; — for cancel
}

onDrag

Type: Function Required: false Default: null

在拖动元素之前调用。该函数接收 x 和 y 的下一个值。如果任何处理程序返回了“ false”，则该操作将取消。

<vue-draggable-resizable :onDrag="onDragCallback"></vue-draggable-resizable>

function onDragStartCallback(x, y){
   ...
   // return false; — for cancel
}

onResizeStart

Type: Function Required: false Default: null

调整大小时启动（单击或触摸手柄）。 如果任何处理程序返回false，则操作将取消。

<vue-draggable-resizable :onResizeStart="onResizeStartCallback"></vue-draggable-resizable>

function onResizeStartCallback(handle, ev){
   ...
   // return false; — for cancel
}

onResize

Type: Function Required: false Default: null

在调整元素大小之前调用。该函数接收句柄和下一个值“ x”，“ y”，“ width”和“ height”。如果任何处理程序返回了“ false”，则该操作将取消。

<vue-draggable-resizable :onResize="onResizeCallback"></vue-draggable-resizable>

function onResizeStartCallback(handle, x, y, width, height){
   ...
   // return false; — for cancel
}

事件

activated

参数: -

单击组件时调用，以显示句柄。

<vue-draggable-resizable @activated="onActivated"></vue-draggable-resizable>

deactivated

参数: -

每当用户单击组件外的任何位置时调用，以便停用它。

<vue-draggable-resizable @deactivated="onDeactivated"></vue-draggable-resizable>

resizing

参数:

• left元素的 X 位置

• top元素的 Y 位置
• width元素的宽度
• height元素的高度

每当组件调整大小时调用。

<vue-draggable-resizable @resizing="onResizing"></vue-draggable-resizable>

resizestop

参数:

• left元素的 X 位置

• top元素的 Y 位置
• width元素的宽度
• height元素的高度

每当组件停止调整大小时调用。

<vue-draggable-resizable @resizestop="onResizstop"></vue-draggable-resizable>

dragging

参数:

• left 元素的 X 位置
• top 元素的 Y 位置

每当拖动组件时调用。

<vue-draggable-resizable @dragging="onDragging"></vue-draggable-resizable>

dragstop

参数:

• left元素的 X 位置
• top 元素的 Y 位置

每当组件停止拖动时调用。

<vue-draggable-resizable @dragstop="onDragstop"></vue-draggable-resizable>

Styling

您可以使用作为 props 传递给组件的适当类名来设置组件的样式。 此外，您可以替换源文件vue-draggable-resizable.css中提供的句柄的默认样式，但您应该注意为它们定义位置和大小。 句柄的默认类是handle和handle-tl，handle-br等等。

该组件还为每个句柄提供named slots，因此您可以在每个句柄中使用您的标记。

特征

• 使用可拖动，可调整大小或两者兼备
• 定义用于调整大小的句柄
• 限制大小和移动到父元素或自定义选择器
• 将元素捕捉到自定义网格
• 将拖动限制为垂直或水平轴
• 保持纵横比
• 启用触控功能
• 使用自己的样式
• 为句柄提供自己的样式

安全

如果您发现任何与安全相关的问题，请发送电子邮件至[email protected]，而不是使用问题跟踪器。

License

The MIT License (MIT). Please see License File for more information.