el upload sortable

el-upload-sortable

Element UI photo wall adds drag adjustment order function

TypeScript version

Link

• Demo

Install

npm i -S el-upload-sortable

use

 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

If you are using TypeScript, please directly copy node_modules/el-upload-sortable/src/index.ts.vue to your own component directory for development.

You need to handle it yourself

• tsconfig.json
• Install 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

property	illustrate	type	default value
max	Maximum number of images that can be uploaded	number	15
action	API address for uploading images	string	https://jsonplaceholder.typicode.com/posts/
list	Initial image list (optional)	array	[]
multiple	Whether to multiple-select (optional)	boolean	false
param	The field corresponding to the image link in the result returned by the upload interface (optional). If the result returned by the interface is {url: 'xxx'}, the value passed is "url". If the result returned by the interface is {result:{url:'xxx' }}, then the passed value should be "result.url", and so on.	string	""

Events

property	illustrate	callback parameters
change	Events when photo wall data is updated	(imageList)