mine-h5-ui/es/MeCaptcha/index.vue.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { defineComponent as $, useModel as g, openBlock as l, createBlock as M, Transition as B, withCtx as S, createElementBlock as r, normalizeClass as d, unref as s, createElementVNode as e, normalizeStyle as _, createCommentVNode as m, toDisplayString as w, mergeModels as C } from "vue";
import { name as u, assets as o } from "./config.js";
import { useSlide as E } from "./hooks.js";
const N = ["src"], z = {
  key: 0,
  class: "captcha-img-rect"
}, R = ["src"], V = ["src"], A = {
  key: 0,
  class: "captcha-success"
}, D = ["src"], T = { class: "captcha-slide" }, X = ["src"], j = { class: "captcha-footer" }, q = { class: "captcha-footer__left" }, F = ["src"], K = /* @__PURE__ */ $({
  name: u,
  __name: "index",
  props: /* @__PURE__ */ C({
    item: {}
  }, {
    visible: { type: Boolean, default: !1 },
    visibleModifiers: {},
    statusCode: { default: 0 },
    statusCodeModifiers: {}
  }),
  emits: /* @__PURE__ */ C(["check", "refresh"], ["update:visible", "update:statusCode"]),
  setup(c, { emit: x }) {
    const k = x, y = c, p = g(c, "visible"), a = g(c, "statusCode"), { moveX: h, imgRect: i, rectAni: b, onClose: f, onRefresh: v } = E(y, k, { visible: p, statusCode: a });
    return (G, t) => (l(), M(B, { name: "fade" }, {
      default: S(() => [
        p.value ? (l(), r("div", {
          key: 0,
          class: d(s(u))
        }, [
          e("div", {
            class: d(`${s(u)}-content`)
          }, [
            t[3] || (t[3] = e("div", { class: "captcha-tips" }, "安全验证", -1)),
            t[4] || (t[4] = e("div", { class: "captcha-title" }, "拖动下方滑块完成拼图", -1)),
            e("img", {
              src: s(o).close,
              class: "captcha-close",
              onClick: t[0] || (t[0] = //@ts-ignore
              (...n) => s(f) && s(f)(...n))
            }, null, 8, N),
            e("div", {
              class: d(["captcha-rect", { animation: s(b) }])
            }, [
              s(i) ? (l(), r("div", z, [
                e("img", {
                  src: c.item?.elem?.url,
                  class: "img-start",
                  style: _(`width: ${s(i).w}px; height: ${s(i).h}rpx;top: ${s(i).y}px;left: ${s(h)}px;`)
                }, null, 12, R),
                e("img", {
                  src: c.item?.bgElem?.url,
                  class: "img-end"
                }, null, 8, V),
                a.value === 1 ? (l(), r("div", A, [
                  e("img", {
                    src: s(o).success,
                    class: "captcha-success-img"
                  }, null, 8, D),
                  t[2] || (t[2] = e("div", { class: "captcha-success-text" }, "验证成功!", -1))
                ])) : m("", !0)
              ])) : m("", !0),
              e("div", T, [
                e("div", {
                  ref: "captchaSlideMoveNode",
                  class: "captcha-slide-move",
                  style: _(`left: ${s(h)}px;`)
                }, [
                  e("img", {
                    src: s(o).lines,
                    class: "line"
                  }, null, 8, X)
                ], 4)
              ])
            ], 2),
            e("div", j, [
              e("div", q, w([2, 3].includes(a.value) ? "验证错误，请重试" : ""), 1),
              e("img", {
                src: s(o).refresh,
                class: "captcha-footer__right",
                onClick: t[1] || (t[1] = //@ts-ignore
                (...n) => s(v) && s(v)(...n))
              }, null, 8, F)
            ])
          ], 2)
        ], 2)) : m("", !0)
      ]),
      _: 1
    }));
  }
});
export {
  K as default
};