vue-image-crop基于Vue的移动端图片裁剪组件示例

发布时间：2020-12-17 02:12:15 所属栏目：百科来源：网络整理

导读：本文介绍了vue-image-crop基于Vue的移动端图片裁剪组件示例，分享给大家，具体如下：代码地址：https://github.com/jczzq/vue-image-crop vue-image-crop 基于Vue的移动端图片裁剪组件组件使用 URL.createObjectURL() 等新特性，使用前注意兼容问题。IE >=

本文介绍了vue-image-crop基于Vue的移动端图片裁剪组件示例，分享给大家，具体如下：代码地址：https://github.com/jczzq/vue-image-crop vue-image-crop 基于Vue的移动端图片裁剪组件组件使用`URL.createObjectURL()`等新特性，使用前注意兼容问题。IE >= 10 注意：该组件适用于 PC 端，不推荐手机端使用。功能预览快速开始安装Node >= `8.9.0`（推荐LTS = `8.11.0`） cd vue-image-crop npm install npm run dev 启动开发模式即可定制功能构建 build之后会重新生成lib文件夹 API props

本文介绍了vue-image-crop基于Vue的移动端图片裁剪组件示例，分享给大家，具体如下：

代码地址：https://github.com/jczzq/vue-image-crop

vue-image-crop

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

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

注意：该组件适用于 PC 端，不推荐手机端使用。

功能预览

快速开始

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

cd vue-image-crop
npm install
npm run dev

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

构建

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

API

props

属性名

events

事件名

示例代码

常规用法

<p>调整比例</p>
<m-image-crop class="mic mic2"
       v-model="img2"
       :proportion="{ w: 100,h: 35 }"&gt;</m-image-crop>

<p>列表</p>
<div class="list"&gt;
  <div class="item"
     v-for="(item,index) in imgList"
     :key="item.id"&gt;
    <m-image-crop class="mic"
           has-remove
           :value="item"
           :proportion="{ w: 1,h: 1 }"
           @remove="removeHandle(index)"&gt;</m-image-crop>
  </div>
  <div class="item add"
     @click="addHandle"&gt;添加图片</div>
</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

类型	默认值	说明
说明	回调参数