【Vue 2.0】用Vue写一个自己的简历网站带作品集

实战项目名称：个人简历
技术栈：Vue 2.0
已实现功能：作品分类，作品展示
项目git地址：请点击访问
项目线上测试地址：请点击访问

---

提示：该项目只用于个人实战，不应用于任何商业用途。

一、效果展示

• PC端
  
  
  
• 手机端

---

二、项目关键代码

1. 监听页面滚动

代码如下（示例）：

handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      if (scrollTop > 613) {
        //大于200的时候要做的操作
        this.fix = true;
      } else {
        this.fix = false;
      }
 }

// 使用
mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },

2. 自定义图册弹窗

代码如下（示例）：

<template>
  <div class="popupimage both-center" @click="$emit('closePopup')">
    <button
      class="popupimage-l"
      @click="before()"
      @click.stop
      :class="{ disablebutton: index == 0 }"
    >
      <svg
        width="6"
        height="10"
        viewBox="0 0 6 10"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M5 1L1 5L5 9"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </button>
    <button
      class="popupimage-r"
      @click="next()"
      @click.stop
      v-if="portfolio"
      :class="{ disablebutton: index == portfolio.length - 1 }"
    >
      <svg
        width="6"
        height="10"
        viewBox="0 0 6 10"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M1 1L5 5L1 9"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </button>
    <div class="popupimage-box"  v-if="portfolio">
      <img
        @click.stop
        :src="portfolio[index]"
        ref="popimg"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "PopupImage",
  props: {
    portfolio:Object,
  },
  data(){
    return{
      index:0
    }
  },
  methods: {
    handleKeyup(event) {
      const e = event || window.event || arguments.callee.caller.arguments[0];
      if (!e) return;
      const { keyCode } = e;
      if (keyCode == 27) this.$emit("closePopup");
      if (keyCode == 37) this.before();
      if (keyCode == 39) this.next();
    },
    before(){
      if(this.index>=1){
        this.index -= 1;
      }
    },
    next(){
      this.index += 1;
    }
  },
  mounted() {
    window.addEventListener("keyup", this.handleKeyup);
  },
  beforeDestroy() {
    window.removeEventListener("keyup", this.handleKeyup);
  },
};
</script>

<style scoped>
 ...
</style>

---