您现在的位置是：网站首页> 编程资料编程资料

关于ElementUI的el-upload组件二次封装的问题_vue.js_

2023-05-24 338人已围观

简介关于ElementUI的el-upload组件二次封装的问题_vue.js_

ElementUI的el-upload组件二次封装问题

开发工作中我们都会遇到图片上传的问题，虽说ElementUI已有提供图片上传的组件，但我们用到图片上传的地方肯定不止一处的，并且框架自带的组件并不能完全满足我们的需求，为此我对原有组件做了二次封装，做到一次封装，到处使用！

直接上代码：

组件

**uploadImg.vue**

使用

/*导入组件*/ import uploadImg from '@/components/uploadImg' /*组件注册*/ export default {     components: { uploadImg },     data(){         imgpath: '',     },     methods:{         /*执行uploadImg组件报出来的事件，path就是显示图片的路径*/         setCardPic(path, pic) {           this.form[pic] = path         },         /*详情的时候设定显示图片的路径 setEditImg是uploadImg组件提供的方法 imgpath是子组件的ref属性（看使用的组件）*/         this.$refs.imgpath.setEditImg('')     } }

效果：