《貂蝉艳史》三级在线播放_《初尝禁果》2:做爰HD_《赤裸奶头》在线观看_《被按摩的人妻中文字幕》_(公)高H春色无边_(高H)奶水

element ui upload 圖片排序

行業(yè)動(dòng)態(tài) 公司新聞 案例分享 技術(shù)百科

element ui upload 圖片排序

來(lái)源:奇站網(wǎng)絡(luò) 瀏覽量:290 發(fā)布日期: 2024-09-29

這里采用自定義縮略圖模版,定義排序按鈕。

頁(yè)面代碼

  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

點(diǎn)擊按鈕圖片向前移動(dòng)一格

  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. },

按圖片順序保存序號(hào)即可。

標(biāo)簽:

廈門(mén)奇站網(wǎng)絡(luò)科技有限公司

電話(huà):13313868605

QQ:3413772931

地址:廈門(mén)集美區(qū)軟件園三期

網(wǎng)站地圖


                    掃一掃加我咨詢(xún)

辽宁省| 洪泽县| 双桥区| 蓝山县| 永和县| 五峰| 鄱阳县| 宁化县| 若尔盖县| 闽侯县| 莎车县| 云阳县| 三河市| 新宁县| 巴中市| 天门市| 巴塘县| 房产| 吴忠市| 定结县| 宁武县| 东宁县| 大埔县| 扎鲁特旗| 濮阳县| 高邑县| 临城县| 库尔勒市| 邵武市| 唐河县| 哈密市| 辽阳县| 定边县| 靖州| 鹿邑县| 泸溪县| 综艺| 玉田县| 祥云县| 武清区| 武平县|