el upload sortable

el-upload-sortable

Element UIフォトウォールにドラッグ調整順序機能を追加

TypeScript のバージョン

リンク

• デモ

インストール

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
  }
} ) 

小道具

財産	説明する	タイプ	デフォルト値
最大	アップロードできる画像の最大数	番号	15
アクション	画像アップロード用のAPIアドレス	弦	https://jsonplaceholder.typicode.com/posts/
リスト	初期画像リスト（オプション）	配列	[]
複数	複数選択するかどうか（オプション）	ブール値	間違い
パラメータ	アップロード インターフェイスによって返された結果内の画像リンクに対応するフィールド (オプション) インターフェイスによって返された結果が {url: 'xxx'} の場合、渡される値は "url" です。が {result:{url:'xxx' }} の場合、渡される値は "result.url" などとなります。	弦	「」

イベント

財産	説明する	コールバックパラメータ
変化	フォトウォールデータ更新時のイベント	(画像リスト)