API

Hook

配置项

名称	类型	默认值	必填	说明	版本
board	Ref<HTMLElement | undefined>	undefined	是	操作区域	0.0.3
target	Ref<HTMLElement | undefined>	undefined	否	操作目标	0.0.3
zoomSpeed	number	0.1	否	缩放速度	0.0.3
zoomMax	number	3	否	最大缩放比例	0.0.3
zoomMin	number	0.2	否	最小缩放比例	0.0.3
padding	[number, number, number, number]	0.2	否	内边距（主要影响 fitSize 方法）	0.0.3
onReady	() => void	undefined	否	初始化完成	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	否	操作目标变化	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	否	操作区域变化	0.3.0

Component

配置项

名称	类型	默认值	必填	说明	版本
zoomSpeed	number	0.1	否	缩放速度	0.0.3
zoomMax	number	3	否	最大缩放比例	0.0.3
zoomMin	number	0.2	否	最小缩放比例	0.0.3
padding	[number, number, number, number]	0.2	否	内边距（主要影响 fitSize 方法）	0.0.3

事件

Name	Type	Desc	Version
ready	()=>void	初始化完成	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	操作目标变化	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	操作区域变化	0.3.0

插槽

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,   } )	默认插槽	0.3.0

方法

Name	Type	Desc	Version
fitSize	(animate = false) => void	适应区域大小	0.0.3
foucs	(dom: HTMLElement | null | undefined, padding?: number) => void	适应目标大小	0.1.0
center	(dom: HTMLElement | null | undefined) => void	目标居中	0.2.0
zoom	(value: number, animate = false, point?: { x: number; y: number } | null) => void	改变缩放大小（point默认为中心点）	0.3.0

Directive

配置项

名称	类型	默认值	必填	说明	版本
zoomSpeed	number	0.1	否	缩放速度	0.0.3
zoomMax	number	3	否	最大缩放比例	0.0.3
zoomMin	number	0.2	否	最小缩放比例	0.0.3
padding	[number, number, number, number]	0.2	否	内边距（主要影响 fitSize 方法）	0.0.3
onReady	() => void	undefined	否	初始化完成	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	否	操作目标变化	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	否	操作区域变化	0.3.0