el upload sortable

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	""

Events

屬性	說明	回呼參數
change	照片牆資料更新時的事件	（imageList）