build: {
    lib: {
      entry: path.resolve(__dirname, 'src/components/index.ts'),
      name: 'videoSlide',
      fileName: (format) => `index.${format}.js`
    },
    rollupOptions: {
      // 確保外部化處理那些你不想打包進(jìn)庫的依賴
      external: ['vue'],
      output: {
        // 在 UMD 構(gòu)建模式下為這些外部化的依賴提供一個全局變量
        globals: {
          vue: 'Vue'
        }
      }
    }
  },

// vue
 <video
     
      playsinline="true"
      webkit-playsinline="true"
      mediatype="video"
      :poster="poster"
      @progress="progress"
      @durationchange="durationchange"
      @loadeddata="loadeddata"
      @playing="playing"
      @waiting="waiting"
      @timeupdate="timeupdate"
      @canplay="playing"
      @ended="ended"
    >
      <source :src="src" type="video/mp4" />
    </video>
    //js
    
   setup({ autoplay }) {
    // 是否是暫停狀態(tài)
    const paused = ref(true);
    // 視頻總時間
    const endTime = ref(second(0));
    //播放的時間
    const startTime = ref(second(0));
    // 是否是按下狀態(tài)
    const isPress = ref(false);
    //緩沖進(jìn)度
    const percentageBuffer = ref(0);
    // 播放進(jìn)度
    const percentage = ref(0);
    // 保存計算后的播放時間
    const calculationTime = ref(0);
    // 拿到video 實例
    const video = ref(null);
    // 是否展示封面圖
    const showImg = ref(true);
    // 是否處于緩沖中
    const loading = ref(false);
    // 播放
    function play() {
      video.value.play();
      paused.value = false;
    }
    // 暫停
    function pause() {
      if (paused.value) return;
      video.value.pause();
      paused.value = true;
      loading.value = false;
    }
    // 獲取緩沖進(jìn)度
    function progress() {
      if (!video.value) return;
      percentageBuffer.value = Math.floor(
        (video.value.buffered.length
          ? video.value.buffered.end(video.value.buffered.length - 1) /
            video.value.duration
          : 0) * 100
      );
    }
    // 時間改變
    function durationchange() {
      endTime.value = second(video.value.duration);
      console.log("時間改變觸發(fā)");
    }
    // 首幀加載觸發(fā),為了獲取視頻時長
    function loadeddata() {
      console.log("首幀渲染觸發(fā)");
      showImg.value = false;
      autoplay && play();
    }
    //當(dāng)播放準(zhǔn)備開始時(之前被暫?；蛘哂捎跀?shù)據(jù)缺乏被暫緩)被觸發(fā)
    function playing() {
      console.log("緩沖結(jié)束");
      loading.value = false;
    }
    //緩沖的時候觸發(fā)
    function waiting() {
      console.log("處于緩沖中");
      loading.value = true;
    }
    // 時間改變觸發(fā)
    function timeupdate() {
      // 如果是按下狀態(tài)不能走進(jìn)度，表示需要執(zhí)行拖動
      if (isPress.value || !video.value) return;
      startTime.value = second(Math.floor(video.value.currentTime));
      percentage.value = Math.floor(
        (video.value.currentTime / video.value.duration) * 100
      );
    }
    // 按下開始觸發(fā)
    function touchstart() {
      isPress.value = true;
    }
    //松開按鈕觸發(fā)
    function touchend() {
      isPress.value = false;
      video.value.currentTime = calculationTime.value;
    }
    // 拖動的時候觸發(fā)
    function touchmove(e) {
      const width = window.screen.width;
      const tx = e.clientX || e.changedTouches[0].clientX;
      if (tx < 0 || tx > width) {
        return;
      }
      calculationTime.value = video.value.duration * (tx / width);
      startTime.value = second(Math.floor(calculationTime.value));
      percentage.value = Math.floor((tx / width) * 100);
    }
    //點擊進(jìn)度條觸發(fā)
    function handleProgress(e) {
      touchmove(e);
      touchend();
    }
    // 播放結(jié)束時觸發(fā)
    function ended() {
      play();
    }
    onMounted(() => {});
    return {
      video,
      paused,
      pause,
      play,
      progress,
      durationchange,
      loadeddata,
      endTime,
      startTime,
      playing,
      percentage,
      waiting,
      timeupdate,
      percentageBuffer,
      touchstart,
      touchend,
      touchmove,
      isPress,
      ended,
      handleProgress,
      loading,
      showImg,
    };
  },

// vue
  <swiper
    direction="vertical"
    @transitionStart="transitionStart"
  >
    <swiper-slide class="slide-box" v-for="(item, index) in list" :key="index">
      <slot
        :item="item"
        :index="index"
        :activeIndex="activeIndex"
        v-if="activeIndex >= index - 1 && activeIndex <= index + 1"
      ></slot>
    </swiper-slide>
  </swiper>
  //js
   setup({ list }, { emit }) {
    const activeIndex = ref(0);
    function transitionStart(swiper) {
      //表示沒有滑動,不做處理
      if (activeIndex.value === swiper.activeIndex) {
        // 表示是第一個輪播圖
        if (swiper.swipeDirection === "prev" && swiper.activeIndex === 0) {
        // 表示上拉刷新
          emit("refresh");
        } else if (
          swiper.swipeDirection === "next" &&
          swiper.activeIndex === list.length - 1
        ) {
          // 滑動到底部
         emit("toBottom");
        }
      } else {
        activeIndex.value = swiper.activeIndex;
        // 為了預(yù)加載視頻，提前l(fā)oad 數(shù)據(jù)
        if (swiper.activeIndex === list.length - 1) {
          emit("load");
        }
      }
    }
    return {
      transitionStart,
      activeIndex,
    };
  },

//vue
 <Yslide
      :list="data"
      v-slot="{ item, index, activeIndex }"
      @refresh="refresh"
      @toBottom="toBottom"
      @load="load"
    >
      <Yvideo
        :src="item.entStoreVO.video"
        :poster="item.entStoreVO.videoImg"
        :index="index"
        :activeIndex="activeIndex"
        autoplay
      >
        <div class="mantle">
          <div class="right" @click.stop="">
            <div class="right-btn fabulous" @click="fabulous">點贊</div>
            <div class="right-btn comment" @click="comment">評論</div>
            <div class="right-btn collection" @click="collection">收藏</div>
            <div class="right-btn share" @click="share">分享</div>
          </div>
        </div>
      </Yvideo>
    </Yslide>