Sprite9 九宫格

前言

九宫格，顾名思义，就是将图片拆分称9块，保证四个角固定不变，其它5块自由拉伸；最初接触到这个理念是在Cocos2dx游戏引擎中的Scale9Sprite。这里不做过多解释，不清楚九宫格原理的，可自行到Cocos2dx引擎API文档中查阅相关文档了解，这里是对应链接：Cocos2d-x: Scale9Sprite Class Reference

而在前端领域，经常我们开发的时候，会遇到美工制作的UI边框精美很复杂，但是却没法实现宽度、高度根据内容自动适应，如果直接去设置图片的宽高，会导致图片拉伸变形、模糊等问题。而九宫格的设计初衷就是为了解决该问题而出现的，但是很可惜，我目前还没有在前端中有看到实现该功能的插件或组件，因此自己写了一个组件，来解决以后项目中的这种问题

基本用法

修改图片

如果在某个时候，期望对图片进行更换，那么可以使用updateImg方法对九宫格图片进行修改，例如鼠标移入移出做出不同的效果

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	数值	ISprite9Data	-
transition	图片变更过渡效果，填写css的trantision样式值	string	-

ISprite9Data

属性名	说明	类型	默认值
img	图片地址，可以是本地也可以值网络地址	string	''
origin	九宫格裁切参考点	[number,number]	[0,0]
box	九宫格裁切中央盒子尺寸	[number,number]	[0,0]

Slots

属性名	说明	参数
default	九宫格的内容	-

Methods

方法名	说明	参数
updateImg	修改图片资源	data: ISprite9Data, cache: boolean = true
resize	重新构建视图尺寸（有时候其父级容器尺寸变更后，九宫格尺寸并未刷新，此时可以调用功能该方法刷新视图，重新计算尺寸）	-