014登入页-账号登入Pane的基本搭建

我们需要的是这个位置的东西

 新建文件

 这两个页面这样写

 单独做一个注册，导入一下，不然的话他会单独做一个自动引入的，像这种东西不要自动引入了，自己来导入吧

 这两个位置这样写

 

 

看看效果

 

 

复制需要的

 

粘贴到

 删掉没用的数据，保存

 看看效果

 

修改一下

 

这段代码使用了 ElementPlus 组件库创建了一个简单的表单，表单包含两个表单项，分别用于输入账号和密码。下面为你详细解释代码各部分的含义：

<el-form> 组件

<el-form label-width="60px">
  <!-- 表单项 -->
</el-form>

 

• <el-form> 是 ElementPlus 提供的表单组件，用于包裹表单中的各个表单项，起到容器的作用。
• label-width="60px" 是 <el-form> 的一个属性，用于统一设置表单中所有表单项标签的宽度为 60 像素。这样可以让表单的标签部分布局更加整齐。

第一个 <el-form-item> 组件

<el-form-item label="账号">
  <el-input />
</el-form-item>

• <el-form-item> 是 ElementPlus 的表单项组件，用于封装表单中的单个字段，每个 <el-form-item> 通常包含一个标签和一个输入组件。
• label="账号" 为该表单项设置了标签文本，显示为 “账号”。
• <el-input /> 是 ElementPlus 的输入框组件，用户可以在这个输入框中输入账号信息。

第二个 <el-form-item> 组件

<el-form-item label="密码">
  <el-input show-password />
</el-form-item>

• 同样，这里的 <el-form-item> 也是一个表单项，标签文本设置为 “密码”。
• <el-input show-password /> 中的 <el-input> 是输入框组件，show-password 是该输入框组件的一个属性。添加这个属性后，输入框会显示一个切换按钮，允许用户在密码的明文和密文显示状态之间进行切换，方便用户确认输入的密码是否正确。

总结

这段代码整体创建了一个具有统一标签宽度的表单，包含两个表单项，分别用于输入账号和密码，且密码输入框支持切换密码可见性。在实际应用中，你可以结合 JavaScript 代码来处理表单提交、验证等操作

 

看看效果