tav-ui/es/packages/components/verify/src/rotate2.mjs

Tav UI

import { defineComponent, ref, reactive, watch, computed, unref, createVNode, mergeProps } from 'vue';
import { useTimeoutFn } from '../../../hooks/core/useTimeout2.mjs';
import { hackCss } from '../../../utils/domUtils2.mjs';
import Verify from './verify2.mjs';
import { verifyRotateProps } from './types2.mjs';

var Rotate = defineComponent({
  name: "TaVerifyRotate",
  inheritAttrs: false,
  props: verifyRotateProps,
  emits: ["success", "change", "update:value"],
  setup(props, {
    emit,
    attrs,
    expose
  }) {
    const basicRef = ref(null);
    const state = reactive({
      showTip: false,
      isPassing: false,
      imgStyle: {},
      randomRotate: 0,
      currentRotate: 0,
      toOrigin: false,
      startTime: 0,
      endTime: 0,
      draged: false
    });
    watch(() => state.isPassing, (isPassing) => {
      if (isPassing) {
        const {
          startTime,
          endTime
        } = state;
        const time = (endTime - startTime) / 1e3;
        emit("success", {
          isPassing,
          time: time.toFixed(1)
        });
        emit("change", isPassing);
        emit("update:value", isPassing);
      }
    });
    const getImgWrapStyleRef = computed(() => {
      const {
        imgWrapStyle,
        imgWidth
      } = props;
      return {
        width: `${imgWidth}px`,
        height: `${imgWidth}px`,
        ...imgWrapStyle
      };
    });
    const getFactorRef = computed(() => {
      const {
        minDegree,
        maxDegree
      } = props;
      if (minDegree === maxDegree) {
        return Math.floor(1 + Math.random() * 1) / 10 + 1;
      }
      return 1;
    });
    function handleStart() {
      state.startTime = new Date().getTime();
    }
    function handleDragBarMove(data) {
      state.draged = true;
      const {
        imgWidth,
        height,
        maxDegree
      } = props;
      const {
        moveX
      } = data;
      const currentRotate = Math.ceil(moveX / (imgWidth - parseInt(height)) * maxDegree * unref(getFactorRef));
      state.currentRotate = currentRotate;
      state.imgStyle = hackCss("transform", `rotateZ(${state.randomRotate - currentRotate}deg)`);
    }
    function handleImgOnLoad() {
      const {
        minDegree,
        maxDegree
      } = props;
      const ranRotate = Math.floor(minDegree + Math.random() * (maxDegree - minDegree));
      state.randomRotate = ranRotate;
      state.imgStyle = hackCss("transform", `rotateZ(${ranRotate}deg)`);
    }
    function handleDragEnd() {
      const {
        randomRotate,
        currentRotate
      } = state;
      const {
        diffDegree
      } = props;
      if (Math.abs(randomRotate - currentRotate) >= (diffDegree || 20)) {
        state.imgStyle = hackCss("transform", `rotateZ(${randomRotate}deg)`);
        state.toOrigin = true;
        useTimeoutFn(() => {
          state.toOrigin = false;
          state.showTip = true;
        }, 300);
      } else {
        checkPass();
      }
      state.showTip = true;
    }
    function checkPass() {
      state.isPassing = true;
      state.endTime = new Date().getTime();
    }
    function resume() {
      state.showTip = false;
      const basicEl = unref(basicRef);
      if (!basicEl) {
        return;
      }
      state.isPassing = false;
      basicEl.resume();
      handleImgOnLoad();
    }
    expose({
      resume
    });
    return () => {
      const {
        src
      } = props;
      const {
        toOrigin,
        isPassing,
        startTime,
        endTime
      } = state;
      const imgCls = [];
      if (toOrigin) {
        imgCls.push("to-origin");
      }
      const time = (endTime - startTime) / 1e3;
      return createVNode("div", {
        "class": "ir-dv"
      }, [createVNode("div", {
        "class": `ir-dv-img__wrap`,
        "style": unref(getImgWrapStyleRef)
      }, [createVNode("img", {
        "src": src,
        "onLoad": handleImgOnLoad,
        "width": parseInt(props.width),
        "class": imgCls,
        "style": state.imgStyle,
        "onClick": () => {
          resume();
        },
        "alt": "verify"
      }, null), state.showTip && createVNode("span", {
        "class": [`ir-dv-img__tip`, state.isPassing ? "success" : "error"]
      }, [state.isPassing ? `\u9A8C\u8BC1\u6821\u9A8C\u6210\u529F\uFF0C\u8017\u65F6${time.toFixed(1)}\u79D2` : "\u9A8C\u8BC1\u5931\u8D25\uFF01"]), !state.showTip && !state.draged && createVNode("span", {
        "class": [`ir-dv-img__tip`, "normal"]
      }, ["\u70B9\u51FB\u56FE\u7247\u53EF\u5237\u65B0"])]), createVNode(Verify, mergeProps({
        "class": `ir-dv-drag__bar`,
        "onMove": handleDragBarMove,
        "onEnd": handleDragEnd,
        "onStart": handleStart,
        "ref": basicRef
      }, {
        ...attrs,
        ...props
      }, {
        "value": isPassing,
        "isSlot": true
      }), null)]);
    };
  }
});

export { Rotate as default };
//# sourceMappingURL=rotate2.mjs.map