VueDraggableResizable 2

[![Latest Version on NPM](https://img.shields.io/npm/v/vue-draggable-resizable.svg?style=flat-square)](https://npmjs.com/package/vue-draggable-resizable) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md) [![npm](https://img.shields.io/npm/dt/vue-draggable-resizable.svg?style=flat-square)](https://www.npmjs.com/package/vue-draggable-resizable) > Vue2组件，用于可拖动和可调整大小的元素。 如果您正在寻找组件的版本1，可以在[v1分支](https://github.com/mauricius/vue-draggable-resizable/tree/v1)上找到它。 ## 目录 * [特征](#特征) * [在线演示](#在线演示) * [安装和基本用法](#安装和基本用法) * [Props](#props) * [事件](#事件) * [Styling](#styling) * [贡献](#贡献) * [License](#license) ### 特征 * 没有依赖 - 使用可拖动，可调整大小或两者兼备 - 定义用于调整大小的句柄 - 限制大小和移动到父元素或自定义选择器 - 将元素捕捉到自定义网格 - 将拖动限制为垂直或水平轴 - 保持纵横比 - 启用触控功能 - 使用自己的样式 - 为句柄提供自己的样式 ### 在线演示 有关组件的示例，请转到 [在线演示](http://tingtas.com/vue-draggable-resizable-gorkys/) 或者，您可以在自己的计算机上运行示例： * 克隆此存储库 * `npm install` * `npm run storybook` * 访问 [http://localhost:9001/](http://localhost:9001/) --- ## 安装和基本用法 ```bash $ npm install --save vue-draggable-resizable ``` 全局注册组件 ```js 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) ``` 局部注册注册 ```vue ``` ### Props #### className Type: `String`
Required: `false`
Default: `vdr` 用于设置可拖动可调整大小的组件的自定义`class`。 ```html ``` #### classNameDraggable Type: `String`
Required: `false`
Default: `draggable` 用于在启用`draggable`时设置可拖动可调整大小的组件的自定义`class`。 ```html ``` #### classNameResizable Type: `String`
Required: `false`
Default: `resizable` 当启用`resizable`时，用于设置可拖动可调整大小的组件的自定义`class`。 ```html ``` #### classNameDragging Type: `String`
Required: `false`
Default: `dragging` 用于在拖动时设置可拖动可调整大小的组件的自定义`class`。 ```html ``` #### classNameResizing Type: `String`
Required: `false`
Default: `resizing` 用于在调整大小时设置可拖动可调整大小的组件的自定义`class`。 ```html ``` #### classNameActive Type: `String`
Required: `false`
Default: `active` 用于在活动时设置可拖动可调整大小的组件的自定义`class`。 ```html ``` #### classNameHandle Type: `String`
Required: `false`
Default: `handle` 用于设置每个句柄元素的自定义公共`class`。 这样你就可以使用选择器` - `来单独设置每个句柄的样式，其中`handle code`标识`handle` prop提供的句柄之一。 例如，这个组件： ```html ``` 呈现以下内容： ```html
[...]
``` #### disableUserSelect Type: `Boolean`
Required: `false`
Default: `true` 默认情况下，组件将样式声明`user-select：none`添加到自身以防止在拖动期间选择文本。 您可以通过将此prop设置为`false`来禁用此行为。 ```html ``` #### enableNativeDrag Type: `Boolean`
Required: `false`
Default: `false` 默认情况下，浏览器的本机拖放功能（通常用于图像和其他一些元素）被禁用，因为它可能与组件提供的功能冲突。 如果您因任何原因需要恢复此功能，则可以将此道具设置为`true`。 ```html ``` #### active Type: `Boolean`
Required: `false`
Default: `false` 确定组件是否应处于活动状态。 道具对变化作出反应，也可以与`sync` [modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier)一起使用，以保持状态与父级同步。 您可以与`preventDeactivation` prop一起使用，以便完全控制组件外部的活动行为。 ```html ``` #### preventDeactivation Type: `Boolean`
Required: `false`
Default: `false` 确定当用户在其外部单击/点击时是否应停用该组件。 ```html ``` #### draggable Type: `Boolean`
Required: `false`
Default: `true` 定义组件应该是否可拖动。 ```html ``` #### resizable Type: `Boolean`
Required: `false`
Default: `true` 定义组件应该可以调整大小。 ```html ``` #### w Type: `Number|String`
Required: `false`
Default: `200` 定义元素的初始宽度。它还支持`auto`，但是当您开始调整大小时，该值将退回到一个数字。 ```html ``` #### h Type: `Number|String`
Required: `false`
Default: `200` 定义元素的初始高度。它还支持`auto`，但是当您开始调整大小时，该值将退回到一个数字。 ```html ``` #### minWidth Type: `Number`
Required: `false`
Default: `50` 定义元素的最小宽度。 ```html ``` #### minHeight Type: `Number`
Required: `false`
Default: `50` 定义元素的最小高度。 ```html ``` #### maxWidth Type: `Number`
Required: `false`
Default: `null` 定义元素的最大宽度。 ```html ``` #### maxHeight Type: `Number`
Required: `false`
Default: `null` 定义元素的最大高度。 ```html ``` #### x Type: `Number`
Required: `false`
Default: `0` 定义元素的初始`x`位置。 ```html ``` #### y Type: `Number`
Required: `false`
Default: `0` 定义元素的初始`y`位置。 ```html ``` #### z Type: `Number|String`
Required: `false`
Default: `auto` 定义元素的`zIndex`。 ```html ``` #### handles Type: `Array`
Required: `false`
Default: `['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']` 定义句柄数组以限制元素大小调整： * `tl` - 左上角 * `tm` - 上方中间 - `tr` - 右上角 - `mr` - 右中角 - `br` - 右下角 - `bm` - 底部中间 - `bl` - 左下角 - `ml` - 左中角 ```html ``` #### axis Type: `String`
Required: `false`
Default: `both` 定义元素可拖动的轴。 可用值为`x`，`y`或`both`。 ```html ``` #### grid Type: `Array`
Required: `false`
Default: `[1,1]` 定义捕捉元素的网格。 ```html ``` #### parent Type: `Boolean | String`
Required: `false`
Default: `false` 将组件的移动和尺寸限制为父组件（如果提供了就设置`true`），或者限制为由有效`CSS`选择器标识的元素。 ```html ``` ```html ``` #### dragHandle Type: `String`
Required: `false` 定义应该用于拖动组件的选择器。 ```html ``` #### dragCancel Type: `String`
Required: `false` 定义应该用于防止拖动初始化的选择器。 ```html ``` #### lockAspectRatio Type: `Boolean`
Required: `false`
Default: `false` `lockAspectRatio`属性用于锁定宽高比。 此属性与`grid`不兼容，因此请确保一次只使用一个。 ```html ``` #### onDragStart Type: `Function`
Required: `false`
Default: `null` 拖动开始时调用（单击或触摸元素）。 如果任何处理程序返回`false`，则操作将取消。 您可以使用此功能来防止事件冒泡。 ```html ``` ```js function onDragStartCallback(ev){ ... // return false; — for cancel } ``` #### onDrag Type: `Function`
Required: `false`
Default: `null` 在拖动元素之前调用。该函数接收x和y的下一个值。如果任何处理程序返回了“ false”，则该操作将取消。 ```html ``` ```js function onDragStartCallback(x, y){ ... // return false; — for cancel } ``` #### onResizeStart Type: `Function`
Required: `false`
Default: `null` 调整大小时启动（单击或触摸手柄）。 如果任何处理程序返回`false`，则操作将取消。 ```html ``` ```js function onResizeStartCallback(handle, ev){ ... // return false; — for cancel } ``` #### onResize Type: `Function`
Required: `false`
Default: `null` 在调整元素大小之前调用。该函数接收句柄和下一个值“ x”，“ y”，“ width”和“ height”。如果任何处理程序返回了“ false”，则该操作将取消。 ```html ``` ```js function onResizeStartCallback(handle, x, y, width, height){ ... // return false; — for cancel } ``` --- ### 事件 #### activated 参数: `-` 单击组件时调用，以显示句柄。 ```html ``` #### deactivated 参数: `-` 每当用户单击组件外的任何位置时调用，以便停用它。 ```html ``` #### resizing 参数: * `left`元素的X位置 - `top`元素的Y位置 - `width`元素的宽度 - `height`元素的高度 每当组件调整大小时调用。 ```html ``` #### resizestop 参数: * `left`元素的X位置 - `top`元素的Y位置 - `width`元素的宽度 - `height`元素的高度 每当组件停止调整大小时调用。 ```html ``` #### dragging 参数: * `left` 元素的X位置 * `top` 元素的Y位置 每当拖动组件时调用。 ```html ``` #### dragstop 参数: * `left`元素的X位置 * `top` 元素的Y位置 每当组件停止拖动时调用。 ```html ``` --- ### Styling 您可以使用作为props传递给组件的适当类名来设置组件的样式。 此外，您可以替换源文件`vue-draggable-resizable.css`中提供的句柄的默认样式，但您应该注意为它们定义位置和大小。 句柄的默认类是`handle`和`handle-tl`，`handle-br`等等。 该组件还为每个句柄提供[named slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots)，因此您可以在每个句柄中使用您的标记。 ## 鸣谢 感谢 @kirillmurashov 在 [vue-drag-resize](https://github.com/kirillmurashov/vue-drag-resize)组件上所做的工作。 ## 安全 如果您发现任何与安全相关的问题，请发送电子邮件至maurizio.bonani@gmail.com，而不是使用问题跟踪器。 ## 贡献 任何对代码或文档任何部分的贡献以及任何想法和/或建议都是非常受欢迎的。 ``` bash # 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](LICENSE) for more information.