Vue3(setup)中使用vue-cropper图片上传裁剪插件,复制代码直接使用

最近在项目中用到上传裁剪,看了一下代码,觉得这插件可可以。梳理了一下代码分享给大家

前端UI组件element-plus

如果你也用到了 ,快速帮你解决了问题,别忘记点赞收藏

1.首先看效果图
Vue3(setup)中使用vue-cropper图片上传裁剪插件,复制代码直接使用_第1张图片
Vue3(setup)中使用vue-cropper图片上传裁剪插件,复制代码直接使用_第2张图片

Vue3(setup)中使用vue-cropper图片上传裁剪插件,复制代码直接使用_第3张图片
Vue3(setup)中使用vue-cropper图片上传裁剪插件,复制代码直接使用_第4张图片

  1. 因为版本vue-cropper 众多 ,虽然网上有各种写法 为了保证能运行 直接copy代码就能用
  2. 直接在package.json中添加依赖 "vue-cropper": "^1.0.9",
  3. Vue3(setup)中使用vue-cropper图片上传裁剪插件,复制代码直接使用_第5张图片
    然后安装依赖npm install

5 创建一个公用组件

imgcropper.vue





直接在页面中使用 例如index.vue

index.vue 



  



你可能感兴趣的:(vue3,vue.js,前端,javascript)