element ui upload 图片排序

行业动态 公司新闻 案例分享 技术百科

element ui upload 图片排序

来源:奇站网络 浏览量:250 发布日期: 2024-09-29

这里采用自定义缩略图模版,定义排序按钮。

页面代码

  1. <el-upload action="#" :file-list="imageList" list-type="picture-card">
  2. <i class="el-icon-plus avatar-uploader-icon"></i>
  3. <div slot="file" slot-scope="{file}" style="width: 100%;height: 100%;">
  4. <!-- <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> -->
  5. <el-image v-if="file.status !== 'uploading'" style="width: 100px; height: 100px" :src="file.url" fit="contain"></el-image>
  6. <label class="el-upload-list__item-status-label">
  7. <i class="el-icon-upload-success el-icon-check"></i>
  8. </label>
  9. <span class="el-upload-list__item-actions">
  10. <span class="el-upload-list__item-delete" @click="handleMove(file)">
  11. <i class="el-icon-back"></i>
  12. </span>
  13. <span class="el-upload-list__item-delete" @click="handleRemove(file)">
  14. <i class="el-icon-delete"></i>
  15. </span>
  16. </span>
  17. <el-progress v-if="file.status === 'uploading'" type="circle" stroke-width="6"
  18. :percentage="parseInt(file.percentage, 10)">
  19. </el-progress>
  20. </div>
  21. </el-upload>

JS

点击按钮图片向前移动一格

  1. handleMove(file) {
  2. let idx;
  3. this.images.forEach((image, index) => {
  4. if (image.url == file.url) {
  5. idx = index;
  6. }
  7. })
  8. console.log(idx)
  9. if (idx > 0) {
  10. let tmp = this.imageList[idx - 1];
  11. Vue.set(this.imageList, idx - 1, this.imageList[idx])
  12. Vue.set(this.imageList, idx, tmp)
  13. }
  14. },

按图片顺序保存序号即可。

标签:

厦门奇站网络科技有限公司

电话:13313868605

QQ:3413772931

地址:厦门集美区软件园三期

网站地图


                    扫一扫加我咨询