vue 自定义组件image 和 input
本章主要是介绍自定义的组件：WInput：这是一个验证码输入框，自动校验，输入完成回调等；WImage：这是一个图片展示组件，集成了缩放，移动等操作。
目录
一、安装
二、引入组件
三、使用
1、WInput
2、WImage
一、安装
# yarn 安装 yarn add @travel_wsy/w_component # npm 安装 npm install @travel_wsy/w_component -S
二、引入组件
import Vue from 'vue';
import w_component from '@travel_wsy/w_component'
Vue.use(w_component)三、使用
1、WInput
<WInput
ref="smsInputRef"
@codeSuccess="getSmsCode"
:inputStyle="{ 'border-color': 'red' }"
bgColor="#ff0"
:smsLenght="8"
></WInput>
//获取输入结果
getSmsCode(e) {
console.log(e);
},参数：
| 参数名 | 描述 | 类型 |
| inputStyle | 验证码输入框样式，默认：{width:40px;height:48px;border-color:#dedede;} | Object |
| bgColor | 背景色，默认：#ffffff | string |
| smsLenght | 验证码长度，默认：6 | number |
Events:
| 事件名 | 描述 | 回调参数 |
| codeSuccess | 验证码输入完成后回调 | string：验证码 |
Methods:
| 方法名 | 描述 |
| clearInput | 清除输入框全部内容 |
效果图：
2、WImage
<WImage></WImage>参数：
| 参数名 | 类型 | 描述 |
| imgWidth | string | 图片宽度，默认值：300px |
| imgHeight | string | 图片高度，默认值：300px |
| src | string | 图片地址 |
Events：
| 事件名 | 描述 | 回调参数 |
| ImageChange | 图片发生改变 | scale(number)：图片缩放比例,left(number)：图片左偏移,top(number)：图片上偏移 |
Methods：
| 方法名 | 描述 | 参数 |
| handleActiveBtns | 改变图片 | scaleAdd(boolean)：图片放大(boolean)；scaleMinus(boolean)：图片缩小；rotateLeft(boolean)：图片逆时针旋转；rotateRight(boolean)：图片顺时针旋转 |