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

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

import { defineComponent, ref, toRef, watch, computed, onMounted, onUnmounted, toRefs, openBlock, createElementBlock, normalizeStyle, withModifiers, createElementVNode, toDisplayString, Fragment, renderList, normalizeClass } from "vue";
import Props from "./prop.mjs";
import "./index3.mjs";
import { handlePushEvent } from "../tools.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoRotate3d2Std",
  props: Props,
  emits: ["index"],
  setup(props) {
    const diff = 20;
    const isMove = ref(false);
    const away = ref("");
    const touchEvent = ref({ x: 0, y: 0, distance: 0 });
    const timer = ref();
    const zoetrope = ref();
    const rotateDeg = ref(0);
    const indexbtn = ref(0);
    const list = toRef(props, "list");
    const unitSum = ref(list.value.length);
    const imageItem = ref(list.value[0]);
    watch(
      () => props.rotationSpeed,
      () => {
        clearTimer();
        defineTimer();
      }
    );
    const Style = computed(() => {
      return {
        "--width": `${props.width}px`,
        "--height": `${props.height}px`,
        "--left": `${props.width / 2}px`
      };
    });
    const fontStyle = computed(() => {
      return {
        "--fontSize": `${props.fontSize}px`,
        "--fontColor": `${props.fontColor}`,
        "--fontWeight": `${props.fontWeight}`,
        "--fontFamily": `${props.fontFamily}`,
        "--fontWidth": `${props.fontWidth}px`,
        "--fontHeight": `${props.fontHeight}px`,
        "--fontTextAlign": `${props.fontTextAlign}`,
        "--indexColor": `${props.indexColor}`,
        "--fontPadding": `${props.fontPadding}px`,
        "--indexBgColor": `url(${props.indexBgColor})`,
        "--fontTop": `${props.fontTop}%`,
        "--fontBgImg": `url(${props.fontBgImg})`
      };
    });
    const zoetropeStyle = computed(() => {
      return {
        "--angle": `${props.angle * 10}%`,
        "--wrapRotateZ": `${props.wrapRotateZ}deg`
      };
    });
    const yuanStyle = computed(() => {
      return {
        "--yuanBgImg": `url(${props.yuanBgImg})`,
        "--yuanWidth": `${props.yuanWidth}px`,
        "--yuanHeight": `${props.yuanHeight}px`,
        "--yuanTop": `${props.yuanTop}px`,
        "--yuanLeft": `${props.yuanWidth / 2}px`,
        "--yuanColor": `${props.yuanColor}`,
        "--yuanBorder": `${props.yuanBorder}px`
      };
    });
    const borStyle = computed(() => {
      return {
        "--borColor": `${props.borColor}`,
        "--borWidth": `${props.borWidth}px`,
        "--borTop": `${props.borTop}px`,
        "--indexColor": `${props.indexColor}`
      };
    });
    const imageStyle = computed(() => {
      return {
        "--imageWidth": `${props.imageWidth}px`,
        "--imageHeight": `${props.imageHeight}px`,
        "--imageTop": `${props.imageTop}px`,
        "--imageLeft": `${props.imageWidth / 2}px`
      };
    });
    const textStyle = computed(() => {
      return {
        "--fontSize": `${props.textStyle.size}px`,
        "--color": `${props.textStyle.color}`,
        "--fontFamily": `${props.textStyle.fontFamily}`,
        "--weight": `${props.textStyle.fontWeight}`,
        "--align": `${props.textStyle.align}`,
        "--padding": `${props.textStyle.padding}px`
      };
    });
    const radius = computed(() => {
      return props.width * unitSum.value / props.diameter;
    });
    const check = (val, index) => {
      imageItem.value = val;
      indexbtn.value = index;
    };
    const clickItem = (_, index) => {
      const element = zoetrope.value;
      if (!element)
        return;
      const everyDeg = 360 / unitSum.value;
      const deg = everyDeg * -index + 40;
      clearTimer();
      requestAnimationFrame(loopClick(deg));
    };
    function loopClick(end) {
      return () => {
        const current = rotateDeg.value;
        if (end > current)
          rotateDeg.value += 2;
        if (end < current)
          rotateDeg.value -= 2;
        if (end + 10 > current && end - 10 < current)
          return defineTimer();
        handleRotate();
        requestAnimationFrame(loopClick(end));
      };
    }
    const handleClick = () => {
      handlePushEvent({
        key: "CoRotate3d2Std",
        elementId: props.dataKey,
        event: "click",
        data: { item: imageItem.value, index: indexbtn.value }
      });
    };
    function moveHorizonal(distance) {
      const mainDeg = 360;
      let deg = touchEvent.value.distance - distance * 1;
      if (deg > mainDeg)
        deg -= mainDeg;
      if (deg < -mainDeg)
        deg += mainDeg;
      rotateDeg.value = deg;
      requestAnimationFrame(handleRotate);
    }
    const mouseenter = (event) => {
      const { pageX, pageY } = event;
      clearTimer();
      isMove.value = true;
      touchEvent.value = { x: pageX, y: pageY, distance: rotateDeg.value };
    };
    const mouseOver = (event) => {
      if (!isMove.value)
        return;
      const { pageX, pageY } = event;
      const { x, y } = touchEvent.value;
      const h = Number((x - pageX).toFixed(1));
      const v = Number((y - pageY).toFixed(1));
      const absH = Math.abs(h);
      const absV = Math.abs(v);
      if (away.value) {
        if (away.value === "h")
          return moveHorizonal(h);
        return;
      }
      if (absH > diff)
        away.value = "h";
      if (absV > diff)
        away.value = "v";
    };
    const mouseleave = () => {
      defineTimer();
      resetTouch();
    };
    function loopRotate() {
      rotateDeg.value -= props.rotationSpeed / 100;
      handleRotate();
      timer.value = requestAnimationFrame(loopRotate);
    }
    const handleRotate = () => {
      const element = zoetrope.value;
      if (!element)
        return;
      const mainDeg = 360;
      const everyDeg = mainDeg / unitSum.value;
      let deg = rotateDeg.value;
      let index = 0;
      if (deg > mainDeg)
        deg -= mainDeg;
      if (deg < -mainDeg)
        deg += mainDeg;
      if (deg < 0)
        index = parseInt((deg - 30) / everyDeg, 10);
      if (deg > 0)
        index = parseInt((deg + 30) / everyDeg, 10);
      if (index <= 0) {
        index = Math.abs(index);
        if (index >= unitSum.value)
          index = 0;
      } else {
        index = unitSum.value - index;
      }
      check(list.value[index], index);
      rotateDeg.value = deg;
      element.style.transform = `translateY(${props.transformY || 0}px) rotateY(${deg}deg)`;
    };
    function startFunc(event) {
      clearTimer();
      const [touch] = event.touches;
      touchEvent.value = { x: touch.pageX, y: touch.pageY, distance: rotateDeg.value };
    }
    function moveFunc(event) {
      const [touch] = event.touches;
      const { x } = touchEvent.value;
      const h = Number((x - touch.pageX).toFixed(1));
      moveHorizonal(h);
    }
    function endFunc() {
      defineTimer();
      resetTouch();
    }
    const defineTimer = () => {
      timer.value = requestAnimationFrame(loopRotate);
    };
    function clearTimer() {
      cancelAnimationFrame(timer.value);
    }
    function resetTouch() {
      isMove.value = false;
      touchEvent.value = { x: 0, y: 0, distance: 0 };
      away.value = "";
    }
    onMounted(() => {
      defineTimer();
    });
    onUnmounted(() => {
      clearTimer();
    });
    return {
      ...toRefs(props),
      Style,
      radius,
      unitSum,
      rotateDeg,
      zoetrope,
      borStyle,
      fontStyle,
      yuanStyle,
      zoetropeStyle,
      clickItem,
      check,
      handleClick,
      mouseleave,
      mouseOver,
      mouseenter,
      moveHorizonal,
      startFunc,
      moveFunc,
      endFunc,
      list,
      imageItem,
      indexbtn,
      imageStyle,
      textStyle
    };
  }
});
const _hoisted_1 = { style: { "width": "100%", "height": "100%" } };
const _hoisted_2 = ["src"];
const _hoisted_3 = {
  class: /* @__PURE__ */ normalizeClass(["zoetrope"]),
  ref: "zoetrope"
};
const _hoisted_4 = ["onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: "co-rotate3d-std",
    style: normalizeStyle(_ctx.Style),
    onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.startFunc && _ctx.startFunc(...args)),
    onTouchmove: _cache[2] || (_cache[2] = (...args) => _ctx.moveFunc && _ctx.moveFunc(...args)),
    onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.endFunc && _ctx.endFunc(...args)),
    onMousedown: _cache[4] || (_cache[4] = (...args) => _ctx.mouseenter && _ctx.mouseenter(...args)),
    onMousemove: _cache[5] || (_cache[5] = withModifiers((...args) => _ctx.mouseOver && _ctx.mouseOver(...args), ["prevent"])),
    onMouseup: _cache[6] || (_cache[6] = (...args) => _ctx.mouseleave && _ctx.mouseleave(...args))
  }, [
    createElementVNode("div", {
      class: "maxImage",
      style: normalizeStyle(_ctx.imageStyle),
      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleClick())
    }, [
      createElementVNode("div", _hoisted_1, [
        createElementVNode("img", {
          src: _ctx.imageItem.imgSrc
        }, null, 8, _hoisted_2),
        createElementVNode("p", {
          class: "co-rotate3d-text",
          style: normalizeStyle({ ..._ctx.textStyle })
        }, toDisplayString(_ctx.imageItem.text), 5)
      ])
    ], 4),
    createElementVNode("div", {
      class: "zoetrope-wrapper",
      style: normalizeStyle(_ctx.zoetropeStyle)
    }, [
      createElementVNode("div", {
        class: "yuan",
        style: normalizeStyle(_ctx.yuanStyle)
      }, null, 4),
      createElementVNode("div", _hoisted_3, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index) => {
          return openBlock(), createElementBlock("div", {
            class: "zoetrope-son",
            style: normalizeStyle({
              transform: `rotateY(${360 / _ctx.unitSum * index}deg) translateZ(${_ctx.radius}px)`,
              ..._ctx.Style
            }),
            key: index,
            onClick: ($event) => _ctx.clickItem(item, index)
          }, [
            createElementVNode("div", {
              class: normalizeClass(["bor", { indexBorColor: _ctx.indexbtn == index }]),
              style: normalizeStyle({
                transform: `rotateY(${360 / _ctx.unitSum * -index - _ctx.rotateDeg}deg) translate(-50%, 0, 0)`,
                ..._ctx.borStyle
              })
            }, null, 6),
            createElementVNode("p", {
              class: normalizeClass(["item-title", { indexBtnColor: _ctx.indexbtn == index }]),
              style: normalizeStyle({
                transform: `rotateY(${360 / _ctx.unitSum * -index - _ctx.rotateDeg}deg) translate3d(-50%, 0, 0)`,
                ..._ctx.fontStyle
              })
            }, toDisplayString(item.title), 7)
          ], 12, _hoisted_4);
        }), 128))
      ], 512)
    ], 4)
  ], 36);
}
var Rotate3d = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { Rotate3d as default };