VUE：element ui组件应用之个人中心页面

最新推荐文章于 2024-07-26 15:02:34 发布

ACC_zZ

最新推荐文章于 2024-07-26 15:02:34 发布

阅读量1.4w

点赞数 26

分类专栏：笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_45722678/article/details/116279220

版权

element ui组件应用之个人中心页面

纯小白自己完成的页面

页面预览及源码

在这里插入图片描述

// 源码（版权所有）：
<template>
  <div class="personalCenter">
    <el-container>
      <el-header>个人中心</el-header>
      <el-container>
        <el-aside width="400px">
          <el-col :span="12">
            <div class="sub-title"></div>
            <div class="demo-basic--circle">
              <div class="img">
                <el-avatar
                  :size="100"
                  :src="circleUrl"
                  align="center"
                ></el-avatar>
              </div>
              <div class="block">
                <span>ADMIN</span>
              </div>
            </div>
          </el-col>
          <el-input
            v-model="input1"
            type="text"
            placeholder="用户ID"
            maxlength="6"
            show-word-limit
          ></el-input>
          <el-input
            v-model="input2"
            type="text"
            placeholder="用户昵称"
            show-word-limit
          ></el-input>
          <el-input
            v-model="input3"
            type="text"
            placeholder="用户昵称"
            show-word-limit
          ></el-input>
          <el-input
            v-model="input4"
            placeholder="请输入密码"
            show-password
          ></el-input>
          <el-input
            v-model="input5"
            type="text"
            placeholder="用户姓名"
            show-word-limit
          ></el-input>
          <el-input
            v-model="input6"
            type="text"
            placeholder="用户权限"
            maxlength="2"
            show-word-limit
          ></el-input>
          <el-input v-model="input7" placeholder="邮箱">
            <template slot