# gmy-img-cropper
##　NPM安装： npm i  gmy-img-cropper
##　使用说明
### 页面引入：import gmyList from "../../components/gmy-img-cropper/gmy-img-cropper.vue"
### 页面使用：<gmy-img-cropper ref="gmyImgCropper" @getImg = "getImg"></gmy-img-cropper>
### 参数说明
* ref-->绑定组件
* getImg-->获取组件截取的图片路径
## 使用说明
* 页面通过按钮等调用事件：
chooseImg:function(){    //将chooseImg事件绑定到你的按钮或图标上
	this.$refs.gmyImgCropper.getImage();
	this.imgCropperShow = true;  //该标志用于控制页面在组件显示时主页面隐藏
},
* 备注：
该组件会占据整个屏幕，因此建议在调用截图组件时隐藏主页面内容，待截取成功后在getImg中再将主页面显示出来

##使用案例
<template>
	<view>
		<view v-show="!imgCropperShow">
			<button type="warn" @click="chooseImg" >选择图片</button>
		</view>
		<gmy-img-cropper ref="gmyImgCropper" @getImg = "getImg"></gmy-img-cropper>
  	</view>
</template>

<script>
	
	class List {
		constructor(code) {
		    this.isShow = false;
			this.code = code;
		}
		showCode(){
			this.isShow = !this.isShow;
		}
	}
	
	import gmyImgCropper from '@/components/gmy-img-cropper/gmy-img-cropper.vue'
	import marked from 'marked'
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		components:{
			uParse,
			gmyImgCropper
		},
		data() {
			return {
				imgSrc:'123',
				imgCropperShow:false
			}
		},
		methods: {
			chooseImg:function(){
				this.$refs.gmyImgCropper.getImage();
				this.imgCropperShow = true;
			},
			getImg:function(e){
				console.log("父页面拿到了图片",e);
				this.imgCropperShow = false;
			},
			show:function(list){
				this[list].showCode();
			}
		}
	}
</script>

<style lang="scss">
	body{
		background-color: $bgc;
	}
</style>