图片组件WImage--自带缩放、拖拽、旋转

最近因需求，需要图片实现缩放，拖拽等功能，就写了这个组件，用起来方便多了，现在把这个组件整理一下，大家有需要的话可以试试。

先看图，然后再对这个组件的使用进行详细解释：

这个组件可以使用鼠标操作，也可以点击进行操作，不过旋转图片只能使用按钮操作。

一、安装组件：

// yarn 安装
yarn add @travel_wsy/w_image

// npm 安装
npm install @travel_wsy/w_image -S

二、组件参数与方法说明：

  1、参数：

参数名称	参数类型	参数介绍	默认值
imgWidth	string	图片宽度	300px
imgHeight	string	图片高度	300px
src	string	图片地址	无

2、方法：

回调方法	返回参数	参数介绍	返回默认值
ImageChange	{ scale:number, left:number, top:number }	scale：图片缩放比例 left：图片左偏移 top：图片上偏移	scale：0， left：0， top：0

内置方法	参数	参数说明	默认值
handleActiveBtns	{ scaleAdd:false, scaleMinus:false, rotateLeft:false, rotateRight:false }	scaleAdd：是否放大图片， scaleMinus：是否缩小图片， rotateLeft：是否逆时针旋转， rotateRight：是否顺时针旋转	scaleAdd:false, scaleMinus:false, rotateLeft:false, rotateRight:false

3、引入：

import { WImage } from '@travel_wsy/w_image'

4、具体使用：

<WImage ref="wimageRef" imgWidth="600px" imgHeight="600px" src="" ></WImage>
<el-button type="primary" @click="handleSet(1)">放大</el-button>
<el-button type="primary" @click="handleSet(2)">缩小</el-button>
<el-button type="primary" @click="handleSet(3)">顺时针旋转</el-button>
<el-button type="primary" @click="handleSet(4)">逆时针旋转</el-button>

    handleSet(type){
      let activeObj = {}
      if(type == 1){
        activeObj['scaleAdd'] = true
      }else if(type == 2){
        activeObj['scaleMinus'] = true
      }else if(type == 3){
        activeObj['rotateRight'] = true
      }else if(type == 4){
        activeObj['rotateLeft'] = true
      }
      this.$refs.wimageRef.handleActiveBtns(activeObj)
    }