草庐IT

VueCropper

全部标签

在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果)

文章目录前言一、使用步骤1.安装库2.引入库3.在component文件夹中新建一个裁剪Vue文件4.在父组件中使用(HTML)5.定义props传参(TS)6.核心方法(TS)总结前言某次看到后台系统中使用到了裁剪组件,感觉挺好玩的并且最近也在学Vue3和Ts,所以就研究了VueCropper组件,封装了裁剪组件,效果如下图。一、使用步骤1.安装库npmivue-cropper--save2.引入库代码如下(示例):import‘vue-cropper/dist/index.css’import{VueCropper}from‘vue-cropper’3.在component文件夹中新建一个