实战项目名称:个人简历
技术栈:Vue 2.0
已实现功能:作品分类,作品展示
项目git地址:请点击访问
项目线上测试地址:请点击访问
文章目录
- 一、效果展示
- 二、项目关键代码
- 1. 监听页面滚动
- 2. 自定义图册弹窗
提示:该项目只用于个人实战,不应用于任何商业用途。
一、效果展示
- 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/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/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>
更多推荐
【Vue 2.0】用Vue写一个自己的简历网站带作品集
发布评论