API
Hook
Props
| Name | Type | Default 值 | Require | Desc | Version |
|---|---|---|---|---|---|
| board | Ref<HTMLElement | undefined> | undefined | Yes | Operation board | 0.0.3 |
| target | Ref<HTMLElement | undefined> | undefined | No | Operation target | 0.0.3 |
| zoomSpeed | number | 0.1 | No | Zoom speed | 0.0.3 |
| zoomMax | number | 3 | No | Max zoom | 0.0.3 |
| zoomMin | number | 0.2 | No | Min zoom | 0.0.3 |
| padding | [number, number, number, number] | 0.2 | No | Padding (affects fitSize method) | 0.0.3 |
| onReady | () => void | undefined | No | Initialized | 0.0.3 |
| onTargetChange | ( info: { width: number, height: number, left: number, top: number, zoom: number }, methods: { fitSize: (animate = false) => void, focus: (dom: HTMLElement | null | undefined, padding?: number) => void, center: (dom: HTMLElement | null | undefined) => void, zoom: (value: number, animate = false, point?: { x: number; y: number } | null) => void, } ) => void | undefined | No | Operation target change | 0.3.0 |
| onBoardChange | ( info: { width: number, height: number, left: number, top: number }, methods: { fitSize: (animate = false) => void, focus: (dom: HTMLElement | null | undefined, padding?: number) => void, center: (dom: HTMLElement | null | undefined) => void, zoom: (value: number, animate = false, point?: { x: number; y: number } | null) => void, } ) => void | undefined | No | Operation board change | 0.3.0 |
Component
Props
| Name | Type | Default 值 | Require | Desc | Version |
|---|---|---|---|---|---|
| zoomSpeed | number | 0.1 | No | Zoom speed | 0.0.3 |
| zoomMax | number | 3 | No | Max zoom | 0.0.3 |
| zoomMin | number | 0.2 | No | Min zoom | 0.0.3 |
| padding | [number, number, number, number] | 0.2 | No | Padding (affects fitSize method) | 0.0.3 |
Events
| Name | Type | Desc | Version |
|---|---|---|---|
| ready | ()=>void | Initialized | 0.0.3 |
| target-change | ( info: { width: number, height: number, left: number, top: number, zoom: number }, methods: { fitSize: (animate = false) => void, focus: (dom: HTMLElement | null | undefined, padding?: number) => void, center: (dom: HTMLElement | null | undefined) => void, zoom: (value: number, animate = false, point?: { x: number; y: number } | null) => void, } ) => void | Operation target change | 0.3.0 |
| board-change | ( info: { width: number, height: number, left: number, top: number }, methods: { fitSize: (animate = false) => void, focus: (dom: HTMLElement | null | undefined, padding?: number) => void, center: (dom: HTMLElement | null | undefined) => void, zoom: (value: number, animate = false, point?: { x: number; y: number } | null) => void, } ) => void | Operation board change | 0.3.0 |
Slots
| Name | Bind | Desc | Version |
|---|---|---|---|
| default | ( target: { width: number, height: number, left: number, top: number, zoom: number } board: { width: number, height: number, left: number, top: number }, methods: { fitSize: (animate = false) => void, focus: (dom: HTMLElement | null | undefined, padding?: number) => void, center: (dom: HTMLElement | null | undefined) => void, zoom: (value: number, animate = false, point?: { x: number; y: number } | null) => void, } ) | Default Slots | 0.3.0 |
Methods
| Name | Type | Desc | Version |
|---|---|---|---|
| fitSize | (animate = false) => void | Fit size base on board | 0.0.3 |
| foucs | (dom: HTMLElement | null | undefined, padding?: number) => void | Fit size base on target | 0.1.0 |
| center | (dom: HTMLElement | null | undefined) => void | Center target | 0.2.0 |
| zoom | (value: number, animate = false, point?: { x: number; y: number } | null) => void | Change zoom(point is center as defalut) | 0.3.0 |
Directive
Props
| Name | Type | Default 值 | Require | Desc | Version |
|---|---|---|---|---|---|
| zoomSpeed | number | 0.1 | No | Zoom speed | 0.0.3 |
| zoomMax | number | 3 | No | Max zoom | 0.0.3 |
| zoomMin | number | 0.2 | No | Min zoom | 0.0.3 |
| padding | [number, number, number, number] | 0.2 | No | Padding (affects fitSize method) | 0.0.3 |
| onReady | () => void | undefined | No | Initialized | 0.1.0 |
| onTargetChange | ( info: { width: number, height: number, left: number, top: number, zoom: number }, methods: { fitSize: (animate = false) => void, focus: (dom: HTMLElement | null | undefined, padding?: number) => void, center: (dom: HTMLElement | null | undefined) => void, zoom: (value: number, animate = false, point?: { x: number; y: number } | null) => void, } ) => void | undefined | No | Operation target change | 0.3.0 |
| onBoardChange | ( info: { width: number, height: number, left: number, top: number }, methods: { fitSize: (animate = false) => void, focus: (dom: HTMLElement | null | undefined, padding?: number) => void, center: (dom: HTMLElement | null | undefined) => void, zoom: (value: number, animate = false, point?: { x: number; y: number } | null) => void, } ) => void | undefined | No | Operation board change | 0.2.0 |