@vrx-arco/pro-components/dist/LoginForm/index.mjs

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

import { defineComponent, ref, createVNode, Fragment, mergeProps, createTextVNode, unref, toRaw } from "vue";
import { Form, Input, Space, Checkbox, Link, Button, Message } from "@arco-design/web-vue";
import { useToggle } from "@vueuse/core";
import { controlVModel } from "@vrx-arco/use";
import IconLock from "@vrx-arco/icons-vue/IconLock";
import IconUser from "@vrx-arco/icons-vue/IconUser";
import { style } from "../style/var.mjs";
import { loginFormEmits } from "./config.mjs";
const LoginForm = /* @__PURE__ */ defineComponent({
  name: "vrx-arco-login-form",
  props: {
    forget: {
      type: Boolean,
      default: false
    },
    register: {
      type: Boolean,
      default: false
    },
    remember: {
      type: Boolean,
      default: false
    },
    /**
     * 标题
     */
    title: String,
    /**
     * 副标题
     */
    subtitle: String,
    onSubmit: Function,
    /**
     * 是否使用内置消息提示组件
     */
    submitNotice: {
      type: Boolean,
      default: false
    },
    /**
     * 传入任何数据外部受控表单数据
     */
    model: Object
  },
  emits: loginFormEmits(),
  setup: (props, {
    slots,
    expose,
    emit
  }) => {
    const {
      bemClass
    } = style("login-form");
    const model = controlVModel(props, "model", emit, () => ({
      username: "",
      password: ""
    }));
    const rules = ref({
      username: {
        required: true,
        message: "用户名不能为空"
      },
      password: {
        required: true,
        message: "密码不能为空"
      }
    });
    const rememberChecked = ref(false);
    const [loading, setLoading] = useToggle(false);
    const errorMessage = ref("");
    const setModel = (data) => {
      model.value = unref(data);
    };
    const handleSubmit = () => {
      const {
        submitNotice,
        onSubmit
      } = props;
      setLoading(true);
      errorMessage.value = "";
      return onSubmit == null ? void 0 : onSubmit(toRaw(model.value), rememberChecked.value).then(() => {
        if (!submitNotice) {
          return;
        }
        Message.success("登录成功");
      }).catch((err) => {
        if (typeof err === "string") {
          errorMessage.value = err;
        }
        if (err instanceof Error) {
          errorMessage.value = err.message;
        }
        if (!submitNotice) {
          return;
        }
        Message.error(errorMessage.value || "登录出错");
      }).finally(() => {
        setLoading(false);
      });
    };
    expose({
      setModel
    });
    return () => {
      var _a;
      const {
        register,
        remember,
        forget,
        title,
        subtitle
      } = props;
      return createVNode("div", {
        "class": bemClass()
      }, [((_a = slots.title) == null ? void 0 : _a.call(slots)) || createVNode(Fragment, null, [createVNode("div", {
        "class": bemClass("__title")
      }, [title]), createVNode("div", {
        "class": bemClass("__subtitle")
      }, [subtitle])]), createVNode("div", {
        "class": bemClass("__error-msg")
      }, [errorMessage.value]), createVNode(Form, {
        "model": model.value,
        "rules": rules.value,
        "layout": "vertical",
        "onSubmitSuccess": handleSubmit
      }, {
        default: () => {
          var _a2;
          return [createVNode(Form.Item, {
            "field": "username",
            "hideLabel": true,
            "hideAsterisk": true,
            "validateTrigger": "input"
          }, {
            default: () => [createVNode(Input, {
              "modelValue": model.value.username,
              "onUpdate:modelValue": ($event) => model.value.username = $event,
              "placeholder": "请输入用户名"
            }, {
              prefix: () => createVNode(IconUser, {
                "class": "arco-icon"
              }, null)
            })]
          }), createVNode(Form.Item, {
            "field": "password",
            "hideLabel": true,
            "hideAsterisk": true,
            "validateTrigger": "input"
          }, {
            default: () => [createVNode(Input.Password, mergeProps({
              "modelValue": model.value.password,
              "onUpdate:modelValue": ($event) => model.value.password = $event
            }, {
              placeholder: "请输入密码",
              allowClear: true
            }), {
              prefix: () => createVNode(IconLock, {
                "class": "arco-icon"
              }, null)
            })]
          }), (_a2 = slots.form) == null ? void 0 : _a2.call(slots, {
            model: model.value
          }), createVNode(Space, {
            "direction": "vertical",
            "size": 16
          }, {
            default: () => [(remember || forget) && createVNode("div", {
              "class": bemClass("__password-actions")
            }, [remember && createVNode(Checkbox, {
              "modelValue": rememberChecked.value,
              "onUpdate:modelValue": ($event) => rememberChecked.value = $event
            }, {
              default: () => [createTextVNode("记住密码")]
            }), forget && createVNode(Link, {
              "onClick": () => emit("forget")
            }, {
              default: () => [createTextVNode("忘记密码")]
            })]), createVNode(Button, {
              "type": "primary",
              "htmlType": "submit",
              "long": true,
              "loading": loading.value
            }, {
              default: () => [createTextVNode("登录")]
            }), register && createVNode(Button, {
              "type": "text",
              "long": true,
              "class": bemClass("__register-btn"),
              "onClick": () => emit("register")
            }, {
              default: () => [createTextVNode("注册")]
            })]
          })];
        }
      })]);
    };
  }
});
export {
  LoginForm
};