【Ionic×Vue】並び替え(Reorder)リストの作り方

Ionicでリストの並び替えを実装する場合に利用可能な、Reorderコンポーネントの使い方まとめ

基本情報

props

props名	型	初期値	説明
disabled	boolean	true	並び替えを禁止するかどうか。

emit

emit名	戻り値	説明
ionItemReorder	Event	並び替えを完了させるために呼ぶ必要があるイベント。戻り値のEventの中にcompleteメソッドがあり、completeメソッドを呼び出すことで並び替えが完了する。呼び出さない場合は、並び替えが完了せずにフリーズする。

戻り値の中身

{
  bubbles: boolean;
  cancelBubble: boolean;
  cancelable: boolean;
  composed: boolean;
  currentTarget: null;
  defaultPrevented: boolean;
  detail: {
    from: number;
    to: number;
    complete: function;
  };
  eventPhase: number;
  isTrusted: boolean;
  path: DOM[];
  returnValue: boolean;
  srcElement: DOM;
  target: DOM;
  timeStamp: number;
  type: string;
}

利用方法

Example.vue

<template>
  <!-- 並び替え可能アイコンを表示したリスト -->
  <ion-reorder-group :disabled="false">
    <ion-item v-for="item in items" :key="item">
      <ion-label>{{ item }}</ion-label>
      <!-- 並び替え可能アイコンが右側に表示される -->
      <ion-reorder slot="end"></ion-reorder>
    </ion-item>
    
    <ion-item v-for="item in items" :key="item">
      <ion-label>{{ item }}</ion-label>
      <!-- 並び替え可能アイコンが左側に表示される -->
      <ion-reorder slot="start"></ion-reorder>
    </ion-item>
  </ion-reorder-group>
  
  <!-- カスタムアイコンを表示したリスト -->
  <ion-reorder-group :disabled="false">
    <ion-item v-for="item in items" :key="item">
      <ion-label>{{ item }}</ion-label>
      <!-- 並び替え可能アイコンが右側に表示される -->
      <ion-reorder slot="end">
        <ion-icon name="warning"></ion-icon>
      </ion-reorder>
    </ion-item>
    
    <ion-item v-for="item in items" :key="item">
      <ion-label>{{ item }}</ion-label>
      <!-- 並び替え可能アイコンが左側に表示される -->
      <ion-reorder slot="start">
        <ion-icon name="warning"></ion-icon>
      </ion-reorder>
    </ion-item>
  </ion-reorder-group>

  <!-- 任意の要素 -->
  <ion-reorder-group :disabled="false" @ionItemReorder="reordered">
    <ion-reorder v-for="item in items" :key="item">
      <div>{{ item }}</div>
    </ion-reorder>
  </ion-reorder-group>
</template>

<script lang="ts">
// vue
import { defineComponent, ref } from 'vue';

// ionic
import {
  IonReorder,
  IonReorderGroup,
} from '@ionic/vue';
import { warning } from 'ionicons/icons';

export default defineComponent({
  name: 'Example',
  components: {
    IonReorder,
    IonReorderGroup,
    warning,
  },
  setup() {
    const items = ref([1, 2, 3, 4, 5]);
    const reordered = (event: CustomEvent) => {
      // event.detail.completeを呼び出して並び替えを完了する
      // 引数に並び替え対象の要素が格納された配列を指定すると、並び替えた後の配列を返す
      items.value = event.detail.complete(items.value);
    };
    return { items, reordered };
  },
});
</script>