@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) • 4.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const webVue = require("@arco-design/web-vue");
const use = require("@vrx-arco/use");
const _var = require("../style/var.js");
const index = require("../LoginForm/index.js");
const config = require("../LoginForm/config.js");
const Banner = require("./Banner.js");
const LoginPage = /* @__PURE__ */ vue.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: config.loginFormEmits(),
setup: (props, {
slots,
emit
}) => {
const {
bemClass
} = _var.style("login-page");
const model = use.controlVModel(props, "model", emit, () => ({
username: "",
password: ""
}));
return () => {
const {
logo,
title,
bannerTitle,
bannerSubtitle,
bannerImage,
formTitle,
formSubtitle,
formForget,
formRegister,
formRemember,
onSubmit
} = props;
return vue.createVNode(webVue.Layout, {
"class": bemClass()
}, {
default: () => [vue.createVNode(webVue.Layout.Sider, {
"class": bemClass("__sider"),
"style": {
width: "30%"
}
}, {
default: () => [vue.createVNode(webVue.Layout, {
"class": bemClass("__sider-inner")
}, {
default: () => [vue.createVNode(webVue.Layout.Header, {
"class": bemClass("__logo-container")
}, {
default: () => {
var _a, _b;
return [((_a = slots.logo) == null ? void 0 : _a.call(slots)) || vue.createVNode("img", {
"class": bemClass("__logo"),
"alt": "logo",
"src": logo
}, null), ((_b = slots.title) == null ? void 0 : _b.call(slots)) || vue.createVNode("div", {
"class": bemClass("__logo-text")
}, [title])];
}
}), vue.createVNode(webVue.Layout.Content, null, {
default: () => [vue.createVNode(Banner.LoginBanner, {
"title": bannerTitle,
"subtitle": bannerSubtitle,
"image": bannerImage
}, {
title: slots.bannerTitle,
subtitle: slots.bannerSubtitle,
image: slots.bannerImage
})]
})]
})]
}), vue.createVNode(webVue.Layout.Content, {
"class": bemClass("__content")
}, {
default: () => [vue.createVNode(index.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
})]
})]
});
};
}
});
exports.LoginPage = LoginPage;