Login 组件示例

组件介绍

login 是一个登录组件，支持用户名密码登录和验证码登录。适用于需要用户登录的场景。

示例：

使用的icon素材，下载到本地项目中，并引入

扫码：

客户端：

微信：

<template>
  <lz-login
    :loginMode="loginMode"
    :showCheckLoginMode="showCheckLoginMode"
    :showOtherLogin="showOtherLogin"
    :showCaptcha="showCaptcha"
    :title="title"
    :captchaBase64="captchaBase64"
    :qrCodeUrl="qrCodeUrl"
    :ssoWeChatUrl="ssoWeChatUrl"
    @captcha="handelCaptcha"
    @loginSubmit="handelLoginSubmit"
    @checkLoginMode="checkLoginMode"
  />
  <hr />
  <div style="font-size:30px">
    <h3 style="font-size: 18px; padding: 30px 0;">使用的icon素材，下载到本地项目中，并引入</h3>
    <hr />
    <span style="font-size: 14px;">扫码：</span>
    <lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/erweima.svg" />
    <hr />
    <span style="font-size: 14px;">客户端：</span>
    <lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/client.svg" />
    <hr />
    <span style="font-size: 14px;">微信：</span>
    <lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/wx.svg" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loginMode = ref(0)
const showCheckLoginMode = ref(true)
const showOtherLogin = ref(true)
const showCaptcha = ref(true)
const title = ref('统一账号管理系统')
const captchaBase64 = ref('https://bbs.jczxw.cn/captchapng.png')
const qrCodeUrl = ref('https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQE18DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAySDhwOThLeERjTEgxYXcyaHhGMWcAAgSYexFpAwQIBwAA')
const ssoWeChatUrl = ref('https://open.weixin.qq.com/connect/qrconnect?appid=wx75a7ed1d11750515&redirect_uri=https%3A%2F%2Fcamelot.jczxw.cn%2Fapi%2Fv1%2Fwechat%2FopenRedirect&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect')

/* 验证码字符库，排除易混淆字符 */
const charSet = '23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz'

/**
 * 生成4位随机验证码
 * @returns {string} 4位验证码字符串
 */
function generateVerificationCode () {
  let code = ''
  for (let i = 0; i < 4; i++) {
    // 生成0到字符集长度-1的随机整数
    const randomIndex = Math.floor(Math.random() * charSet.length)
    // 从字符集中随机选取字符并拼接
    code += charSet[randomIndex]
  }
  return code
}

function handelCaptcha () {
  console.log('验证码')
  captchaBase64.value = `https://bbs.jczxw.cn/captchapng.png?t=${Date.now()}&name=${generateVerificationCode()}`
}

function checkLoginMode (res: number) {
  console.log('切换登录方式', res)
  loginMode.value = res
}

function handelLoginSubmit (data: any) {
  console.log('登录', data)
}

</script>

<style scoped lang="scss">

</style>

<template>
  <lz-login
    :loginMode="loginMode"
    :showCheckLoginMode="showCheckLoginMode"
    :showOtherLogin="showOtherLogin"
    :showCaptcha="showCaptcha"
    :title="title"
    :captchaBase64="captchaBase64"
    :qrCodeUrl="qrCodeUrl"
    :ssoWeChatUrl="ssoWeChatUrl"
    @captcha="handelCaptcha"
    @loginSubmit="handelLoginSubmit"
    @checkLoginMode="checkLoginMode"
  />
  <hr />
  <div style="font-size:30px">
    <h3 style="font-size: 18px; padding: 30px 0;">使用的icon素材，下载到本地项目中，并引入</h3>
    <hr />
    <span style="font-size: 14px;">扫码：</span>
    <lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/erweima.svg" />
    <hr />
    <span style="font-size: 14px;">客户端：</span>
    <lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/client.svg" />
    <hr />
    <span style="font-size: 14px;">微信：</span>
    <lz-svg-icon icon-class="https://oss.jczxw.cn:9000/public/assets/icons/wx.svg" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loginMode = ref(0)
const showCheckLoginMode = ref(true)
const showOtherLogin = ref(true)
const showCaptcha = ref(true)
const title = ref('统一账号管理系统')
const captchaBase64 = ref('https://bbs.jczxw.cn/captchapng.png')
const qrCodeUrl = ref('https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQE18DwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAySDhwOThLeERjTEgxYXcyaHhGMWcAAgSYexFpAwQIBwAA')
const ssoWeChatUrl = ref('https://open.weixin.qq.com/connect/qrconnect?appid=wx75a7ed1d11750515&redirect_uri=https%3A%2F%2Fcamelot.jczxw.cn%2Fapi%2Fv1%2Fwechat%2FopenRedirect&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect')

/* 验证码字符库，排除易混淆字符 */
const charSet = '23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz'

/**
 * 生成4位随机验证码
 * @returns {string} 4位验证码字符串
 */
function generateVerificationCode () {
  let code = ''
  for (let i = 0; i < 4; i++) {
    // 生成0到字符集长度-1的随机整数
    const randomIndex = Math.floor(Math.random() * charSet.length)
    // 从字符集中随机选取字符并拼接
    code += charSet[randomIndex]
  }
  return code
}

function handelCaptcha () {
  console.log('验证码')
  captchaBase64.value = `https://bbs.jczxw.cn/captchapng.png?t=${Date.now()}&name=${generateVerificationCode()}`
}

function checkLoginMode (res: number) {
  console.log('切换登录方式', res)
  loginMode.value = res
}

function handelLoginSubmit (data: any) {
  console.log('登录', data)
}

</script>

<style scoped lang="scss">

</style>

属性 (Props)

属性名	类型	默认值	说明
title	`string`	`'后台管理系统'`	登录页面标题
loginMode	`number`	0	默认登录方式，0为账号登录，1为扫码登录
captchaBase64	`string`	`''`	验证码图片的 base64 数据或者url
qrCodeUrl	`string`	`''`	微信扫码登录的二维码图片地址
ssoWeChatUrl	`string`	`''`	微信单点登录跳转链接
showCheckLoginMode	`boolean`	`true`	是否显示切换登录方式按钮
showOtherLogin	`boolean`	`true`	是否显示其他登录方式（如微信扫码登录）
showCaptcha	`boolean`	`true`	是否显示验证码登录方式

事件 (Events)

事件名	参数	说明
captcha	-	点击验证码图片时触发，用于刷新验证码
login-submit	`loginData: { username, password, captchaCode, captchaKey }`	提交登录表单时触发
check-login-mode	`mode: number`	切换登录方式时触发，0为账号登录，1为扫码登录

插槽 (Slots)

插槽名	说明
该组件暂无插槽。

样式 (Styles)

组件使用 scoped 样式，可通过深度选择器修改内部样式：

.login-container: 登录容器
.login-card: 登录卡片
.switch-login-mode: 切换登录方式按钮
.input-wrapper: 输入框包装器
.captcha-image: 验证码图片
.sso-login: 单点登录区域

使用示例

vue

<template>
  <lz-login
    :title="loginTitle"
    :captcha-base64="captchaImage"
    :qr-code-url="qrCodeImage"
    :sso-we-chat-url="wechatSsoUrl"
    @captcha="refreshCaptcha"
    @login-submit="handleLogin"
    @check-login-mode="onLoginModeChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const loginTitle = '管理系统登录'
const captchaImage = ref('')
const qrCodeImage = ref('')
const wechatSsoUrl = ref('')

const refreshCaptcha = () => {
  // 获取新的验证码
}

const handleLogin = (loginData) => {
  // 处理登录逻辑
  console.log('登录数据:', loginData)
}

const onLoginModeChange = (mode) => {
  // 处理登录模式切换
  console.log('当前登录模式:', mode)
}
</script>
``

<template>
  <lz-login
    :title="loginTitle"
    :captcha-base64="captchaImage"
    :qr-code-url="qrCodeImage"
    :sso-we-chat-url="wechatSsoUrl"
    @captcha="refreshCaptcha"
    @login-submit="handleLogin"
    @check-login-mode="onLoginModeChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const loginTitle = '管理系统登录'
const captchaImage = ref('')
const qrCodeImage = ref('')
const wechatSsoUrl = ref('')

const refreshCaptcha = () => {
  // 获取新的验证码
}

const handleLogin = (loginData) => {
  // 处理登录逻辑
  console.log('登录数据:', loginData)
}

const onLoginModeChange = (mode) => {
  // 处理登录模式切换
  console.log('当前登录模式:', mode)
}
</script>
``

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Login 组件示例 #

组件介绍 #

示例： #

统一账号管理系统

使用的icon素材，下载到本地项目中，并引入

属性 (Props) #

事件 (Events) #

插槽 (Slots) #

样式 (Styles) #

使用示例 #

组件介绍

示例：

属性 (Props)

事件 (Events)

插槽 (Slots)

样式 (Styles)

使用示例