perf: supplement login interface documents and add configuration parameters (#4175)
Vben
1 year ago
committed by
GitHub
parent
3c17f4e9f8
commit
5f41c51770
@ -0,0 +1,131 @@
|
||||
# 登录
|
||||
|
||||
本文介绍如何去改造自己的应用程序登录页。
|
||||
|
||||
## 登录页面调整
|
||||
|
||||
如果你想调整登录页面的标题、描述和图标以及工具栏，你可以通过配置 `AuthPageLayout` 组件的 `props` 参数来实现。
|
||||
|
||||
|
||||
|
||||
只需要在应用下的 `src/router/routes/core.ts` 内，配置`AuthPageLayout`的 `props`参数即可：
|
||||
|
||||
```ts {4-8}
|
||||
{
|
||||
component: AuthPageLayout,
|
||||
props: {
|
||||
sloganImage: "xxx/xxx.png",
|
||||
pageTitle: "开箱即用的大型中后台管理系统",
|
||||
pageDescription: "工程化、高性能、跨组件库的前端模版",
|
||||
toolbar: true,
|
||||
toolbarList: () => ['color', 'language', 'layout', 'theme'],
|
||||
}
|
||||
// ...
|
||||
},
|
||||
```
|
||||
|
||||
::: tip
|
||||
|
||||
如果这些配置不能满足你的需求，你可以自行实现登录页面。直接实现自己的 `AuthPageLayout`即可。
|
||||
|
||||
:::
|
||||
|
||||
## 登录表单调整
|
||||
|
||||
如果你想调整登录表单的相关内容，你可以在应用下的 `src/views/_core/authentication/login.vue` 内，配置`AuthenticationLogin` 组件参数即可：
|
||||
|
||||
```vue
|
||||
<AuthenticationLogin
|
||||
:loading="authStore.loginLoading"
|
||||
password-placeholder="123456"
|
||||
username-placeholder="vben"
|
||||
@submit="authStore.authLogin"
|
||||
/>
|
||||
```
|
||||
|
||||
::: details AuthenticationLogin 组件参数
|
||||
|
||||
```ts
|
||||
{
|
||||
/**
|
||||
* @zh_CN 验证码登录路径
|
||||
*/
|
||||
codeLoginPath?: string;
|
||||
/**
|
||||
* @zh_CN 忘记密码路径
|
||||
*/
|
||||
forgetPasswordPath?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否处于加载处理状态
|
||||
*/
|
||||
loading?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 密码占位符
|
||||
*/
|
||||
passwordPlaceholder?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 二维码登录路径
|
||||
*/
|
||||
qrCodeLoginPath?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 注册路径
|
||||
*/
|
||||
registerPath?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否显示验证码登录
|
||||
*/
|
||||
showCodeLogin?: boolean;
|
||||
/**
|
||||
* @zh_CN 是否显示忘记密码
|
||||
*/
|
||||
showForgetPassword?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否显示二维码登录
|
||||
*/
|
||||
showQrcodeLogin?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否显示注册按钮
|
||||
*/
|
||||
showRegister?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否显示记住账号
|
||||
*/
|
||||
showRememberMe?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 是否显示第三方登录
|
||||
*/
|
||||
showThirdPartyLogin?: boolean;
|
||||
|
||||
/**
|
||||
* @zh_CN 登录框子标题
|
||||
*/
|
||||
subTitle?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 登录框标题
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* @zh_CN 用户名占位符
|
||||
*/
|
||||
usernamePlaceholder?: string;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
::: tip
|
||||
|
||||
如果这些配置不能满足你的需求，你可以自行实现登录表单及相关登录逻辑。
|
||||
|
||||
:::
|
||||
|
After Width: | Height: | Size: 469 KiB |
@ -1,4 +1,5 @@
|
||||
export * from './cache';
|
||||
export * from './color';
|
||||
export * from './constants';
|
||||
export * from './store';
|
||||
export * from './utils';
|
||||
|
||||
@ -0,0 +1 @@
|
||||
export * from '@tanstack/vue-store';
|
||||
@ -1,50 +0,0 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
type El = HTMLElement | null | undefined;
|
||||
|
||||
export function useTabViewScroll(scrollDistance: number = 150) {
|
||||
const scrollbarEl = ref<El>(null);
|
||||
const scrollViewportEl = ref<El>(null);
|
||||
|
||||
function setScrollBarEl(el: El) {
|
||||
scrollbarEl.value = el;
|
||||
}
|
||||
|
||||
function setScrollViewEl(el: El) {
|
||||
scrollViewportEl.value = el;
|
||||
}
|
||||
|
||||
function getScrollClientWidth() {
|
||||
if (!scrollbarEl.value || !scrollViewportEl.value) return {};
|
||||
|
||||
const scrollbarWidth = scrollbarEl.value.clientWidth;
|
||||
const scrollViewWidth = scrollViewportEl.value.clientWidth;
|
||||
|
||||
return {
|
||||
scrollbarWidth,
|
||||
scrollViewWidth,
|
||||
};
|
||||
}
|
||||
|
||||
function scrollDirection(
|
||||
direction: 'left' | 'right',
|
||||
distance: number = scrollDistance,
|
||||
) {
|
||||
const { scrollbarWidth, scrollViewWidth } = getScrollClientWidth();
|
||||
|
||||
if (!scrollbarWidth || !scrollViewWidth) return;
|
||||
|
||||
if (scrollbarWidth > scrollViewWidth) return;
|
||||
|
||||
scrollViewportEl.value?.scrollBy({
|
||||
behavior: 'smooth',
|
||||
left: direction === 'left' ? -distance : +distance,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
scrollDirection,
|
||||
setScrollBarEl,
|
||||
setScrollViewEl,
|
||||
};
|
||||
}
|
||||
@ -1,6 +1,3 @@
|
||||
<script lang="ts" setup>
|
||||
defineOptions({ name: 'IFrameView' });
|
||||
</script>
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in new issue