Vben
2 years ago
committed by
GitHub
GitHub
15 changed files with 234 additions and 71 deletions
@ -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 './cache'; |
||||
export * from './color'; |
export * from './color'; |
||||
export * from './constants'; |
export * from './constants'; |
||||
|
export * from './store'; |
||||
export * from './utils'; |
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> |
<template> |
||||
<div></div> |
<div></div> |
||||
</template> |
</template> |
||||
|
|||||
Loading…
Reference in new issue