# @clownjs/resize

> 拖拽更改元素尺寸插件

Latest version **0.0.3** (published 2022-09-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install @clownjs/resize
pnpm add @clownjs/resize
yarn add @clownjs/resize
bun add @clownjs/resize
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-09-09 |
| First published | 2022-06-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 34.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | UniqueCrownClown |
| Maintainers | uniquecrownclown |

## Links

- npm: https://www.npmjs.com/package/@clownjs/resize
- Repository: https://github.com/UniqueCrownClown/clownjs
- Homepage: https://uniquecrownclown.github.io/clownjs
- Issues: https://github.com/UniqueCrownClown/clownjs/issues
- npm.io page: https://npm.io/package/@clownjs/resize

## Recent versions

- 0.0.3 (latest) — 2022-09-09
- 0.0.1 — 2022-06-30

## README

# Resize

![Version](https://img.shields.io/npm/v/@clownjs/resize)
![Size](https://img.shields.io/bundlephobia/min/@clownjs/resize?color=%2344cc88)

**拖拽更改元素尺寸插件**
## 特性
1. 为box加入更改大小功能
2. 目前仅支持position:absolute的布局或者简单Flex布局
3. 可配置resize立即生效或者延迟生效
4. 封装了vue指令的形式

## 原生使用
```js
import CustomResize from '@clownjs/resize'
const resize = new CustomResize({
  el: '#resize', // Selector or Dom
  options: {
    // Your Options
    // 参考下方说明
  }
})
resize.init()
document.addEventListener('resize', (e) => {
  // 盒子更改后的处理逻辑,需自行处理,参数参考下方说明
  const { direction, moveOffset, moveOffsetPercent } = e
})
```

+ UMD CDN: <a href="https://unpkg.com/@clownjs/resize/dist/index.umd.js" target="_blank">https://unpkg.com/@clownjs/resize/dist/index.umd.js</a>
+ UMD Name: `HowdyResize`

### Options (Objcet)
|参数|说明|类型|可选值|默认值|
|:---|:---|:---|:---|:---|
|direction|resize方向数组|Array|left/right/top/bottom|right|
|immediate|resize是否立即执行，默认为false，false时会在点击时生成一条虚线，改完大小后松开鼠标，盒子大小才会变化；若为true则盒子大小会立即改变|Boolean|-|false|
|lineColor|生成边框线的颜色，边框线会生成在元素盒子需要resize方向的边框上|String|-|#aab|
|lineWidth|生成边框线的宽度|Number|-|2|
|lineHoverColor|生成边框线hover时的颜色|String|-|#88f|
|lineHoverWidth|生成边框线hover时的宽度|Number|-|4|
|tipLineColor|生成提示线的颜色,immediate为true时无效|String|-|#262626|
|tipLineWidth|生成提示线的宽度,immediate为true时无效|Number|-|1|
|tipLineStyle|生成提示线的线条样式,immediate为true时无效|String|-|dashed|
|zIndex|生成的线条的zIndex|Number|-|999|

> *Width属性的单位为px*

### Event
+ 初始化后，会自动加入一个resize的自定义事件监听。该插件并不会直接更改盒子的宽度高度，使用时需要在resize事件的回调中自行处理更改盒子宽高的逻辑。

回调函数中提供以下参数

|参数|说明|类型|
|:---|:---|:---|
|direction|本次操作的方向|String|
|moveOffset|resize改变的偏移量，单位为px|Number|
|moveOffsetPercent|resize改变的偏移量百分比，单位为%|Number|
|resizeWidth/resizeHeight|更改的宽或高|Number|
|resizeWidthPercent/resizeHeightPercent|更改的宽或高的百分比|Number|

## 以Vue指令方式使用
```js
import { ResizeDirective } from '@clownjs/resize'
// Vue3全局引入
app.use(ReizeDirective, someGlobalOptions)

// Vue2全局引入(对vue2做了兼容)
Vue.use(ReizeDirective, someGlobalOptions)

// 组件内引入
export default {
  directive: {
    resize: ResizeDirective
  }
}
```

### 指令Arg
1. top、left、bottom、right(默认),可以进行resize的方向
2. all，全部方向可resize

> *v-resize:left | v-resize:top | v-resize:all ...*

### 指令Value (Objcet)
参数同上方的配置`Options`

### 指令Event
+ 使用指令后，会自动加入一个resize的自定义事件监听。本指令并不会直接更改盒子的宽度高度，使用时需要在resize事件的回调中自行处理更改盒子宽高的逻辑,可直接使用“@resize="someMethod"”操作回调函数。回调参数同上方`Event`

---
_Source: https://npm.io/package/@clownjs/resize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._