vue2组件封装+elementUI

1.VUE2图片上传封装

使用

1.    <ImageUpload v-model="picUrl" :fileSize="0"  @getImg="getImg"></ImageUpload>

复制代码

封装代码

1. <template>
2.   <div class="component-upload-image">
3.     <el-upload
4.       multiple
5.       :action="uploadImgUrl"
6.       list-type="picture-card"
7.       :on-success="handleUploadSuccess"
8.       :before-upload="handleBeforeUpload"
9.       :limit="limit"
10.       :on-error="handleUploadError"
11.       :on-exceed="handleExceed"
12.       ref="imageUpload"
13.       :on-remove="handleDelete"
14.       :show-file-list="true"
15.       :headers="headers"
16.       :file-list="fileList"
17.       :on-preview="handlePictureCardPreview"
18.       :class="{hide: this.fileList.length >= this.limit}"
19.     >
20.       <i class="el-icon-plus"></i>
21.     </el-upload>
23.     <!-- 上传提示 -->
24.     <div class="el-upload__tip" slot="tip" v-if="showTip">
25.       请上传
26.       <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
27.       <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
28.       的文件
29.     </div>
31.     <el-dialog
32.       :visible.sync="dialogVisible"
33.       title="预览"
34.       width="800"
35.       append-to-body
36.     >
37.       <img
38.         :src="dialogImageUrl"
39.         style="display: block; max-width: 100%; margin: 0 auto"
40.       />
41.     </el-dialog>
42.   </div>
43. </template>
45. <script>
46. import { getToken } from "@/utils/auth";
47. import { listByIds, delOss } from "@/api/system/oss";
49. export default {
50.   props: {
51.     value: [String, Object, Array],
52.     // 图片数量限制
53.     limit: {
54.       type: Number,
55.       default: 5,
56.     },
57.     // 大小限制(MB)
58.     fileSize: {
59.        type: Number,
60.       default: 5,
61.     },
62.     // 文件类型, 例如['png', 'jpg', 'jpeg']
63.     fileType: {
64.       type: Array,
65.       default: () => ["png", "jpg", "jpeg"],
66.     },
67.     // 是否显示提示
68.     isShowTip: {
69.       type: Boolean,
70.       default: true
71.     }
72.   },
73.   data() {
74.     return {
75.       number: 0,
76.       uploadList: [],
77.       dialogImageUrl: "",
78.       dialogVisible: false,
79.       hideUpload: false,
80.       baseUrl: process.env.VUE_APP_BASE_API,
81.       uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
82.       headers: {
83.         Authorization: "Bearer " + getToken(),
84.       },
85.       fileList: []
86.     };
87.   },
88.   watch: {
89.     value: {
90.       async handler(val) {
91.         if (val) {
92.           // 首先将值转为数组
93.           let list;
94.           if (Array.isArray(val)) {
95.             list = val;
96.           } else {
97.             await listByIds(val).then(res => {
98.               list = res.data;
99.               this.$emit("getImg", list);
100.             })
101.           }
102.           // 然后将数组转为对象数组
103.           this.fileList = list.map(item => {
104.             // 此处name使用ossId 防止删除出现重名
105.             item = { name: item.ossId, url: item.url, ossId: item.ossId };
106.             return item;
107.           });
108.         } else {
109.           this.fileList = [];
110.           return [];
111.         }
112.       },
113.       deep: true,
114.       immediate: true
115.     }
116.   },
117.   computed: {
118.     // 是否显示提示
119.     showTip() {
120.       return this.isShowTip && (this.fileType || this.fileSize);
121.     },
122.   },
123.   methods: {
124.     // 上传前loading加载
125.     handleBeforeUpload(file) {
126.       let isImg = false;
127.       if (this.fileType.length) {
128.         let fileExtension = "";
129.         if (file.name.lastIndexOf(".") > -1) {
130.           fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
131.         }
132.         isImg = this.fileType.some((type) => {
133.           if (file.type.indexOf(type) > -1) return true;
134.           if (fileExtension && fileExtension.indexOf(type) > -1) return true;
135.           return false;
136.         });
137.       } else {
138.         isImg = file.type.indexOf("image") > -1;
139.       }
141.       if (!isImg) {
142.         this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
143.         return false;
144.       }
145.       if (this.fileSize) {
146.         const isLt = file.size / 1024 / 1024 < this.fileSize;
147.         if (!isLt) {
148.           this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
149.           return false;
150.         }
151.       }
152.       this.$modal.loading("正在上传图片，请稍候...");
153.       this.number++;
154.     },
155.     // 文件个数超出
156.     handleExceed() {
157.       this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
158.     },
159.     // 上传成功回调
160.     handleUploadSuccess(res, file) {
161.       if (res.code === 200) {
162.         this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
163.         this.uploadedSuccessfully();
164.       } else {
165.         this.number--;
166.         this.$modal.closeLoading();
167.         this.$modal.msgError(res.msg);
168.         this.$refs.imageUpload.handleRemove(file);
169.         this.uploadedSuccessfully();
170.       }
171.     },
172.     // 删除图片
173.     handleDelete(file) {
174.       const findex = this.fileList.map(f => f.name).indexOf(file.name);
175.       if(findex > -1) {
176.         let ossId = this.fileList[findex].ossId;
177.         // delOss(ossId);
178.         this.fileList.splice(findex, 1);
179.         this.$emit("input", this.listToString(this.fileList));
180.       }
181.     },
182.     // 上传失败
183.     handleUploadError(res) {
184.       this.$modal.msgError("上传图片失败，请重试");
185.       this.$modal.closeLoading();
186.     },
187.     // 上传结束处理
188.     uploadedSuccessfully() {
189.       if (this.number > 0 && this.uploadList.length === this.number) {
190.         this.fileList = this.fileList.concat(this.uploadList);
191.         this.uploadList = [];
192.         this.number = 0;
193.         this.$emit("input", this.listToString(this.fileList));
194.         this.$modal.closeLoading();
195.       }
196.     },
197.     // 预览
198.     handlePictureCardPreview(file) {
199.       this.dialogImageUrl = file.url;
200.       this.dialogVisible = true;
201.     },
202.     // 对象转成指定字符串分隔
203.     listToString(list, separator) {
204.       let strs = "";
205.       separator = separator || ",";
206.       for (let i in list) {
207.         if (list[i].ossId) {
208.           strs += list[i].ossId + separator;
209.         }
210.       }
211.       return strs != "" ? strs.substr(0, strs.length - 1) : "";
212.     }
213.   }
214. };
215. </script>
216. <style scoped lang="scss">
217. // .el-upload--picture-card 控制加号部分
218. ::v-deep.hide .el-upload--picture-card {
219.     display: none;
220. }
221. // 去掉动画效果
222. ::v-deep .el-list-enter-active,
223. ::v-deep .el-list-leave-active {
224.     transition: all 0s;
225. }
227. ::v-deep .el-list-enter, .el-list-leave-active {
228.   opacity: 0;
229.   transform: translateY(0);
230. }
231. </style>

复制代码

2.文件上传封装

使用

1. <FileUpload v-model="fileIds" :fileSize="0"  @getfile="getfile"></FileUpload>

复制代码

封装代码

1. <template>
2.   <div class="upload-file">
3.     <el-upload
4.       v-if="isUpload"
5.       multiple
6.       :action="uploadFileUrl"
7.       :before-upload="handleBeforeUpload"
8.       :file-list="fileList"
9.       :limit="limit"
10.       :on-error="handleUploadError"
11.       :on-exceed="handleExceed"
12.       :on-success="handleUploadSuccess"
13.       :show-file-list="false"
14.       :headers="headers"
15.       class="upload-file-uploader"
16.       ref="fileUpload"
17.     >
18.       <!-- 上传按钮 -->
19.       <el-button size="mini" type="primary">选取文件</el-button>
20.       <!-- 上传提示 -->
21.       <div class="el-upload__tip" slot="tip" v-if="showTip">
22.         请上传
23.         <template v-if="fileSize">
24.           大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
25.         </template>
26.         <template v-if="fileType">
27.           格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
28.         </template>
29.         的文件
30.       </div>
31.     </el-upload>
33.     <!-- 文件列表 -->
34.     <transition-group
35.       class="upload-file-list el-upload-list el-upload-list--text"
36.       name="el-fade-in-linear"
37.       tag="ul"
38.       v-if="isFileList"
39.     >
40.       <li
41.         :key="file.url"
42.         class="el-upload-list__item ele-upload-list__item-content"
43.         style="padding: 0 4px"
44.         v-for="(file, index) in fileList"
45.       >
46.         <el-link :href="`${file.url}`" :underline="false" target="_blank">
47.           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
48.         </el-link>
49.         <div class="ele-upload-list__item-content-action" v-if="isUpload">
50.           <el-link :underline="false" @click="handleDelete(index)" type="danger"
51.             >删除</el-link
52.           >
53.         </div>
54.       </li>
55.     </transition-group>
56.   </div>
57. </template>
59. <script>
60. import { getToken } from "@/utils/auth";
61. import { listByIds, delOss } from "@/api/system/oss";
63. export default {
64.   name: "FileUpload",
65.   props: {
66.     // 值
67.     value: [String, Object, Array],
68.     // 数量限制
69.     limit: {
70.       type: Number,
71.       default: 5,
72.     },
73.     // 大小限制(MB)
74.     fileSize: {
75.       type: Number,
76.       default: 5,
77.     },
78.     // 文件类型, 例如['png', 'jpg', 'jpeg']
79.     fileType: {
80.       type: Array | Boolean,
81.       // default: () => ["doc", "xls", "ppt", "txt", "pdf"],
82.       default: () => ["doc", "docx", "xls", "xlsx", "ppt", ".pptx", "pdf"],
83.     },
84.     // 是否显示提示
85.     isShowTip: {
86.       type: Boolean,
87.       default: true,
88.     },
89.     // 是否显示文件列表
90.     isFileList: {
91.       type: Boolean,
92.       default: true,
93.     },
94.     dataIndex: {
95.       type: Number | String,
96.       default: 0,
97.     },
98.     // 是否可以上传
99.     isUpload: {
100.       type: Boolean,
101.       default: true,
102.     },
103.   },
104.   data() {
105.     return {
106.       number: 0,
107.       uploadList: [],
108.       baseUrl: process.env.VUE_APP_BASE_API,
109.       uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传文件服务器地址
110.       headers: {
111.         Authorization: "Bearer " + getToken(),
112.       },
113.       fileList: [],
114.     };
115.   },
116.   watch: {
117.     value: {
118.       async handler(val) {
119.         if (val) {
120.           let temp = 1;
121.           // 首先将值转为数组
122.           let list;
123.           if (Array.isArray(val)) {
124.             list = val;
125.           } else {
126.             console.log(val);
127.             await listByIds(val).then((res) => {
128.               list = res.data.map((oss) => {
129.                 oss = {
130.                   name: oss.originalName,
131.                   url: oss.url,
132.                   ossId: oss.ossId,
133.                 };
134.                 return oss;
135.               });
136.               this.$emit("getfile", list, this.dataIndex);
137.             });
138.           }
139.           // 然后将数组转为对象数组
140.           this.fileList = list.map((item) => {
141.             item = { name: item.name, url: item.url, ossId: item.ossId };
142.             item.uid = item.uid || new Date().getTime() + temp++;
143.             return item;
144.           });
145.         } else {
146.           this.fileList = [];
147.           return [];
148.         }
149.       },
150.       deep: true,
151.       immediate: true,
152.     },
153.   },
154.   computed: {
155.     // 是否显示提示
156.     showTip() {
157.       return this.isShowTip && (this.fileType || this.fileSize);
158.     },
159.   },
160.   methods: {
161.     // 上传前校检格式和大小
162.     handleBeforeUpload(file) {
163.       // 校检文件类型
164.       if (this.fileType) {
165.         const fileName = file.name.split(".");
166.         const fileExt = fileName[fileName.length - 1];
167.         const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
168.         if (!isTypeOk) {
169.           this.$modal.msgError(
170.             `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
171.           );
172.           return false;
173.         }
174.       }
175.       // 校检文件大小
176.       if (this.fileSize) {
177.         const isLt = file.size / 1024 / 1024 < this.fileSize;
178.         if (!isLt) {
179.           this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
180.           return false;
181.         }
182.       }
183.       this.$modal.loading("正在上传文件，请稍候...");
184.       this.number++;
185.       return true;
186.     },
187.     // 文件个数超出
188.     handleExceed() {
189.       this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
190.     },
191.     // 上传失败
192.     handleUploadError(err) {
193.       this.$modal.msgError("上传文件失败，请重试");
194.       this.$modal.closeLoading();
195.     },
196.     // 上传成功回调
197.     handleUploadSuccess(res, file) {
198.       if (res.code === 200) {
199.         this.uploadList.push({
200.           name: res.data.fileName,
201.           url: res.data.url,
202.           ossId: res.data.ossId,
203.         });
204.         this.uploadedSuccessfully();
205.       } else {
206.         this.number--;
207.         this.$modal.closeLoading();
208.         this.$modal.msgError(res.msg);
209.         this.$refs.fileUpload.handleRemove(file);
210.         this.uploadedSuccessfully();
211.       }
212.     },
213.     // 删除文件
214.     handleDelete(index) {
215.       let ossId = this.fileList[index].ossId;
216.       // delOss(ossId);
217.       this.fileList.splice(index, 1);
218.       this.$emit("input", this.listToString(this.fileList));
219.     },
220.     // 上传结束处理
221.     uploadedSuccessfully() {
222.       if (this.number > 0 && this.uploadList.length === this.number) {
223.         this.fileList = this.fileList.concat(this.uploadList);
224.         this.uploadList = [];
225.         this.number = 0;
226.         this.$emit("input", this.listToString(this.fileList));
227.         this.$modal.closeLoading();
228.       }
229.     },
230.     // 获取文件名称
231.     getFileName(name) {
232.       // 如果是url那么取最后的名字 如果不是直接返回
233.       if (name.lastIndexOf("/") > -1) {
234.         return name.slice(name.lastIndexOf("/") + 1);
235.       } else {
236.         return name;
237.       }
238.     },
239.     // 对象转成指定字符串分隔
240.     listToString(list, separator) {
241.       let strs = "";
242.       separator = separator || ",";
243.       for (let i in list) {
244.         strs += list[i].ossId + separator;
245.       }
246.       return strs != "" ? strs.substr(0, strs.length - 1) : "";
247.     },
248.   },
249. };
250. </script>
252. <style scoped lang="scss">
253. .upload-file-uploader {
254.   margin-bottom: 5px;
255. }
256. .upload-file-list .el-upload-list__item {
257.   border: 1px solid #e4e7ed;
258.   line-height: 2;
259.   margin-bottom: 10px;
260.   position: relative;
261. }
262. .upload-file-list .ele-upload-list__item-content {
263.   display: flex;
264.   justify-content: space-between;
265.   align-items: center;
266.   color: inherit;
267. }
268. .ele-upload-list__item-content-action .el-link {
269.   margin-right: 10px;
270. }
271. </style>

复制代码

3.图片回显

使用

1. <ImagePreview :src="content.picUrl" :width="150" :height="150"></ImagePreview>

复制代码

封装代码

1. <template>
2.   <div>
3.     <el-image v-for="(item,index) in realSrcList" :key="index"
4.     :src="`${item}`"
5.     fit="cover"
6.     :style="`width:${realWidth};height:${realHeight};`"
7.     :preview-src-list="realSrcList"
8.   >
9.     <div slot="error" class="image-slot">
10.       <i class="el-icon-picture-outline"></i>
11.     </div>
12.   </el-image>
13.   </div>
15. </template>
17. <script>
19. export default {
20.   name: "ImagePreview",
21.   props: {
22.     src: {
23.       type: String,
24.       default: ""
25.     },
26.     width: {
27.       type: [Number, String],
28.       default: ""
29.     },
30.     height: {
31.       type: [Number, String],
32.       default: ""
33.     }
34.   },
35.   computed: {
36.     realSrc() {
37.       if (!this.src) {
38.         return;
39.       }
40.       let real_src = this.src.split(",")[0];
41.       return real_src;
42.     },
43.     realSrcList() {
44.       if (!this.src) {
45.         return;
46.       }
47.       let real_src_list = this.src.split(",");
48.       let srcList = [];
49.       real_src_list.forEach(item => {
50.         return srcList.push(item);
51.       });
52.       return srcList;
53.     },
54.     realWidth() {
55.       return typeof this.width == "string" ? this.width : `${this.width}px`;
56.     },
57.     realHeight() {
58.       return typeof this.height == "string" ? this.height : `${this.height}px`;
59.     }
60.   },
61. };
62. </script>
64. <style lang="scss" scoped>
65. .el-image {
66.   border-radius: 5px;
67.   background-color: #ebeef5;
68.   box-shadow: 0 0 5px 1px #ccc;
69.   ::v-deep .el-image__inner {
70.     transition: all 0.3s;
71.     cursor: pointer;
72.     &:hover {
73.       transform: scale(1.2);
74.     }
75.   }
76.   ::v-deep .image-slot {
77.     display: flex;
78.     justify-content: center;
79.     align-items: center;
80.     width: 100%;
81.     height: 100%;
82.     color: #909399;
83.     font-size: 30px;
84.   }
85. }
86. </style>

复制代码

4.文件回显

使用

1.    <FileUpload v-model="content.fileIds" :isShowTip="false" :fileType="false" :isUpload="false"></FileUpload>

复制代码

5.树形封装

使用

1. <orginTree v-model="form.deptId" @getdep="getdep"></orginTree>

复制代码

组件封装代码

1. <template>
2.   <div>
3.     <a-tree-select
4.       v-model="orgId"
5.       style="width: 100%"
6.       size="large"
7.       :dropdown-style="{ maxHeight: '400px', overflow: 'auto', zIndex: 3000 }"
8.       placeholder="请选择"
9.       allow-clear
10.       tree-default-expand-all
11.       :disabled="disabled"
12.       :tree-data="vorganTreeData"
13.       :replaceFields="replaceFields"
14.       @change="onChange"
15.     >
16.     </a-tree-select>
17.   </div>
18. </template>
20. <script>
21. //注意！！！！！
22. //在modal弹窗组件中使用该组件需要在关闭弹窗方法里清空数据否则会报错
23. import { userdepList } from "@/api/user/user";
24. export default {
25.   name: "vorganTree",
26.   props: {
27.     value: {
28.       // 如果希望value可以接收int类型的值而不报错，可以将type类型修改为可以兼容字符串和整数的类型
29.       type: [String, Number],
30.       default: "",
31.     },
32.     disabled: {
33.       type: Boolean,
34.       default: false,
35.     },
36.     replaceFields: {
37.       type: Object,
38.       default: () => {
39.         return {
40.           children: "children",
41.           title: "label",
42.           key: "id",
43.           value: "id",
44.         };
45.       },
46.     },
47.   },
48.   data() {
49.     return {
50.       orgId: this.value,
51.       vorganTreeData: [],
52.       deptId: "",
53.     };
54.   },
55.   watch: {
56.     value: {
57.       handler(newVal) {
58.         this.orgId = newVal;
59.       },
60.       immediate: true,
61.     },
62.   },
63.   mounted() {
64.     // this.$bus.$on("id", (data) => {
65.     //   console.log("我是任务组件,收到了数据", data);
66.     //   this.deptId = data;
67.     // });
68.     this.deptId = this.$bus.id;
69.     this.userdepList();
70.   },
71.   methods: {
72.     userdepList() {
73.       userdepList({ ancestors: this.deptId }).then((res) => {
74.         console.log("res.data", res);
75.         this.vorganTreeData = res.data;
76.       });
77.     },
78.     selectClear() {
79.       this.orgId = undefined;
80.     },
81.     onChange(value, item, xx) {
82.       console.log(11111, value, item, xx);
83.       // this.$emit("update:value", value);
84.       this.$emit("getdep", value);
85.     },
86.   },
87. };
88. </script>
90. <style scoped lang="less">
91. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。