element ui upload 圖片排序

  1. 新聞資訊
  2. 技術百科
行業動态 公司新聞 案例分享 技術百科

element ui upload 圖片排序

來(Come)源:奇站網絡 浏覽量:117 發布日期: 2024-09-29

這(this)裏采用(use)自定義縮略圖模版,定義排序按鈕。

頁面代碼

  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

點擊按鈕圖片向前移動一(one)格

  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

地(land)址:廈門集美區軟件園三期


                    掃一(one)掃加我(I)咨詢