Vue3でカルーセルコンポーネントをカプセル化する方法

Vue3でカルーセルコンポーネントをカプセル化する方法

目的

カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。

一般的な手順

  • my-carouselコンポーネントの基本レイアウトを準備し、グローバルに登録する
  • home-banner コンポーネントを準備し、my-carousel コンポーネントを使用してホームページに登録します。
  • ディープスコープセレクターは、my-carouselコンポーネントのデフォルトスタイルをオーバーライドします。
  • home-bannerコンポーネントのカルーセルデータを取得し、my-carouselコンポーネントに渡します。
  • my-carouselコンポーネントのレンダリングが完了すると
  • 自動再生、自動回転属性を公開し、自動的に回転するように設定する
  • 自動再生の場合は、開始、終了、一時停止、開始
  • インジケータースイッチ、前へ、次へ
  • コンポーネントを破棄し、タイマーをクリーンアップする

着陸コード

1. 梱包部品

<テンプレート>
  <div class="my-carousel" @mouseenter="stop" @mouseleave="start">
    <ul class="carousel-body">
      <li v-for="(item, i) in findBannerList" :key="item.id" class="carousel-item" :class="{ fade: index === i }">
        <ルーターリンク先="/">
          <img :src="item.imgUrl" alt="画像" />
        </ルーターリンク>
      </li>
    </ul>
    <a @click="clickFn(-1)" href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
    <a @click="clickFn(1)" href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
    <div class="carousel-indicator">
      <span @click="active(i)" v-for="(item, i) in findBannerList" :key="i" :class="{ active: index === i }"></span>
    </div>
  </div>
</テンプレート>

<スクリプト>
'vue' から { onUnmounted, ref, watch } をインポートします。
エクスポートデフォルト{
  名前:「カルーセル」
  小道具: {
    バナーリストを検索: {
      タイプ: 配列、
      デフォルト: () => []
    },
    自動再生:
      タイプ: ブール値、
      デフォルト: true
    },
    間隔: {
      タイプ: 数値、
      デフォルト: 3
    }
  },
  セットアップ(プロパティ) {
    定数インデックス = ref(0)
    // 定数ストレージタイマーを定義する const timer = ref(null)
    // 自動カルーセル効果を実現するためのタイマーメソッド const autoplayFn = () => {
      // タイマーの多重トリガーを防ぐための手ぶれ防止 clearInterval(timer.value)
      タイマー値 = setInterval(() => {
        インデックス値 += 1
        if (index.value >= props.findBannerList.length) {
          インデックス値 = 0
        }
      }, props.duration * 1000)
    }
    // リスナーは、インターフェースによって返されたデータと渡された関連属性パラメータに従って、カルーセルの自動再生を開始します // 返されたデータの長さをリッスンし、長さが 1 より大きく、自動再生が true の場合、カルーセルを開始します watch(
      () => props.findBannerList、
      () => {
        props.findBannerList.length > 1 && props.autoplay) の場合 {
          自動再生関数()
        }
      }
    )
    // 自動再生を停止するには、マウスをカルーセル内に移動してください const stop = () => {
      if (timer.value) clearInterval(timer.value)
    }
    // マウスをカルーセルの外に移動してタイマーを開始します const start = () => {
      props.findBannerList.length > 1 && props.autoplay) の場合 {
        自動再生関数()
      }
    }
    // カルーセルを切り替えるには、カルーセルの左ボタンと右ボタンをクリックします。渡されたパラメータによって、カルーセルが左に移動するのか右に移動するのかが決まります。const clickFn = e => {
      インデックス値 += e
      if (index.value >= props.findBannerList.length) {
        インデックス値 = 0
      }
      インデックス値 < 0 の場合 {
        インデックス値 = props.findBannerList.length - 1
      }
    }
    // インジケーター(カルーセルの下の小さな点)をクリックしてカルーセルを切り替えます const active = e => {
      インデックス値 = e
    }
    // パフォーマンスの低下を避けるためにコンポーネントが破棄されるときのラブレタータイマー onUnmounted(() => {
      if (timer.value) clearInterval(timer.value)
    })
    戻り値: { インデックス、停止、開始、クリックFn、アクティブ }
  }
}
</スクリプト>
<style スコープ lang="less">
.my-carousel {
  幅: 100%;
  高さ: 100%;
  最小幅: 300px;
  最小高さ: 150px;
  位置: 相対的;
  .カルーセル{
    &-体 {
      幅: 100%;
      高さ: 100%;
    }
    &-アイテム {
      幅: 100%;
      高さ: 100%;
      位置: 絶対;
      左: 0;
      上: 0;
      不透明度: 0;
      遷移: 不透明度 0.5 秒線形;
      &.フェード{
        不透明度: 1;
        zインデックス: 1;
      }
      画像 {
        幅: 100%;
        高さ: 100%;
      }
    }
    &-インジケータ {
      位置: 絶対;
      左: 0;
      下: 20px;
      zインデックス: 2;
      幅: 100%;
      テキスト配置: 中央;
      スパン {
        表示: インラインブロック;
        幅: 12px;
        高さ: 12px;
        背景: rgba(0, 0, 0, 0.2);
        境界線の半径: 50%;
        カーソル: ポインタ;
        ~ スパン {
          左マージン: 12px;
        }
        &。アクティブ {
          背景: #fff;
        }
      }
    }
    &-btn {
      幅: 44px;
      高さ: 44px;
      背景: rgba(0, 0, 0, 0.2);
      色: #fff;
      境界線の半径: 50%;
      位置: 絶対;
      上: 228px;
      zインデックス: 2;
      テキスト配置: 中央;
      行の高さ: 44px;
      不透明度: 0;
      遷移: すべて 0.5 秒;
      &.前へ {
        左: 20px;
      }
      &。次 {
        右: 20px;
      }
    }
  }
  &:ホバー{
    .carousel-btn {
      不透明度: 1;
    }
  }
}
</スタイル>

2. プラグインへのパッケージ化

'./my-carousel.vue' から MyCarousel をインポートします。
エクスポートデフォルト{
  インストール(アプリ) {
    app.component(MyCarousel.name、MyCarousel)
  }
}

3. エントリファイル main.js でのグローバル登録

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./components/library' から MyUI をインポートします。

// プラグインを使用するには、main.js で app.use(plugin) を使用します
createApp(App).use(MyUI).mount('#app')

4. プロジェクトでコンポーネントを使用する

ホームバナーコンポーネントを準備し、my-carouselコンポーネントを使用して、プロジェクトでカルーセルが使用されるホームバナーコンポーネントを導入します。ホームバナーコンポーネントでは、次のパラメータを設定できます。

findBannerListパラメータは、コンポーネントに渡されるバックグラウンドリクエストデータとして使用されます。

自動再生パラメータがカルーセルを有効にするかどうか。デフォルト値は true です。カルーセルを有効にします。

期間パラメータは、カルーセルの時間間隔(秒単位)です。

<テンプレート>
  <div class="home-banner">
    <MyCarousel :findBannerList="findBannerList" :autoplay="true" :duration="3" />
  </div>
</テンプレート>

要約する

アイデアと手順に従い、段階的に実装するだけです。

1. 基本的なコンポーネントの分割とレイアウト
2. 自動回転台
3. ホバーコントロールで開始と停止
4. 手動制御切り替え
5. タイマーを破壊する
6. 関連するパラメータを抽出する

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3.0 手書きカルーセル効果
  • vue+rem カスタムカルーセル効果
  • uniapp vue および nvue カルーセル コンポーネントのサンプル コード

<<:  springcloud alibaba nacos linux 設定の詳細なチュートリアル

>>:  MySQL で削除されたレコードが有効にならない理由のトラブルシューティング

推薦する

HTMLはフォームタグを使用して登録ページのサンプルコードを実装します。

ケースの説明: - ページ効果を実現するためにテーブルを使用する- ハイパーリンクを機能させたくない...

Docker デプロイメント RabbitMQ コンテナ実装プロセス分析

1. イメージをプルするまず、次のコマンドを実行して、イメージをローカル コンピューターにダウンロー...

Raspberry Pi 4 に Ubuntu 19.10 をインストールするための詳細なチュートリアル

以前、raspbian で実行したときに opencv の一部の依存関係をパッケージ化できず、一部の...

JavaScript オブジェクトを比較する 4 つの方法

目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...

MySQL クエリの重複データ (重複データを削除し、ID が最も小さいデータのみを保持します)

開発の背景:最近、私はバッチ データを MySQL データベースにインポートする機能に取り組んでいま...

MySQL での大規模トランザクションによって発生する挿入の遅延ケースの分析

【質問】 INSERT 文は最も一般的な SQL 文の 1 つです。最近、MySQL サーバーが同時...

Vue+express+Socketでチャット機能を実現

この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...

Docker はキューとタスクのスケジューリングを実現するために Laravel アプリケーションをデプロイします

前回の記事では、Docker を使用して Laravel アプリケーションをデプロイする方法について...

JavaScript データ型の詳細な説明

目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...

WeChatミニプログラム公式顔認証の詳しい説明

ミニプログラムはユーザーの個人情報を収集してアップロードしましたが、拒否されました。こんにちは、ミニ...

FastApi+Vue+LayUIを使用してフロントエンドとバックエンドを分離するサンプルコード

目次序文プロジェクト設計後部フロントエンドプロジェクトを実行する質疑応答序文これまでの API 開発...

MySQL スケジュールバックアップタスクの簡単な分析

導入実稼働環境では、データの損失を回避するために、通常、データベースは定期的にバックアップされます。...

MySQL初心者のための基本操作のまとめ

図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...

Windows Server 2019 のインストール (グラフィカル チュートリアル)

Windows Server 2019 は、Microsoft が公式にリリースした最新のサーバー...

テキストエリアをレイアウトしたときにテキストが左下にあり、サイズを変更できない問題の解決策

2つの小さな問題ですが、長い間私を悩ませていました。最初の質問テキストエリアの左側のテキストは常にテ...