vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
22 浏览量
2020-11-26
19:16:05
上传
评论
收藏 236KB PDF 举报
vue-cli结合结合Element-ui基于基于cropper.js封装封装vue实现图片裁剪组件功能实现图片裁剪组件功能
前端工作中，经常需要图片裁剪的场景，cropper.js是一款优秀的前端插件，api十分丰富。
本文是在vue-cli项目下封装图片裁剪插件，效果图如下：
话不多说，看步骤吧。
第一步：准备开发环境第一步：准备开发环境
cropper.js是基于jquery的，所以要先安装jquery
执行命令：
npm install --save-dev jquery cropper
为webpack配置添加jquery的映射
修改webpack.base.conf.js配置，添加标红的一行
第二步：新建图片裁剪组件第二步：新建图片裁剪组件
index.vue内容：
由于用了element-ui,其中布局就引用了element-ui的组件
template:
<template>
<div class="modal-dialog modal-lg" :id="id">
<div class="modal-content">
<form class="avatar-form" enctype="multipart/form-data" method="post">
<div class="modal-header">
</div>
<div class="modal-body">
<div class="avatar-body">
<!-- Upload image and data -->
<div class="avatar-upload">
<input type="hidden" class="avatar-src" name="avatar_src">
<input type="hidden" class="avatar-data" name="ci">
<label for="avatarInput" class="el-button el-button--primary">选择图片</label>
<input type="file" class="avatar-input " style="visibility: hidden" id="avatarInput" name="file">
</div>
<!-- Crop and preview -->
<el-row>
<el-col :span="18">
<div class="avatar-wrapper"></div>
</el-col>
<el-col :span="6" style="overflow: hidden;">
<div style="padding-left: 10px">
<div class="avatar-preview preview-lg" ></div>
<div class="avatar-preview avatar-preview-round preview-md"></div>
<!--<div class="avatar-preview preview-sm"></div>-->
</div>
</el-col>
</el-row>
<el-row class="avatar-btns">
<el-col :span="18">
<el-button-group>
评论0