基于element-ui的顶部栏

超、凢脫俗 2024-03-16 23:46 45阅读 0赞

## 塞尔达小队电商管理系统后台顶部栏 ##

效果展示：  
![在这里插入图片描述][e1dd312f3f854ae8b4e0433f14ef28dc.png]

### 代码解析和功能说明 ###

这段代码是一个Vue组件，用于渲染塞尔达小队电商管理系统后台的顶部栏。让我们逐行来解析并添加详细注释。

<template>
      
      <div class="app-container">
        <el-header style="box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);">
    
          
          <el-row type="flex" align="top" justify="center"> 
            <el-col :span="24">
              <div class="header-content">
                <h1 class="title">塞尔达小队电商管理系统后台</h1>
                <el-button v-if="!loggedIn" @click="showLoginDialog" type="primary" class="login-button">登录</el-button>
                <el-avatar v-else :src="user.avatar" :size="36" shape="circle"></el-avatar>
              </div>
            </el-col>
          </el-row>
    
        </el-header>
    
        
        
        <el-dialog title="用户登录" :visible.sync="loginDialogVisible">
          
        </el-dialog>
      </div>
    </template>

*  第 3 行：给最外层的容器 `app-container` 添加样式。
 *  第 5-8 行：创建顶部栏的容器，使用 `el-header` 组件，并设置阴影效果。
 *  第 9-14 行：使用 `el-row` 和 `el-col` 组件进行布局，将内容居中对齐。
 *  第 10 行：将行的布局方式设置为 `justify:center`，使内容在水平方向上居中。
 *  第 11 行：创建一个列，并占据一行的所有空间。
 *  第 12-16 行：添加顶部栏的内容。
    
     *  第 13 行：显示网站标题 “塞尔达小队电商管理系统后台”。
     *  第 14 行：如果用户未登录，则显示一个 “登录” 按钮，并绑定点击事件 `showLoginDialog`。
     *  第 15 行：如果用户已登录，则显示用户头像。
 *  第 19-23 行：添加一个用于用户登录的对话框组件，该对话框的可见性由 `loginDialogVisible` 控制。

*  第 1-7 行：定义一些样式规则，用于自定义顶部栏的外观和布局。
    
     *  `.app-container` 类设置了左侧内边距为0、底部外边距为1%。
     *  `.header-content` 类使用 Flex 布局，将内容水平居中对齐，并垂直居上对齐。设置了内边距为10px上下、20px左右。
     *  `.title` 类设置了字体大小为20px、粗体、颜色为 \#409EFF、并向上偏移5px。
     *  `.login-button` 类设置了边框为1px实线、背景透明、颜色为 \#409EFF，并调整了内边距、边框圆角和字体大小，以及向上偏移5px。

*  第 3-15 行：定义了组件的数据和方法。
    
     *  `loggedIn` 是一个布尔值，用于标记用户是否已登录。
     *  `loginDialogVisible` 是一个布尔值，用于控制登录对话框的可见性。
     *  `user` 是一个对象，用于存储用户信息的名字和头像。
 *  第 9-12 行：`showLoginDialog` 方法被触发时，将 `loginDialogVisible` 设置为 `true`，显示登录对话框。
 *  第 14-19 行：`loginSuccess` 方法被调用时，处理用户登录成功的逻辑。
    
     *  将 `loggedIn` 标记为 `true`，表示用户已登录。
     *  将 `user` 对象中的 `name` 和 `avatar` 设置为传入的用户信息。
     *  将 `loginDialogVisible` 设置为 `false`，关闭登录对话框。

以上便是塞尔达小队电商管理系统后台顶部栏组件的详细注释和功能说明。该顶部栏提供了一个简单的登录功能，并以响应式的方式显示用户信息或登录按钮。

*  完整代码

<template>
      
      <div class="app-container">
        <el-header style="box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);">
    
          
          <el-row type="flex" align="top" justify="center"> 
            <el-col :span="24">
              <div class="header-content">
                
                <h1 class="title">塞尔达小队电商管理系统后台</h1>
                
                <el-button v-if="!loggedIn" @click="showLoginDialog" type="primary" class="login-button">登录</el-button>
                
                <el-avatar v-else :src="user.avatar" :size="36" shape="circle"></el-avatar>
              </div>
            </el-col>
          </el-row>
    
        </el-header>
    
        
        
        
        <el-dialog title="用户登录" :visible.sync="loginDialogVisible">
          
        </el-dialog>
      </div>
    </template>
    
    <style>
      /* 容器样式 */
      .app-container {
          
        padding-left: 0;
        margin-bottom: 1%;
      }
    
      /* 顶部栏内容样式 */
      .header-content {
          
        display: flex;
        justify-content: space-between; /* 左右间隙填充 */
        align-items: flex-start; /* 垂直居上 */
        padding: 10px 20px; /* 内边距调整 */
      }
    
      /* 标题样式 */
      .title {
          
        font-size: 20px;
        font-weight: bold;
        color: #409EFF;
        margin-top: 5px; /* 文字向上移动 */
      }
      
      /* 登录按钮样式 */
      .login-button {
          
        border: 1px solid #409EFF !important;
        background-color: transparent !important;
        color: #409EFF !important;
        padding: 8px 16px !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        margin-top: 5px; /* 按钮向上移动 */
      }
    </style>
    
    <script>
    export default {
          
      data() {
          
        return {
          
          loggedIn: false, // 用户登录状态
          loginDialogVisible: false, // 登录对话框的可见性
          user: {
          
            name: '', // 用户名
            avatar: '' // 用户头像
          }
        };
      },
      methods: {
          
        // 显示登录对话框
        showLoginDialog() {
          
          this.loginDialogVisible = true;
        },
        // 处理用户登录成功的逻辑
        loginSuccess(user) {
          
          this.loggedIn = true; // 用户已登录
          this.user.name = user.name; // 设置用户名
          this.user.avatar = user.avatar; // 设置用户头像
          this.loginDialogVisible = false; // 关闭登录对话框
        }
      }
    };
    </script>

[e1dd312f3f854ae8b4e0433f14ef28dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/ff34252066a34de889b987acd2849426.png