www.dextsolution.com
DEXTUPLOAD
X5
Vue.js リファレンス > DEXTUploadX5(List/Tile/Single/Grid)

# DEXTUploadX5 コンポーネント属性

## id

- dextuploadx5-vue 0.0.1 以降

- 型: String

- 説明: X5 インスタンス ID です。指定しない場合は dext5 を使用します。

## type

- dextuploadx5-vue 0.0.1 以降

- 型: String

- 説明: X5 UI 形式です。list、grid、tile、single のいずれかを使用します。

- DEXTUploadX5List、DEXTUploadX5Grid、DEXTUploadX5Tile、DEXTUploadX5Single は type 値を内部で固定します。

## progressType

- dextuploadx5-vue 0.0.1 以降

- 型: String

- 説明: X5 進行状況ウィンドウ形式を指定します。既定値は 0 です。

## path

- dextuploadx5-vue 0.0.1 以降

- 型: String

- 説明: DX5.create() に渡される path オプションです。指定しない場合は空文字列を使用します。

## waitingTime

- dextuploadx5-vue 0.0.1 以降

- 型: Number

- 説明: X5 インスタンス生成時の内部ロード待機時間です。既定値は 10000 です。

## lang

- dextuploadx5-vue 0.0.1 以降

- 型: String

- 説明: X5 言語オプションです。既定値は auto です。

## hidden

- dextuploadx5-vue 0.0.1 以降

- 型: Boolean

- 説明: true に設定すると、X5 コンテナを画面に表示しない状態でレンダリングします。

## columns

- dextuploadx5-vue 0.0.1 以降

- 型: Array

- 説明: Grid 形式で使用する列定義リストです。Grid 形式以外では意味がありません。

- 例

      <DEXTUploadX5Grid
        id="grid1"
        :columns="[
          { key: 'grade', display: 'Grade', width: 40, position: 2 },
          { key: 'movie', display: 'Movie', width: 80, position: 3 }
        ]"
      />

## ref

- dextuploadx5-vue 0.0.1 以降

- 説明: Vue ref でコンポーネントインスタンスにアクセスすると、module、ready、wait() を使用できます。

- wait() は X5 インスタンスの準備完了後にそのインスタンスを返します。

## イベント

- dextuploadx5-vue 0.0.1 以降

- 説明: Vue テンプレートではイベント名を kebab-case で記述します。

- イベント一覧

  @created, @error, @before-items-add, @item-adding, @items-added, @before-items-delete, @item-deleting, @items-deleted, @item-select, @item-check, @item-double-click, @upload-begin, @upload-item-start, @upload-item-end, @upload-stopped, @upload-completed, @download-begin, @download-item-start, @download-item-end, @download-stopped, @download-completed, @preview, @item-to-hd-finish, @column-data-binding, @column-data-displaying, @compress-waiting-begin, @compress-waiting-completed, @compress-waiting-stopped, @drag-and-drop

- 例

      <DEXTUploadX5List
        id="dext5"
        @created="handleCreated"
        @upload-completed="handleUploadCompleted"
        @error="handleError"
      />

- @before-items-add、@item-adding、@before-items-delete、@item-deleting イベントハンドラーは false を返して X5 の動作をキャンセルできます。

- @column-data-binding、@column-data-displaying イベントハンドラーは値を返して X5 に渡すことができます。