这里采用自定义缩略图模版,定义排序按钮。
页面代码
<el-upload action="#" :file-list="imageList" list-type="picture-card"><i class="el-icon-plus avatar-uploader-icon"></i><div slot="file" slot-scope="{file}" style="width: 100%;height: 100%;"><!-- <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> --><el-image v-if="file.status !== 'uploading'" style="width: 100px; height: 100px" :src="file.url" fit="contain"></el-image><label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label><span class="el-upload-list__item-actions"><span class="el-upload-list__item-delete" @click="handleMove(file)"><i class="el-icon-back"></i></span><span class="el-upload-list__item-delete" @click="handleRemove(file)"><i class="el-icon-delete"></i></span></span><el-progress v-if="file.status === 'uploading'" type="circle" stroke-width="6":percentage="parseInt(file.percentage, 10)"></el-progress></div></el-upload>
JS
点击按钮图片向前移动一格
handleMove(file) {let idx;this.images.forEach((image, index) => {if (image.url == file.url) {idx = index;}})console.log(idx)if (idx > 0) {let tmp = this.imageList[idx - 1];Vue.set(this.imageList, idx - 1, this.imageList[idx])Vue.set(this.imageList, idx, tmp)}},
按图片顺序保存序号即可。
- 版权所有:奇站网络 转载请注明出处
- 厦门奇站网络科技有限公司,专业提供网站建设,响应式网站建设,小程序开发,系统定制开发。
- 软件开发咨询热线:吴小姐 13313868605
