当前位置：首页 > article >正文

vue3【实战】响应式的登录界面

article 2024/11/25 23:49:29

效果预览

WEB 端效果

在这里插入图片描述

移动端效果

在这里插入图片描述

技术方案

vue3 + vite + Element Plus + VueRouter + UnoCSS + TS + vueUse + AutoImport

技术要点

响应式设计

移动端：图片切换为绝对定位，下移一层，成为背景图片

    <el-image
      class="w-screen h-screen lt-md:position-absolute! z--1 left-0 top-0"
      src="/imgs/coding.jpeg"
      fit="cover"
    />

el-input 中添加自定义图标组件

需在 vue 中使用 JSX，详见 https://blog.csdn.net/weixin_41192489/article/details/143787392

<el-input v-model="form.account" :prefix-icon="getIcon('mdi:account')" />

<script setup lang="tsx">
import Icon from '@/components/Icon.vue'
const getIcon = (icon: string) => <Icon icon={icon} />
</script>

代码实现

<script setup lang="tsx">
import Icon from '@/components/Icon.vue'
const getIcon = (icon: string) => <Icon icon={icon} />

const form = reactive({ account: '', password: '', remember: false })

let loginWay_list = [
  { icon: 'mdi:wechat', color: '#07cd66' },
  { icon: 'flat-color-icons:phone-android' },
  { icon: 'icon-park:tencent-qq' }
]
</script>

<template>
  <div class="flex">
    <el-image
      class="w-screen h-screen lt-md:position-absolute! z--1 left-0 top-0"
      src="/imgs/coding.jpeg"
      fit="cover"
    />

    <div class="flex items-center justify-center w-full h-screen">
      <!-- 登录表单 -->
      <div class="max-w-360px bg-white p-10 lt-md:rounded lt-md:shadow">
        <div class="text-28px font-bold text-center p-6">EC 编程俱乐部</div>
        <el-form :model="form">
          <el-form-item>
            <el-input v-model="form.account" :prefix-icon="getIcon('mdi:account')" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password" :prefix-icon="getIcon('wpf:password1')" />
          </el-form-item>
          <div class="flex justify-between items-center">
            <div>
              <el-checkbox v-model="form.remember" label="自动登录" size="large" />
            </div>
            <div>
              <el-link type="primary" :underline="false">忘记密码</el-link>
              <el-text type="primary"> / </el-text>
              <el-link type="primary" :underline="false">注册</el-link>
            </div>
          </div>
          <el-form-item>
            <el-button type="primary" class="w-full">登录</el-button>
          </el-form-item>
        </el-form>

        <el-divider>
          <span class="text-10px">其他登录方式</span>
        </el-divider>

        <div class="flex justify-around">
          <Icon
            v-for="(item, index) in loginWay_list"
            :key="index"
            :icon="item.icon"
            :style="{
              color: item.color
            }"
            class="inline-block text-24px cursor-pointer"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>

<route lang="yaml">
meta:
  layout: none
</route>