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

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

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