代码地址：/jczzq/vue-...

vue-image-crop

基于Vue的移动端图片裁剪组件

组件使用URL.createObjectURL()等新特性，使用前注意兼容问题。IE >= 10

功能预览

快速开始

安装Node >=8.9.0（推荐LTS =8.11.0）

# 安装 vue-cli 3.xnpm install -g @vue/clicd vue-image-cropnpm installnpm run dev

启动开发模式即可定制功能

构建

npm run build

build之后会重新生成lib文件夹

API

props

events

示例代码

<template><div class="ctnr"><p>常规用法</p><m-image-crop class="mic mic1"v-model="img"></m-image-crop><p>调整比例</p><m-image-crop class="mic mic2"v-model="img2":proportion="{ w: 100, h: 35 }"></m-image-crop><p>列表</p><div class="list"><div class="item"v-for="(item, index) in imgList":key="item.id"><m-image-crop class="mic"has-remove:value="item":proportion="{ w: 1, h: 1 }"@remove="removeHandle(index)"></m-image-crop></div><div class="item add"@click="addHandle">添加图片</div></div></div></template><script>export default {data() {return {img: {},img2: {},imgList: []};},methods: {addHandle() {this.imgList.push({});},removeHandle(index) {this.imgList.splice(index, 1);}}};</script><style lang="less">html,body {margin: 0;}.ctnr {height: 100vh;.mic {border: 1px dotted #4fc08d;}.mic1 {width: 200px;height: 100px;}.mic2 {width: 100vw;height: 35vw;}.list {font-size: 0;.item {box-sizing: border-box;font-size: 14px;vertical-align: middle;display: inline-block;border: 1px dotted #4fc08d;width: 33.33vw;height: 33.33vw;}.add {text-align: center;line-height: 33.33vw;}}}</style>