潍坊网站建设价格低免费软件app下载安装
本章主要是介绍自定义的组件：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
<WInputref="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)：图片顺时针旋转 |