LunarXYZLoginPopup
登录弹出层。
Features
把复杂的登录逻辑和验证码限制交互逻辑进行了封装，简化登录流程。
Props
ts
defineProps({
/**
* 是否显示登录面板
* @tips 必须用双向绑定的形式来传递才能触发父组件的数据更新
* @example `v-model:show`
*/
show: {
type: Boolean,
required: true,
default: false,
},
/**
* 点击遮罩是否关闭面板
*/
closeOnClickOverlay: {
type: Boolean,
required: false,
default: true,
},
/**
* 指定挂载节点
* @description 默认挂在 `body` ，如果需要指定其他节点，可传入：
* 节点 ID `#foo`
* 节点样式名 `.foo`
* 或者 DOM 元素 `document.querySelector('#foo')`
* @tips 指定该属性时，必须在 DOM 渲染后才渲染该组件，以确保正常挂载
*/
teleport: {
type: String,
required: false,
default: 'body',
},
/**
* 是否锁定背景滚动
*/
lockScroll: {
type: Boolean,
required: false,
default: true,
},
/**
* 父级 ID
* @description 如果有拉新需求，这里传入邀请人的用户 ID
*/
parentId: {
type: String,
required: false,
default: '',
},
})
Emits
receive
虽然 useAuth() 里导出的 loginInfo 相关变量都具备响应性，在登录成功后可以通过这些变量获得最新的登录数据，但组件也提供了一个 @receive 方法用于接收登录成功后返回的登录信息。
ts
import type { LoginInfo } from '@lunarxyz/core'
declare function receive(): LoginInfo | undefined
Live Demo
Usage Example
请注意使用 v-model:arg 的格式对 Props 进行双向绑定，否则无法触发数据更新。
vue
<template>
<Button type="primary" @click="isShowLoginPopup = !isShowLoginPopup">
<span>唤起登录</span>
</Button>
<ConfigProvider theme="dark">
<LoginPopup v-model:show="isShowLoginPopup" />
</ConfigProvider>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Button, ConfigProvider } from 'vant'
import { LoginPopup } from '@lunarxyz/components'
const isShowLoginPopup = ref<boolean>(false)
</script>