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

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

import { defineComponent, ref, onMounted, onUnmounted, toRefs, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, withModifiers, Fragment, renderList, createBlock } from "vue";
import Props from "./props.mjs";
import LevelView from "./level-view.mjs";
import "./index3.mjs";
import { handlePushEvent } from "../tools.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoMixRotate",
  props: Props,
  components: { LevelView },
  setup(props) {
    const touchEvent = ref(0);
    const diff = ref(0);
    const isStop = ref(false);
    function mouseEnter(event) {
      isStop.value = true;
      touchEvent.value = event.clientX;
    }
    function mouseOver(event) {
      if (!isStop.value)
        return;
      diff.value = event.clientX - touchEvent.value;
    }
    function mouseLeave() {
      isStop.value = false;
      touchEvent.value = 0;
      diff.value = 0;
    }
    function touchStart(event) {
      const [touch] = event.touches;
      isStop.value = true;
      touchEvent.value = touch.clientX;
    }
    function touchMove(event) {
      const [touch] = event.touches;
      if (!isStop.value)
        return;
      diff.value = touch.clientX - touchEvent.value;
    }
    function touchEnd() {
      isStop.value = false;
      touchEvent.value = 0;
      diff.value = 0;
    }
    function imgClick(data) {
      handlePushEvent({ key: "CoMixRotate", elementId: props.dataKey, event: "click", data });
    }
    function itemClick(data) {
      handlePushEvent({ key: "CoMixRotate", elementId: props.dataKey, event: "click", data });
    }
    onMounted(() => {
    });
    onUnmounted(() => {
    });
    return {
      mouseEnter,
      mouseOver,
      mouseLeave,
      touchStart,
      touchMove,
      touchEnd,
      imgClick,
      itemClick,
      isStop,
      diff,
      ...toRefs(props)
    };
  }
});
const _hoisted_1 = { class: "co-mix-rotate3d" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_level_view = resolveComponent("level-view");
  return openBlock(), createElementBlock("div", _hoisted_1, [
    createElementVNode("div", {
      class: "co-mix-zepto-body",
      style: normalizeStyle({ transform: `translateY(${_ctx.transformY}%)` })
    }, [
      createElementVNode("div", {
        class: "co-mix-zepto-wrapper",
        style: normalizeStyle({ "--rotateX": `${_ctx.angle}%` })
      }, [
        createElementVNode("div", {
          class: "co-mix-zepto-main",
          style: normalizeStyle({ transform: `rotateX(0deg)` }),
          onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.mouseEnter && _ctx.mouseEnter(...args)),
          onMousemove: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.mouseOver && _ctx.mouseOver(...args), ["prevent"])),
          onMouseup: _cache[2] || (_cache[2] = (...args) => _ctx.mouseLeave && _ctx.mouseLeave(...args)),
          onTouchstart: _cache[3] || (_cache[3] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
          onTouchmove: _cache[4] || (_cache[4] = (...args) => _ctx.touchMove && _ctx.touchMove(...args)),
          onTouchend: _cache[5] || (_cache[5] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index) => {
            return openBlock(), createBlock(_component_level_view, {
              list: item.list,
              "text-data": item.textData,
              "special-speed": item.speed,
              "special-deg": item.deg,
              "show-image": index === 0,
              level: index,
              "transform-y": _ctx.containerY,
              "image-props": _ctx.imageStyle,
              "container-props": _ctx.containerStyle,
              "title-props": _ctx.titleStyle,
              "text-props": _ctx.textStyle,
              "perspective-percenter": _ctx.perspectivePercenter,
              "line-props": _ctx.lineStyle,
              "point-props": _ctx.pointStyle,
              distance: _ctx.startDistance + _ctx.interval * index,
              "is-stop": _ctx.isStop,
              diff: _ctx.diff,
              onImgClick: _ctx.imgClick,
              onItemClick: _ctx.itemClick
            }, null, 8, ["list", "text-data", "special-speed", "special-deg", "show-image", "level", "transform-y", "image-props", "container-props", "title-props", "text-props", "perspective-percenter", "line-props", "point-props", "distance", "is-stop", "diff", "onImgClick", "onItemClick"]);
          }), 256))
        ], 36)
      ], 4)
    ], 4)
  ]);
}
var MixRotate3D = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { MixRotate3D as default };