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

<テンプレート>
  <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;
    }
  }
}
</スタイル>

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

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

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

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