yuang-framework-ui-pc/es/yu-framework-image-captcha-input/index.js

yuang-framework-ui-pc Library

import { defineComponent, computed, ref, onMounted, watch, resolveComponent, createElementBlock, openBlock, createVNode, createElementVNode, normalizeClass, createCommentVNode } from "vue";
import { http } from "yuang-framework-ui-common/lib/config/httpConfig";
import CaptchaIcon from "./components/CaptchaIcon";
const _hoisted_1 = { class: "yu-framework-image-captcha-wrapper" };
const _hoisted_2 = ["src"];
const _sfc_main = /* @__PURE__ */ 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 = computed(() => ({
      inputSize: "medium",
      isShowIcon: true,
      ...props.param
    }));
    const imageCaptchaSrc = ref("");
    const imageCaptchaForm = ref({
      key: "",
      captcha: ""
    });
    onMounted(() => {
      init();
    });
    const init = () => {
      changeImageCaptcha();
      emit("initSuccess", {});
    };
    const changeImageCaptcha = () => {
      imageCaptchaForm.value.captcha = "";
      imageCaptchaSrc.value = "";
      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);
      });
    };
    watch(
      () => imageCaptchaForm.value.captcha,
      (val) => {
        emit("update:modelValue", val);
      }
    );
    __expose({
      changeImageCaptcha
    });
    return (_ctx, _cache) => {
      const _component_el_input = resolveComponent("el-input");
      return openBlock(), createElementBlock("div", _hoisted_1, [
        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"]),
        createElementVNode("div", {
          class: normalizeClass(`image-captcha-${componentParam.value.inputSize}`),
          onClick: changeImageCaptcha
        }, [
          imageCaptchaSrc.value ? (openBlock(), createElementBlock("img", {
            key: 0,
            src: imageCaptchaSrc.value
          }, null, 8, _hoisted_2)) : createCommentVNode("", true)
        ], 2)
      ]);
    };
  }
});
export {
  _sfc_main as default
};