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

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

import { defineComponent, ref, toRef, computed, onMounted, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, toDisplayString } from "vue";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoCarouselStereoscopic",
  props: {
    list: {
      type: Array,
      default: () => {
      }
    },
    width: {
      type: Number
    },
    height: {
      type: Number
    },
    fontSize: {
      type: Number
    },
    showBackColor: {
      type: Boolean
    },
    color: {
      type: String
    },
    backgroundColor: {
      type: String
    },
    letterSpacing: {
      type: Number
    },
    lineHeight: {
      type: Number
    },
    fontFamily: {
      type: String
    },
    imgWidth: {
      type: Number,
      default: 300
    },
    imgHeight: {
      type: Number,
      default: 200
    }
  },
  setup(props) {
    const seconds = 800;
    const box = ref();
    const timer = ref();
    const rotateIndex = ref(0);
    const list = toRef(props, "list");
    const deg = computed(() => {
      return 360 / props.list.length;
    });
    const radius = computed(() => {
      return props.imgWidth * list.value.length / 6.28;
    });
    const handleMouseover = () => {
      clearInterval(timer.value);
    };
    const handleMouseleave = () => {
      defineTimer();
    };
    const handleClick = (item) => {
      window.open(item.link);
    };
    const handleRotate = () => {
      if (!box.value)
        return;
      box.value.style.transform = `rotateY(${deg.value / 500 * ++rotateIndex.value}deg)`;
      box.value.style.transition = `${seconds / 500 / list.value.length}s linear`;
    };
    const defineTimer = () => {
      handleRotate();
      timer.value = setInterval(() => {
        handleRotate();
      }, seconds / 500 / list.value.length * 100);
    };
    onMounted(() => {
      defineTimer();
    });
    return {
      deg,
      radius,
      box,
      list,
      handleMouseover,
      handleMouseleave,
      handleClick
    };
  }
});
const _hoisted_1 = { class: "co-carousel-stereoscopic" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = ["src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", _hoisted_1, [
    createElementVNode("section", {
      ref: "box",
      style: normalizeStyle({
        width: _ctx.imgWidth + "px",
        height: _ctx.imgHeight + "px"
      }),
      onMouseover: _cache[0] || (_cache[0] = (...args) => _ctx.handleMouseover && _ctx.handleMouseover(...args)),
      onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.handleMouseleave && _ctx.handleMouseleave(...args))
    }, [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index) => {
        return openBlock(), createElementBlock("div", {
          class: "carousel-stereoscopic__item",
          style: normalizeStyle({
            transform: `rotateY(${_ctx.deg * index}deg) translateZ(${_ctx.radius}px)`
          }),
          onClick: ($event) => _ctx.handleClick(item)
        }, [
          createElementVNode("img", {
            src: item.imgSrc,
            alt: ""
          }, null, 8, _hoisted_3),
          createElementVNode("span", {
            class: "carousel-stereoscopic__span",
            style: normalizeStyle({
              fontSize: _ctx.fontSize + "px",
              letterSpacing: _ctx.letterSpacing + "px",
              lineHeight: _ctx.lineHeight + "px",
              backgroundColor: _ctx.backgroundColor,
              color: _ctx.color
            })
          }, toDisplayString(item.title), 5)
        ], 12, _hoisted_2);
      }), 256))
    ], 36)
  ]);
}
var CoCarouselStereoscopic = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5707b24a"]]);
export { CoCarouselStereoscopic as default };