|
vor 3 Jahren | |
---|---|---|
README.md | vor 3 Jahren | |
index.vue | vor 3 Jahren |
基于vue的图片裁剪插件
// 本项是基于vue-common-admin 框架开 中间用到了service服务
// 1、在项目下安装 npm install vue-img-cutter
// 2、在项目根目录下 mkdir addons
// 3、git clone http://git.sizhijie.com/vue-addons/image-cut-pc.git image-cut-pc
// 4、在vue中组件引入的方式使用
// 组件引入
import imageCutComponent from '../../../addons/image-cut-pc/index.vue';
import service from '@/service';
// 组件使用
<imageCutComponent @success="handleImageCutSuccess" @error="handleImageCutError" ref="image_cut_xxx"/>
// 定义图片裁剪成功后的方法
handleImageCutSuccess:function (filedata,params = {}) {
console.log(filedata,params);
}
//定义图片裁剪失败的方法
handleImageCutError:function(err) {
console.log(err)
}
//以element ui 2图片上传为例
//打开图片裁剪的方法
uploadImageHandle:async function(params) {
let base64Image = await service.image.file2Base64(params.file);
this.$refs.image_cut_xxx.cutOpen({name:params.file.name,src:base64Image},params);
}
2021年2月27日