yuang-framework-ui-pc/lib/yu-framework-image-captcha-input/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const httpConfig = require("yuang-framework-ui-common/lib/config/httpConfig");
const CaptchaIcon = require("./components/CaptchaIcon");
const _hoisted_1 = { class: "yu-framework-image-captcha-wrapper" };
const _hoisted_2 = ["src"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "YuFrameworkImageCaptchaInput" },
  __name: "index",
  props: {
    modelValue: { default: "" },
    param: { default: {} }
  },
  emits: ["update:modelValue", "initSuccess", "change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const componentParam = vue.computed(() => ({
      inputSize: "medium",
      isShowIcon: true,
      ...props.param
    }));
    const imageCaptchaSrc = vue.ref("");
    const imageCaptchaForm = vue.ref({
      key: "",
      captcha: ""
    });
    vue.onMounted(() => {
      init();
    });
    const init = () => {
      changeImageCaptcha();
      emit("initSuccess", {});
    };
    const changeImageCaptcha = () => {
      imageCaptchaForm.value.captcha = "";
      imageCaptchaSrc.value = "";
      httpConfig.http.post("/framework-api/core/framework-captcha/createImageCaptcha").then((res) => {
        imageCaptchaSrc.value = res.data.data.imageSrc;
        imageCaptchaForm.value.key = res.data.data.key;
        emit("change", { key: res.data.data.key });
      }).catch((ex) => {
        console.error(ex.message);
      });
    };
    vue.watch(
      () => imageCaptchaForm.value.captcha,
      (val) => {
        emit("update:modelValue", val);
      }
    );
    __expose({
      changeImageCaptcha
    });
    return (_ctx, _cache) => {
      const _component_el_input = vue.resolveComponent("el-input");
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createVNode(_component_el_input, {
          ref: "captchaRef",
          modelValue: imageCaptchaForm.value.captcha,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => imageCaptchaForm.value.captcha = $event),
          size: componentParam.value.inputSize,
          placeholder: "请输入验证码",
          "prefix-icon": componentParam.value.isShowIcon ? CaptchaIcon : "",
          clearable: ""
        }, null, 8, ["modelValue", "size", "prefix-icon"]),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(`image-captcha-${componentParam.value.inputSize}`),
          onClick: changeImageCaptcha
        }, [
          imageCaptchaSrc.value ? (vue.openBlock(), vue.createElementBlock("img", {
            key: 0,
            src: imageCaptchaSrc.value
          }, null, 8, _hoisted_2)) : vue.createCommentVNode("", true)
        ], 2)
      ]);
    };
  }
});
module.exports = _sfc_main;