VueDraggableResizable 2

Vue2组件，用于可拖动和可调整大小的元素。

如果您正在寻找组件的版本1，可以在v1分支上找到它。

目录

• 特征
• 在线演示
• 安装和基本用法
  • Props
  • 事件
  • Styling
• 贡献
• License

特征

• 没有依赖

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

在线演示

有关组件的示例，请转到 在线演示

或者，您可以在自己的计算机上运行示例：

• 克隆此存储库
• npm install
• npm run storybook
• 访问 http://localhost:9001/

安装和基本用法

$ npm install --save vue-draggable-resizable

全局注册组件

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

局部注册注册

<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 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
export default {
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  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
    }
  }
}
</script>

Props

className

Type: String
Required: false
Default: vdr

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

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

classNameDraggable

Type: String
Required: false
Default: draggable

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

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

classNameResizable

Type: String
Required: false
Default: resizable

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

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

classNameDragging

Type: String
Required: false
Default: dragging

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

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

classNameResizing

Type: String
Required: false
Default: resizing

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

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

classNameActive

Type: String
Required: false
Default: active

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

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

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">

enableNativeDrag

Type: Boolean
Required: false
Default: false

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

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

active

Type: Boolean
Required: false
Default: false

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

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

preventDeactivation

Type: Boolean
Required: false
Default: false

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

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

draggable

Type: Boolean
Required: false
Default: true

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

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

resizable

Type: Boolean
Required: false
Default: true

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

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

w

Type: Number|String
Required: false
Default: 200

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

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

h

Type: Number|String
Required: false
Default: 200

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

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

minWidth

Type: Number
Required: false
Default: 50

定义元素的最小宽度。

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

minHeight

Type: Number
Required: false
Default: 50

定义元素的最小高度。

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

maxWidth

Type: Number
Required: false
Default: null

定义元素的最大宽度。

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

maxHeight

Type: Number
Required: false
Default: null

定义元素的最大高度。

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

x

Type: Number
Required: false
Default: 0

定义元素的初始x位置。

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

y

Type: Number
Required: false
Default: 0

定义元素的初始y位置。

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

z

Type: Number|String
Required: false
Default: auto

定义元素的zIndex。

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

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']">

axis

Type: String
Required: false
Default: both

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

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

grid

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

定义捕捉元素的网格。

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

parent

Type: Boolean | String
Required: false
Default: false

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

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

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

dragHandle

Type: String
Required: false

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

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

dragCancel

Type: String
Required: false

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

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

lockAspectRatio

Type: Boolean
Required: false
Default: false

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

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

onDragStart

Type: Function
Required: false
Default: null

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

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

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

onDrag

Type: Function
Required: false
Default: null

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

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

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

onResizeStart

Type: Function
Required: false
Default: null

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

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

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">

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

事件

activated

参数: -

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

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

deactivated

参数: -

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

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

resizing

参数:

• left元素的X位置

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

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

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

resizestop

参数:

• left元素的X位置

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

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

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

dragging

参数:

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

每当拖动组件时调用。

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

dragstop

参数:

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

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

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

Styling

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

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

鸣谢

感谢 @kirillmurashov 在 vue-drag-resize组件上所做的工作。

安全

如果您发现任何与安全相关的问题，请发送电子邮件至maurizio.bonani@gmail.com，而不是使用问题跟踪器。

贡献

任何对代码或文档任何部分的贡献以及任何想法和/或建议都是非常受欢迎的。

# serve with hot reload at localhost:8080
npm run serve

# distribution build
npm run build

# build the storybook docs into gh-pages
npm run gh-pages:build

# run unit tests
npm run unit

# run storybook at localhost:9001
npm run storybook

License

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