cione-comp-lib/es/packages/co-mix-rotate/level-view.mjs

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

import { defineComponent, ref, computed, watch, onMounted, onUnmounted, toRefs, openBlock, createElementBlock, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, toDisplayString } from "vue";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
function randomInt(min, max) {
  let res = min + Math.floor((max - min) * Math.random());
  return res;
}
const _sfc_main = defineComponent({
  props: {
    perspectivePercenter: { type: Number, default: 0 },
    level: { type: Number, default: 0 },
    transformY: { type: Number, default: -70 },
    specialSpeed: { type: Number, default: 10 },
    specialDeg: { type: Number, default: 0 },
    showImage: { type: Boolean, default: false },
    deg: { type: Number, default: 0 },
    distance: { type: Number, default: 100 },
    isStop: { type: Boolean, default: false },
    diff: { type: Number, default: 0 },
    list: {
      type: Array,
      default: [{ id: 1, text: "", imgSrc: "", videoSrc: "" }]
    },
    textData: {
      type: Object,
      default: { speed: 50, list: [{ id: 1, text: "", imgSrc: "", videoSrc: "" }] }
    },
    imageProps: { type: Object, default: { width: 100, height: 100, url: "" } },
    containerProps: { type: Object, default: { width: 80, height: 80 } },
    titleProps: {
      type: Object,
      default: {
        top: 0,
        fontSize: 16,
        fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1",
        fontWeight: "normal",
        color: "white"
      }
    },
    textProps: {
      type: Object,
      default: {
        top: 0,
        fontSize: 16,
        fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1",
        fontWeight: "normal",
        color: "white"
      }
    },
    lineProps: {
      type: Object,
      default: { show: true, lineWidth: 1, lineColor: "rgba(78, 229, 247, 0.4)" }
    },
    pointProps: {
      type: Object,
      default: { show: false, size: 20, color: "rgba(78, 229, 247, 0.4)" }
    }
  },
  emits: ["img-click", "item-click"],
  setup(props, { emit }) {
    const startDeg = props.specialDeg > -1 ? props.specialDeg : randomInt(1, 361);
    const eDeg = props.specialDeg > -1 ? startDeg : Number((360 / props.list.length).toFixed(2)) + startDeg;
    const textDeg = Number((360 / props.textData.list.length).toFixed(2));
    const size = ref(props.distance * 2);
    const rotateDeg = ref(0);
    const textRotateDeg = ref(0);
    let recordDeg = { rotateDeg: 0, textRotateDeg: 0 };
    let timer = 0;
    const imageStyle = computed(() => {
      const deg = props.deg;
      return {
        width: `${props.imageProps.width}px`,
        height: `${props.imageProps.height}px`,
        backgroundImage: `url(${props.imageProps.url})`,
        transform: `translate3d(-50%, -50%, 0) rotateX(-90deg) rotateY(${-deg}deg)`
      };
    });
    const containerStyle = computed(() => {
      return {
        "--width": `${props.containerProps.width}px`,
        "--height": `${props.containerProps.height}px`
      };
    });
    const lineStyle = computed(() => {
      return {
        "--width": `${size.value}px`,
        "--height": `${size.value}px`,
        "--line": `${props.lineProps.show ? props.lineProps.lineWidth : 0}px solid ${props.lineProps.lineColor}`,
        transform: `translate3d(-50%, -50%, 0px) rotateX(90deg)`
      };
    });
    const pointStyle = computed(() => {
      const size2 = props.pointProps.size;
      const color = props.pointProps.color;
      const isShow = props.pointProps.show;
      let halfSize = Number((size2 / 2).toFixed(0));
      if (halfSize % 2)
        halfSize -= 1;
      return {
        "--size": `${isShow ? size2 : 0}px`,
        "--color": color,
        transform: `translateX(-${halfSize}px) translateY(-${halfSize}px)`
      };
    });
    const titleStyle = computed(() => {
      return {
        "--top": `${props.titleProps.top}%`,
        "--fontSize": `${props.titleProps.fontSize}px`,
        "--fontFamily": `${props.titleProps.fontFamily}`,
        "--fontWeight": `${props.titleProps.fontWeight}`,
        "--color": `${props.titleProps.color}`
      };
    });
    const textStyle = computed(() => {
      return {
        "--top": `${props.textProps.top}%`,
        "--fontSize": `${props.textProps.fontSize}px`,
        "--fontFamily": `${props.textProps.fontFamily}`,
        "--fontWeight": `${props.textProps.fontWeight}`,
        "--color": `${props.textProps.color}`
      };
    });
    watch(() => props.isStop, watchIsStop);
    watch(() => props.diff, watchDiff);
    watch(
      () => props.distance,
      () => {
        size.value = props.distance * 2;
      }
    );
    function watchIsStop() {
      if (props.isStop) {
        clearTimer();
        recordDeg = { rotateDeg: rotateDeg.value, textRotateDeg: textRotateDeg.value };
      } else {
        defineTimer();
        recordDeg = { rotateDeg: 0, textRotateDeg: 0 };
      }
    }
    function watchDiff() {
      if (!props.isStop)
        return;
      const deg = props.diff / 4;
      rotateDeg.value = recordDeg.rotateDeg + deg;
      textRotateDeg.value = recordDeg.textRotateDeg + deg;
    }
    function imgClick() {
      const data = { type: "img", imgSrc: props.imageProps.url };
      emit("img-click", data);
    }
    function itemClick(item, index) {
      const data = { type: "item", item, index, level: props.level };
      emit("item-click", data);
    }
    function loopRotate() {
      let deg = rotateDeg.value;
      let textDeg2 = textRotateDeg.value;
      deg -= props.specialSpeed / 100;
      if (deg < -360)
        deg += 360;
      if (deg > 360)
        deg -= 360;
      textDeg2 -= props.textData.speed / 100;
      if (textDeg2 < -360)
        textDeg2 += 360;
      if (textDeg2 > 360)
        textDeg2 -= -360;
      rotateDeg.value = deg;
      textRotateDeg.value = textDeg2;
      timer = requestAnimationFrame(loopRotate);
    }
    function defineTimer() {
      timer = requestAnimationFrame(loopRotate);
    }
    function clearTimer() {
      cancelAnimationFrame(timer);
    }
    onMounted(() => {
      defineTimer();
    });
    onUnmounted(() => {
      clearTimer();
    });
    return {
      eDeg,
      textDeg,
      size,
      rotateDeg,
      textRotateDeg,
      imgClick,
      itemClick,
      imageStyle,
      lineStyle,
      pointStyle,
      containerStyle,
      titleStyle,
      textStyle,
      ...toRefs(props)
    };
  }
});
const _hoisted_1 = ["onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: "co-mix-zepto-line",
    style: normalizeStyle({ ..._ctx.lineStyle })
  }, [
    withDirectives(createElementVNode("div", {
      class: "co-mix-zepto-center-img",
      style: normalizeStyle({ ..._ctx.imageStyle }),
      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.imgClick && _ctx.imgClick(...args))
    }, null, 4), [
      [vShow, _ctx.showImage]
    ]),
    createElementVNode("div", {
      class: "co-mix-zepto-line co-mix-zepto-event-none",
      style: normalizeStyle({ ..._ctx.lineStyle, transform: `translate3d(-50%, -50%, 0px) rotateZ(${_ctx.textData.list.length ? -_ctx.textRotateDeg : 0}deg)`, "--line": "0px solid white" })
    }, [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.textData.list, (item, index) => {
        return openBlock(), createElementBlock("div", {
          class: "co-mix-zepto-son-container",
          style: normalizeStyle({ transform: `rotateX(-90deg) rotateY(${_ctx.textDeg * (index + 1)}deg) translate3d(-50px, -50px, ${_ctx.distance}px)` })
        }, [
          createElementVNode("div", {
            class: "co-mix-zepto-son",
            style: normalizeStyle({ transform: `rotateY(${_ctx.textDeg * -(index + 1) - _ctx.textRotateDeg}deg)` })
          }, [
            createElementVNode("div", {
              class: "co-mix-zepto-bg",
              style: normalizeStyle({ width: "100px", height: "100px", ..._ctx.titleStyle, "--background": `url(${item.imgSrc})` })
            }, [
              createElementVNode("span", null, toDisplayString(item.text), 1),
              createElementVNode("span", {
                class: "co-mix-zepto-point",
                style: normalizeStyle(_ctx.pointStyle)
              }, null, 4)
            ], 4)
          ], 4)
        ], 4);
      }), 256))
    ], 4),
    createElementVNode("div", {
      class: "co-mix-zepto-line",
      style: normalizeStyle({ ..._ctx.lineStyle, transform: `translate3d(-50%, -50%, 0px) rotateZ(${_ctx.list.length ? -_ctx.rotateDeg : 0}deg)`, "--line": "0px solid white" })
    }, [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index) => {
        return openBlock(), createElementBlock("div", {
          class: "co-mix-zepto-son-container co-mix-zepto-pointer",
          onClick: ($event) => _ctx.itemClick(item, index),
          style: normalizeStyle({ transform: `rotateX(-90deg) rotateY(${_ctx.eDeg * (index + 1)}deg) translate3d(-50%, ${_ctx.transformY}%, ${_ctx.distance - _ctx.distance * (_ctx.perspectivePercenter / 100)}px)` })
        }, [
          createElementVNode("div", {
            class: "co-mix-zepto-son",
            style: normalizeStyle({ transform: `rotateY(${_ctx.eDeg * -(index + 1) - _ctx.rotateDeg}deg)` })
          }, [
            createElementVNode("div", {
              class: "co-mix-zepto-bg",
              style: normalizeStyle({ ..._ctx.containerStyle, ..._ctx.textStyle, "--background": `url(${item.imgSrc})` })
            }, [
              createElementVNode("span", null, toDisplayString(item.text), 1)
            ], 4)
          ], 4)
        ], 12, _hoisted_1);
      }), 256))
    ], 4)
  ], 4);
}
var LevelView = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { LevelView as default };