这里采用自定义缩略图模版,定义排序按钮。
页面代码
<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