这篇文章将为大家详细讲解有关vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能的示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联专注于呼图壁网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供呼图壁营销型网站建设,呼图壁网站制作、呼图壁网页设计、呼图壁网站官网定制、重庆小程序开发服务,打造呼图壁网络公司原创品牌,更为您提供呼图壁网站排名全网营销落地服务。
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
在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组件为父组件
在父组件中引入子组件
import cropper from '@/components/Cropper/index'
template:
取 消 确 定
script:
import cropper from '@/components/Cropper/index' export default { name: 'addNews', components:{ cropper }, data(){ return { avatarUrl2: null, showCropper:false } }, methods:{ //隐藏裁剪框 cancelCropper(){ this.showCropper = false this.$refs.cropper.cropDone(); }, //父组件调用子组件裁剪方法 toCropper(){ this.$refs.cropper.submit(); }, //子组件裁剪方法成功执行后与父组件通信 cropperSuccessHandle(data){ //返回data this.showCropper = false this.avatarUrl2 = data.url } } }
关于“vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能的示例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。