active-box

active-box是一个基于interactjs封装的vue3.0组件

组件简介

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

安装

npm i active-box

引入

import { ActiveBox } from "active-box"

涉及类型

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