这篇文章将为大家详细讲解有关vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能的示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联专注于呼图壁网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供呼图壁营销型网站建设,呼图壁网站制作、呼图壁网页设计、呼图壁网站官网定制、重庆小程序开发服务,打造呼图壁网络公司原创品牌,更为您提供呼图壁网站排名全网营销落地服务。
为什么要使用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实现图片裁剪组件功能的示例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
本文题目:vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能的示例
转载来于:http://www.jxjierui.cn/article/jggisj.html


咨询
建站咨询
