# personal-profile

**Repository Path**: yang_yonghui/personal-profile

## Basic Information

- **Project Name**: personal-profile
- **Description**: 个人简介网站
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-26
- **Last Updated**: 2023-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 学习问题与复盘

1. 在使用element-ui中轮播图时，官方例子是采用固定高度的形式，并且没有使用到图片，当我们要使用图片轮播图形式时，如果采取固定高度的话，缩小浏览器，图片变形。

   解决办法：检测浏览器宽度，来动态改变轮播图组件的宽度

   具体代码：

   ```
   <el-carousel trigger="click" :height="bannerHeight + 'px'">
       <el-carousel-item v-for="item in lbList" :key="item.id">
         <img :src="item.url" alt="" />
       </el-carousel-item>
     </el-carousel>
   ```

   ```
    data() {
       return {
         lbList: [
           {
             id: 1,
             url: require("@/assets/images/lb1.jpg"),
           },
           {
             id: 2,
             url: require("@/assets/images/lb2.jpg"),
           },
           {
             id: 3,
             url: require("@/assets/images/lb3.jpg"),
           },
         ],
         bannerHeight: 0,
         screenWidth: 0,
       };
     },
     mounted() {
       // 首次加载时,初始化高度
       this.screenWidth = window.innerWidth;
       this.bannerHeight = (600 / 1550) * this.screenWidth;
       // 窗口大小发生改变
       window.onresize = () => {
         this.screenWidth = window.innerWidth;
         this.bannerHeight = (600 / 1550) * this.screenWidth;
       };
     },
   ```

   

2. 在使用element-ui中navmenu导航菜单时，直接使用锚点链接方式无法跳转到当前位置某一位置

   解决办法：el-menu-item中加个a标签，并把a标签设置为行内块元素，宽高与el-menu-item相等

   具体代码：

   ```
    <el-menu
           :default-active="activeIndex"
           class="el-menu-demo"
           mode="horizontal"
           @select="handleSelect"
           background-color="#545c64"
           text-color="#fff"
           active-text-color="#ffd04b"
         >
           <el-menu-item index="1"><a>首页</a></el-menu-item>
           <el-menu-item index="2"><a href="#info">基本资料</a></el-menu-item>
           <el-menu-item index="3"><a href="#skill">个人技能</a></el-menu-item>
           <el-menu-item index="4"><a href="#contact">联系我</a></el-menu-item>
    </el-menu>
   ```

   ```
   .el-menu-item{
     a{
       display: inline-block;
       width: 100%;
       height: 100%;
       text-decoration: none;
     }
   }
   ```

   

3. 使用element-ui中Backtop组件时，报错

   解决办法：删除其中target属性

   具体代码：

   ```
   //报错代码
   <template>
     <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
   </template>
   ```

   ```
   //正确代码
   <template>
     <el-backtop>
       <div>up</div>
     </el-backtop>
   </template>
   ```

   

4. 在使用animate.css，页面动画效果会直接触发

   解决办法：下载wowjs插件，并进行配置

   部分相关代码：

   ```
    <el-row class="info-bg">
         <h1 class="wow animate__animated animate__fadeInTopRight">个人信息</h1>
         <p class="wow animate__animated animate__fadeInLeft">
           对编程保持好奇心、目的和激情，始终如一
         </p>
    </el-row>
   import { WOW } from "wowjs";
    mounted() {
       new WOW().init();
    },
   ```