npm package: @neosjs/vue-dragresizable
Description: Vue3 drag and resizable component
Author: 听着情歌流泪
Latest version: 1.2.0

# @neosjs/vue-dragresizable

![NPM Version][npm-version-image] ![NPM Downloads][npm-downloads-image-week] ![NPM Downloads][npm-downloads-image-month] ![NPM License][license-image] ![Vue Dragresizable][vue-dragresizable]

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

> 注意：带 `beta` 的版本为支持 Vue2 的版本

## 安装

```bash
pnpm add @neosjs/vue-dragresizable
# or
npm install @neosjs/vue-dragresizable
```

## 使用方法

```vue
<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) License © 2021-PRESENT [NeosJS](https://docs.neosjs.com)

[npm-version-image]: https://img.shields.io/npm/v/@neosjs/vue-dragresizable?style=flat&colorA=2d333b&colorB=1fa669
[npm-downloads-image-week]: https://img.shields.io/npm/dw/@neosjs/vue-dragresizable?style=flatt&colorA=2d333b&colorB=1fa669
[npm-downloads-image-month]: https://img.shields.io/npm/dm/@neosjs/vue-dragresizable?style=flat&colorA=2d333b&colorB=1fa669
[license-image]: https://img.shields.io/npm/l/@neosjs/vue-dragresizable?style=flat&colorA=2d333b&colorB=1fa669
[vue-dragresizable]: https://img.shields.io/badge/NeosJS-vue--dragresizable-1fa669?style=flat&colorA=2d333b&colorB=1fa669