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

     <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)：图片顺时针旋转