cione-comp-lib/es/packages/co-carousel-std/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, toRef, watch, nextTick, computed, onMounted, toRefs, openBlock, createElementBlock, normalizeClass, withModifiers, Fragment, renderList, createElementVNode, normalizeStyle, toDisplayString, createCommentVNode, withDirectives, vShow, pushScopeId, popScopeId } from "vue";
import Swiper from "../../node_modules/swiper/swiper.esm.mjs";
import "../../node_modules/swiper/swiper-bundle.min.mjs";
import "../../node_modules/swiper/swiper.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
import Autoplay from "../../node_modules/swiper/esm/components/autoplay/autoplay.mjs";
import EffectCoverflow from "../../node_modules/swiper/esm/components/effect-coverflow/effect-coverflow.mjs";
import EffectCube from "../../node_modules/swiper/esm/components/effect-cube/effect-cube.mjs";
import Pagination from "../../node_modules/swiper/esm/components/pagination/pagination.mjs";
import Navigation from "../../node_modules/swiper/esm/components/navigation/navigation.mjs";
import Thumbs from "../../node_modules/swiper/esm/components/thumbs/thumbs.mjs";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation, Thumbs]);
const _sfc_main = defineComponent({
  name: "CoCarouselStd",
  props: {
    list: {
      type: Array,
      default: () => {
      }
    },
    fontSize: {
      type: Number
    },
    showBackColor: {
      type: Boolean
    },
    backgroundColor: {
      type: String
    },
    letterSpacing: {
      type: Number
    },
    lineHeight: {
      type: Number
    },
    fontFamily: {
      type: String
    },
    autoplay: {
      type: Boolean
    },
    speed: {
      type: Number
    },
    showButton: {
      type: Boolean
    },
    heightAuto: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  setup(props) {
    const swiperRef = ref();
    const carouselBox = ref();
    const swiperSlideRef = ref();
    toRef(props, "list");
    const timeId = ref();
    const autoplayRef = ref(props.autoplay);
    const speedRef = ref(props.speed);
    const buttonPrevRef = ref(false);
    const buttonNextRef = ref(false);
    const showComponent = ref(true);
    const listContent = ref(props.list);
    const swiperUpdata = ref();
    const mousedownFn = (event) => {
      swiperUpdata.value.autoplay.stop();
      var x = event.pageX;
      var numType = 1;
      var transNum = swiperUpdata.value.translate;
      document.onmousemove = (e) => {
        e.preventDefault();
        transNum - (x - e.pageX);
      };
      document.onmouseup = (e) => {
        e.preventDefault();
        numType = x - e.pageX;
        if (numType > 0 && numType > 60) {
          swiperUpdata.value.slideNext();
        } else if (numType < 0 && numType < -60) {
          swiperUpdata.value.slidePrev();
        }
        swiperUpdata.value.autoplay.start();
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
    watch(
      () => props.list,
      () => {
        listContent.value = props.list;
      }
    );
    watch(
      () => props.autoplay,
      () => {
        autoplayRef.value = props.autoplay;
        showComponent.value = false;
        nextTick(() => {
          showComponent.value = true;
          content();
        });
      }
    );
    watch(
      () => props.speed,
      () => {
        if (props.autoplay) {
          speedRef.value = props.speed;
          showComponent.value = false;
          nextTick(() => {
            showComponent.value = true;
            content();
          });
        }
      }
    );
    watch(
      () => props.showButton,
      () => {
        buttonPrevRef.value = props.showButton;
        buttonNextRef.value = props.showButton;
      }
    );
    const content = () => {
      nextTick(() => {
        swiperUpdata.value = new Swiper(`.swiper${timeId.value}`, {
          effect: "coverflow",
          grabCursor: true,
          initialSlide: 1,
          centeredSlides: true,
          slidesPerView: "auto",
          loop: true,
          autoplay: autoplayRef.value ? {
            delay: speedRef.value,
            stopOnLastSlide: true,
            disableOnInteraction: true
          } : false,
          allowSlideNext: true,
          allowSlidePrev: true,
          simulateTouch: false,
          coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true
          },
          pagination: {
            el: `.swiper-pagination`
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          },
          observer: true,
          observeParents: true,
          observeSlideChildren: true
        });
      });
    };
    const handleClick = (item) => {
      if (item.link === "" || !(item.link.indexOf("http://") === 0 || item.link.indexOf("https://") === 0)) {
        return;
      } else {
        window.open(item.link);
      }
    };
    const getTime = () => {
      let datas = new Date();
      let times = datas.getTime();
      timeId.value = times;
    };
    const stdAttr = computed(() => {
      return {
        fontSize: props.fontSize + "px",
        backgroundColor: props.showBackColor ? props.backgroundColor : "",
        letterSpacing: props.letterSpacing + "px",
        lineHeight: props.lineHeight + "px",
        fontFamily: props.fontFamily
      };
    });
    const RESET_VIEW = () => {
      content();
    };
    onMounted(() => {
      getTime();
      content();
    });
    return {
      timeId,
      stdAttr,
      autoplayRef,
      swiperRef,
      speedRef,
      carouselBox,
      swiperSlideRef,
      showComponent,
      buttonPrevRef,
      buttonNextRef,
      listContent,
      content,
      handleClick,
      mousedownFn,
      RESET_VIEW,
      ...toRefs(props)
    };
  }
});
const _withScopeId = (n) => (pushScopeId("data-v-e2c26222"), n = n(), popScopeId(), n);
const _hoisted_1 = ["onClick"];
const _hoisted_2 = ["src"];
const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "swiper-pagination" }, null, -1));
const _hoisted_4 = { class: "swiper-button-prev" };
const _hoisted_5 = { class: "swiper-button-next" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(["co-carousel-std", `swiper${_ctx.timeId}`]),
    "indicator-dots": "{{false}}",
    id: "slides",
    ref: "slidesRef"
  }, [
    _ctx.showComponent ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: "carousel-std__wrapper swiper-wrapper",
      ref: "carouselBox",
      onMousedown: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.mousedownFn && _ctx.mousedownFn(...args), ["stop"]))
    }, [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.listContent, (item, index) => {
        return openBlock(), createElementBlock("div", {
          class: "swiper-slide",
          ref_for: true,
          ref: "swiperSlideRef",
          onClick: ($event) => _ctx.handleClick(item)
        }, [
          createElementVNode("img", {
            class: "carousel-std__img",
            src: item.imgSrc || item.src,
            alt: "",
            style: normalizeStyle({ height: _ctx.heightAuto ? "auto" : "100%" })
          }, null, 12, _hoisted_2),
          createElementVNode("span", {
            class: "carousel-std__span",
            style: normalizeStyle(_ctx.stdAttr)
          }, toDisplayString(item.title), 5)
        ], 8, _hoisted_1);
      }), 256))
    ], 544)) : createCommentVNode("", true),
    _hoisted_3,
    withDirectives(createElementVNode("div", _hoisted_4, null, 512), [
      [vShow, _ctx.buttonPrevRef]
    ]),
    withDirectives(createElementVNode("div", _hoisted_5, null, 512), [
      [vShow, _ctx.buttonNextRef]
    ])
  ], 2);
}
var Carousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e2c26222"]]);
export { Carousel as default };