@vrx-arco/pro-components
Version:
<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>
156 lines (155 loc) • 3.99 kB
JavaScript
import { defineComponent, createVNode } from "vue";
import { Layout } from "@arco-design/web-vue";
import { controlVModel } from "@vrx-arco/use";
import { style } from "../style/var.mjs";
import { LoginForm } from "../LoginForm/index.mjs";
import { loginFormEmits } from "../LoginForm/config.mjs";
import { LoginBanner } from "./Banner.mjs";
const LoginPage = /* @__PURE__ */ defineComponent({
name: "vrx-arco-login-page",
props: {
/**
* logo
*/
logo: String,
/**
* 标题
*/
title: String,
/**
* 左侧介绍页标题
*/
bannerTitle: String,
/**
* 左侧介绍页副标题
*/
bannerSubtitle: String,
/**
* 左侧介绍页图片
*/
bannerImage: String,
/**
* 登录表单标题
*/
formTitle: String,
/**
* 登录表单副标题
*/
formSubtitle: String,
/**
* 登录表单忘记密码功能
*/
formForget: {
type: Boolean,
default: false
},
/**
* 登录表单注册功能
*/
formRegister: {
type: Boolean,
default: false
},
/**
* 登录表单记住密码功能
*/
formRemember: {
type: Boolean,
default: false
},
onSubmit: Function,
/**
* 传入任何数据外部受控表单数据
*/
model: Object
},
emits: loginFormEmits(),
setup: (props, {
slots,
emit
}) => {
const {
bemClass
} = style("login-page");
const model = controlVModel(props, "model", emit, () => ({
username: "",
password: ""
}));
return () => {
const {
logo,
title,
bannerTitle,
bannerSubtitle,
bannerImage,
formTitle,
formSubtitle,
formForget,
formRegister,
formRemember,
onSubmit
} = props;
return createVNode(Layout, {
"class": bemClass()
}, {
default: () => [createVNode(Layout.Sider, {
"class": bemClass("__sider"),
"style": {
width: "30%"
}
}, {
default: () => [createVNode(Layout, {
"class": bemClass("__sider-inner")
}, {
default: () => [createVNode(Layout.Header, {
"class": bemClass("__logo-container")
}, {
default: () => {
var _a, _b;
return [((_a = slots.logo) == null ? void 0 : _a.call(slots)) || createVNode("img", {
"class": bemClass("__logo"),
"alt": "logo",
"src": logo
}, null), ((_b = slots.title) == null ? void 0 : _b.call(slots)) || createVNode("div", {
"class": bemClass("__logo-text")
}, [title])];
}
}), createVNode(Layout.Content, null, {
default: () => [createVNode(LoginBanner, {
"title": bannerTitle,
"subtitle": bannerSubtitle,
"image": bannerImage
}, {
title: slots.bannerTitle,
subtitle: slots.bannerSubtitle,
image: slots.bannerImage
})]
})]
})]
}), createVNode(Layout.Content, {
"class": bemClass("__content")
}, {
default: () => [createVNode(LoginForm, {
"model": model.value,
"onUpdate:model": ($event) => model.value = $event,
"class": bemClass("__form"),
"title": formTitle,
"subtitle": formSubtitle,
"forget": formForget,
"remember": formRemember,
"register": formRegister,
"onSubmit": onSubmit,
"onForget": () => emit("forget"),
"onRegister": () => emit("register")
}, {
title: slots.formTitle,
form: slots.form
})]
})]
});
};
}
});
export {
LoginPage
};