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

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

import { style } from "../style/var.js";
import { loginFormEmits } from "./config.js";
import { Fragment, createTextVNode, createVNode, defineComponent, mergeProps, ref, toRaw, unref } from "vue";
import { Button, Checkbox, Form, Input, Link, Message, Space } 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";
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?.(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 () => {
			const { register, remember, forget, title, subtitle } = props;
			return createVNode("div", { "class": bemClass() }, [
				slots.title?.() || 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: () => [
					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) })] }),
					slots.form?.({ 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 };