使用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字符串去除連續或全部重復字符的實例

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com