使用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:

style:

script:

第三步：父组件引用子组件

用了element-ui中的 el-dialog组件，此时el-dialog组件为父组件

在父组件中引入子组件

template:

script：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

解决Vue 通过下表修改数组,页面不渲染的问题

Vue.js实现图片的随意拖动方法

JS字符串去除连续或全部重复字符的实例

以上就是使用vue-cli结合Element-ui在cropper.js基础上封装vue来实现图片裁剪组件功能的详细内容，更多请关注Gxl网其它相关文章！