# active-box

> A Vue3.0 component based on interactjs

Latest version **1.0.1** (published 2021-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install active-box
pnpm add active-box
yarn add active-box
bun add active-box
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-01-18 |
| First published | 2021-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | darma |
| Maintainers | darma1106 |
| Keywords | resizable, draggable, vue3.0 |

## Links

- npm: https://www.npmjs.com/package/active-box
- Repository: https://github.com/Darma1106/active-box
- Homepage: https://github.com/Darma1106/active-box#readme
- Issues: https://github.com/Darma1106/active-box/issues
- npm.io page: https://npm.io/package/active-box

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [interactjs](https://npm.io/package/interactjs.md) ^1.10.2

## Recent versions

- 1.0.1 (latest) — 2021-01-18
- 1.0.0 — 2021-01-18

## README

# active-box

**active-box 是一个基于[interactjs](https://interactjs.io)封装的 vue3.0 组件**

## 组件简介

Active-box 是一个轻量级、易使用的支持拖动和缩放的 vue3.0 组件。

## 安装

```shell
npm i active-box
```

## 引入

```typescript
import { ActiveBox } from "active-box";
```

## 涉及类型

```typescript
interface BoxState {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface EdgeOptions {
  top?: boolean | string | Element;
  left?: boolean | string | Element;
  bottom?: boolean | string | Element;
  right?: boolean | string | Element;
}
```

## 参数

| 参数           | 说明                              | 类型        | 默认值                                               | 例              |
| -------------- | --------------------------------- | ----------- | ---------------------------------------------------- | --------------- |
| draggable      | 是否可拖动                        | boolean     | true                                                 |                 |
| resizable      | 是否可缩放                        | boolean     | true                                                 |                 |
| initX          | 初始水平位置(px)                  | number      | 0                                                    |                 |
| initY          | 初始垂直位置(px)                  | number      | 0                                                    |                 |
| initWidth      | 初始宽度                          | number      | 300                                                  |                 |
| initHeight     | 初始高度                          | number      | 300                                                  |                 |
| minWidth       | 最小宽度                          | number      | 10                                                   |                 |
| minHeight      | 最小高度                          | number      | 10                                                   |                 |
| maxWidth       | 最大宽度                          | number      | Infinity                                             |                 |
| maxHeight      | 最大高度                          | number      | Infinity                                             |                 |
| dragHandle     | 拖动触发位置(dom 元素的 class/id) | string      | ""                                                   | “.head”,"#head" |
| resizeBarWidth | 缩放触发距离                      | number      | 10                                                   |                 |
| edges          | 可缩放方向                        | EdgeOptions | { left: true, right: true, bottom: true, top: true } |                 |

## 事件

| 事件名      | 说明     | 参数类型 |
| ----------- | -------- | -------- |
| dragStart   | 拖动开始 | BoxState |
| dragMove    | 拖动中   | BoxState |
| dragEnd     | 拖动结束 | BoxState |
| resizeStart | 缩放开始 | BoxState |
| resizeMove  | 缩放中   | BoxState |
| resizeEnd   | 缩放结束 | BoxState |

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