Vue3+Element-Plus登录组件页⾯布局完善⼋
1. 登录页⾯的布局
1.1 通过Element-UI 组件实现布局
el-form
el-form-item
el-input
el-button
字体图标
①如图，之前也介绍过。最外⾯是⼀个el-form 表单，⾥⾯的每⼀⾏，都是⼀个form-item项。其中每⼀个输⼊框都是⼀个input组件，下⾯的两个按钮都属于el-button，包括输⼊框左则都会⽤到⼀些字体图标。
② ⾸先打开Element-UI 官⽹ ，到Form表单。复制表单，按需复制进⾏修改。
注意事项：因为是按需导⼊Element组件，当我们需要使⽤到表单或者是其他组件的时候，需要去到elment.js中把⽤到的组件，导⼊进去。导⼊之后，需要使⽤Vue.use把相关的组件注册成全局组件。
以上只是适⽤于vue3.0版本以下的。现在是使⽤vue3.0版本开发，需要配套Element-plus 使⽤，因为只有Element-plus⽀持vue3.0版本
所以，要修改成这样，前⾯加El
页⾯代码
然后效果就出来了
③ 接下来，对该页⾯进⾏样式调整美化
⾸先，添加完成页⾯元素。代码
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像区域 -->
<div class="avatar_box">
<img src="../assets/logo.png" alt="" />
</div>
<!-- 登录表单区域 -->
<el-form label-width="0px">
<!-- ⽤户名 -->
<el-form-item>
<el-input></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item>
<el-input></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item>
<el-button type="primary">登录</el-button>          <el-button type="info">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
box sizing</template>
效果：
④ 接下来，让按钮向右对齐。先在按钮区域定义⼀个类
通过类选择器，选中。然后让它变成⼀个弹性模型，display
效果：
⑤ 还需要把⽂本框放到页⾯的低部。如果放低部呢，需要给form加⼀个定位器
通过类选择器，选中。添加⼀个定位
但是页⾯效果，input并没有占满全屏，
需要加⼀个宽度
这样就占满全屏了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。