Vue图片裁剪组件实例代码 Vue图片裁剪组件实例代码

示例：

文章图片

tip: 该组件基于vue-cropper二次封装
安装插件

npm install vue-cropperyarn add vue-cropper

写入封装的组件

/* @import url(); 引入css类 */.conbox {position: fixed; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; height: 100vh; width: 100%; background-color: #000; display: flex; flex-direction: column; justify-content: center; .info {width: auto; height: 800px; .vue-cropper {background-image: none; background-color: #000; }}.btns {padding: 0 20px; color: #fff; text-align: center; display: flex; justify-content: space-between; align-items: center; position: absolute; left: 0; right: 0; bottom: 15px; img {width: 85px; height: 85px; }.cancel {background-color: #606465; padding: 15px 20px; width: 100px; border-radius: 10px; }.okey {background-color: #df6457; padding: 15px 20px; width: 100px; border-radius: 10px; }}}