El-upload-sortable NPM

el-upload-sortable

Element UI 照片墙增加拖动调整顺序功能

TypeScript版

链接

Demo

示例图片

安装

npm i -S el-upload-sortable

使用

import ElUploadSortable from "el-upload-sortable";

export default {
  components: {
    ElUploadSortable
  },
  methods: {
    picUpdate(list){
      // this.myList = list
    }
  }
}

<template>
  <el-upload-sortable @change="picUpdate"></el-upload-sortable>
</template>

TypeScript

如果你是使用TypeScript，请直接拷贝node_modules/el-upload-sortable/src/index.ts.vue到你自己的组件目录进行开发。

你需要自行处理

tsconfig.json
安装vue-property-decorator

import { Component, Vue } from "vue-property-decorator";
import ElUploadSortable from "../../../node_modules/el-upload-sortable/src/index.ts.vue"; // 这里的路径结合实际情况

@Component({
  components: {
    ElUploadSortable
  }
})

Props

属性	说明	类型	默认值
max	最多可以上传图片数量	number	15
action	上传图片的api地址	string	https://jsonplaceholder.typicode.com/posts/
list	初始图片列表（可选）	array	[]
multiple	是否多选（可选）	boolean	false
param	上传接口返回结果中图片链接对应的字段（可选），若接口返回结果为{url: 'xxx'}，则传值为"url"，若接口返回结果为{result:{url:'xxx'}}，则传值应为"result.url"，依此类推	string	""