SwipeCell スワイプセル - Vant 4

SwipeCell スワイプセル

紹介

左右にスワイプして操作ボタンを表示するセルコンポーネントです。

取り込み

以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。

import { createApp } from'vue'; import { SwipeCell } from'vant'; const app = createApp(); app.use(SwipeCell);

コード例

基本的な使い方

SwipeCell は left と right の 2 つのスロットを提供し、左右のスライド領域の内容を定義できます。

内容のカスタマイズ

SwipeCell には任意の内容をネストできます。例えば商品カードなど。

非同期クローズ

before-close コールバックで、左右の内容を閉じる際の挙動をカスタマイズできます。

import { showConfirmDialog } from 'vant';
export default {
  setup() {
    const beforeClose = ({ position }) => {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          return true;
        case 'right':
          return new Promise((resolve) => {
            showConfirmDialog({ title: '削除しますか？' })
              .then(() => resolve(true))
              .catch(() => resolve(false));
          });
      }
    };
    return { beforeClose };
  },
};

API

Props

パラメータ	説明	型	デフォルト
name	識別子（イベント引数で取得可能）	*number	string*
left-width	左側スライド領域の幅（px）	*number	string*
right-width	右側スライド領域の幅（px）	*number	string*
before-close	クローズ前のコールバック。false で阻止、Promise を返却可能	*(args) => boolean	Promise<boolean>*
disabled	スライドを無効化	boolean	false
stop-propagation	スライドイベントのバブリング抑止	boolean	false

Slots

名前	説明
default	既定の表示内容
left	左側スライド領域の内容
right	右側スライド領域の内容

Events

イベント名	説明	コールバック引数
click	クリック時に発火	*position: 'left'
open	オープン時に発火	*{ name: string
close	クローズ時に発火	*{ name: string

beforeClose の引数

beforeClose の第 1 引数は以下のプロパティを含むオブジェクトです：

パラメータ名	説明	型
event v4.9.4	クローズを引き起こしたイベントオブジェクト	*MouseEvent
name	識別子	*string
position	クローズ時のクリック位置	*'left'

メソッド

ref で SwipeCell インスタンスを取得してメソッドを呼び出せます。詳細はコンポーネントインスタンスメソッドを参照してください。

メソッド名	説明	引数	戻り値
open	サイドコンテンツを開く	position: `left	right`
close	サイドコンテンツを閉じる	-	-

型定義

コンポーネントは以下の型定義を提供します：

importtype { SwipeCellSide, SwipeCellProps, SwipeCellPosition, SwipeCellInstance, } from'vant';

SwipeCellInstance はコンポーネントインスタンスの型です：

import { ref } from'vue'; importtype { SwipeCellInstance } from'vant'; const swipeCellRef = ref<SwipeCellInstance>(); swipeCellRef.value?.close();

よくある質問

デスクトップで操作できない？

デスクトップ適応 を参照してください。