vue 3.0パッケージの輪播図コンポーネントのステップ

前の文章に続く、vue 3.0の基本的な使い方を熟知し、使用時間が経ってから、vue 3.0の使用に適したpc端のコンポーネントライブラリの開発を開始する。新しい部品倉庫の書き方と注意事項を続々と教えますので、興味がある人はたくさん注意してください。
一つのマルチキャストコンポーネントを開発して、pc端を適用します。（appを考慮していません）、vue 3.0+TSに使います。
大体の効果はこうです。

画像はフリーホイールで、ドット画像のジャンプ、左右のインジケータのジャンプなどに対応します。次のoptions設定を暴露します。

以上が主なoptionsですが、具体的にはどのようにパッケージ化しますか？
パッケージ思想
vue 3.0とvue 2.0ではパッケージの中身は同じです。vue.com mponentに使う必要があります。コンポーネントを登録してから、メールでマウントして使えます。
srcの下に作成します。src-->libs-->sqm_イ（自己UI倉庫の名称）－>index.js
ここのindex.jsは登録部品の入り口です。
同じクラスのディレクトリの下に新しいファイルを作成します。このファイルには、すべてのマルチキャストコンポーネントの機能とスタイルが含まれています。
ディレクトリは以下の通りです

注意したいのですが、vue 3.0とtsの中で使われていますが、入口のファイルはやはりjsを使います。これも非tsの書き方を適用できるためです。
index.jsにおいて：

import Carousel from './Carousel/carousel';
import CarItem from './Carousel/item';let SqmUI = {};
SqmUI.install = function(vue) {
 vue.component(Carousel.name, Carousel);
 vue.component(CarItem.name,CarItem);
};
export default SqmUI;

しかし、TSの使用に協力するためには、ライブラリ内のメンバーのタイプを記述するために、index.d.tsファイルを新たに作成する必要があります。

declare const _default: ({
 install: (app: import("vue").App<any>, ...options: any[]) => any; //         install});
export default _default;

以上の配置を完了したら、main.tsで使用します。

import SqmUI from '@/libs/sqm_ui/index';
import { createApp } from 'vue';
createApp.use(SqmUI);

パッケージプロセス
ルーニーマップに対しては、各ロール画像を配置するための固定容器が必要です。この時は、Carousel.vueコンポーネントを定義する必要があります。

<template>
 <div class="carousel">
 <slot></slot> //    slot     item  
 </div>
</template>

写真を保存するためのコンポーネントも必要です。

<template>
 <div class="carousel-item">
 <slot></slot> //    slot     img
 </div>
</template>

基本フレームが組まれており、ユーザーが使用する場合はcarouselにoptionsを配置します。

<carousel
 :autoPlay="true" 
 :durdation="3000" 
 :initial="3" 
 :hasDot="true" 
 :hasDirector="true"> </carousel>

carousel.vueでは、送信された配置項目を受け付けます。

props: { 
 autoplay: {  
 type: Boolean,  
 default: true }, 
 duration: {  
 type: Number,  
 default: 3000 }, 
 initial: {  
 type: Number,  
 default: 0 }, 
 hasDot: {  
 type: Boolean,
 default: true }, 
 hasDirector: { 
 type: Boolean,  
 default: true }
}

（1）：autPlayの実現：
carousel.vueにおいて：

const autoPlay = () => {
 if (props.autoplay) {
 t = setInterval(() => {
  //     
 }, props.duration);
};
onMounted(() => {
 autoPlay();
});

ロジックは簡単で、autPlay関数を定義し、mounted段階でマウントします。
（2）：実現ロードショー：
このようにしたいのですが、どうやってこの写真を表示することができますか？現在の画像のindexが必ず必要です。ルーニー時のindexと同じです。
item.vueでは、

<div class="carsel-item" v-if="selfIndex === currentIndex"> 
 <slot></slot> 
</div>

自分のindexが現在のindexに等しいときのみ表示されます。
currentIndexを取得:
vue 3.0に内蔵する方法： get Currenent Instance()
これは重要な方法であり、この方法により、現在のコンポーネントの例を取得し、その後、ctxを介してコンポーネントのコンテキストを取得することができる。とても使いやすいです。
item.vueでは、

setup() {
 const instance:any = getCurrentInstance(); console.log(instance);
}

instance.vnodeの下にkeyがあります。各画像に対応する自分のkey、つまりindexです。
instance.parent.ctxの下に定義されているcurrent Indexがあります。現在のindexです。
両方が同じ場合、現在の画像が表示されます。では、currentIndexはどこに設置されますか？
carousel.vueに戻る:

setup(props) { 
 const state = reactive({  
 currentIndex: props.initial,  
 itemLen: 0,  
 showDir: false 
 });
}

現在のcurrentIndexは、伝来したinitialの値です。
autPlayでは、ルーニーを実行します。

const setIndex = ((dir:String): void => { 
 switch(dir) { 
 case 'next':  
  state.currentIndex += 1;  
  if (state.currentIndex === state.itemLen) {   
  state.currentIndex = 0;  
  }  
  break; 
 case 'prev':  
  state.currentIndex -= 1;  
  if (state.currentIndex === -1) {   
  state.currentIndex = state.itemLen - 1;  
  }  
  break; 
 default:  
  break; 
 } 
});

nextの時、currentIndex++を譲ります。ルーニー画像の長さに等しいまで。array.length）
prevの時、currentIndex--；===-1まで
その後item.vueで傍聴します。

watch(() => {  
 return instance.parent.ctx.currentIndex 
 }, (value) => {  
 state.currentIndex = value; 
})

このようにして写真のロードショーを完成します。
三：円点計
実現の思想はやはり簡単です。
       着信したhasDotによって表示が必要かどうかを確認します。画像の数に応じて、いくつかの円点が表示されます。円点をクリックすると、対応する画像にジャンプできます。
dot.vueで:

<template>
 <div class="dot-goes-wrapper" v-if="hasDot">
 <div class="dot-item" v-for="item in itemLen" :key="item">
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
  class="dot-link"
  :style="{backgroundColor: (item - 1) === currentIndex ? dotBgColor : '#fff'}" 
  @click="dotClick(item - 1)">
 </a> 
 </div> 
 </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
 name: 'dot',
 props: { 
 itemLen: Number, 
 currentIndex: Number, 
 dotBgColor: {  
  type: String,
  default: '#ff5000' },
 hasDot: {  
  type: Boolean,  
  default: true } 
 }, 
 setup(props, ctx) { 
 const dotClick = (index: Number) => { 
  ctx.emit('dotClick', index); 
 }; 
 return {  
  dotClick 
 } 
}})
</script>

ctxによってdotClickイベントをトリガし、indexを導入し、親コンポーネントに使用する。

@dotClick="dotClick"

const dotClick = (index: any): void => {

state.currentIndex = index;

};

このようにして、円点計が完成しました。
左右のインジケータ
これは簡単です。入る時に表示して、写真をクリックしてスライドします。

<template> 
 <div v-if="showDir"> 
 <div class="director dir-next" v-if="dir === 'next'">  
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="dirClick(dir)">&gt;</a> 
 </div> 
 <div class="director dir-prev" v-else-if="dir === 'prev'">  
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="dirClick(dir)">&lt;</a> 
 </div> 
 </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({ 
 name: 'direct', 
 props: { 
 dir: String, 
 showDir: {  
  type: Boolean,  
  default: false 
 } 
 }, 
 setup(props, ctx) { 
 const dirClick = (dir: String) => {  
  ctx.emit('dirClick', dir); 
 }; 
 return {  
  dirClick 
 } 
 }
})</script>

同じ親コンポーネントに送るdirClickイベントは、親コンポーネントの中でクリック移動を実行すればいいです。
最後：
ルーニーマップはタイマーによって実現されるため、タイマーを破壊する必要があります。

onBeforeUnmount(() => {

      _clearFunction();

});

function _clearFunction(): void {

     clearInterval(t);

       t= null;

};

マウスの移動時に自動再生を停止し、左右のインジケータを表示します。

const mouseEnter = (): void => { 
 _clearFunction();
 state.showDir = true;
 }; 

マウスの移動時に再生を開始し、左右のインジケータが消えます。

 const mouseLeave = (): void => { 
  autoPlay();
  state.showDir = false; 
};

ok.大体の考えはこのようにします。もう少し自分で考えてみてもいいです。ありがとうございます
六：過去の回顧
wwww.jb 51.net/articale/206833.httm
以上がvue 3.0パッケージのロードショーコンポーネントのステップの詳細です。vue 3.0パッケージのロードショーコンポーネントに関する詳細は他の関連記事に注目してください。