Vue+Element实现网页版个人简历系统(推荐)

drawer=true
currentIndex = index-1

drawer数据是控制 Drawer 抽屉 组件是否显示的一个变量，设置为true表示抽屉打开。

currentIndex用于记录当前用户点击打开的是那个项目，假如传递的index是1，表示当前用户点击打开的是项目1，那么currentIndex的值就为0（使用index-1的原因就是因为数组下标是从0开始的，后面需要从projectInfo数组中获取数据）。

此时我们就可以通过这个currentIndex，从保存项目数据的projectInfo中获取下标为0的元素的项目的标题（title）、项目介绍（intro）、开发该项目时所属的公司（company）、项目开发环境（developEnv）和职责（responsibility），并且将这几个数据展示到 Drawer 抽屉 组件中。

<el-drawer
  :title="projectInfo[currentIndex]['title']"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <p class='info'>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
    项目介绍：{{projectInfo[currentIndex]['intro']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
    所在公司：{{projectInfo[currentIndex]['company']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
    开发环境：{{projectInfo[currentIndex]['developEnv']}}
    </div>
   </el-col>
   </el-row>
   <el-row>
   <el-col :span="24">
    <div class="grid-content bg-purple-dark">
    职责描述:
    </div>
    <div class="grid-content bg-purple-dark" v-for="(item,key) in projectInfo[currentIndex]['responsibility']" :key="key">
    {{projectInfo[currentIndex]['responsibility'][key]}}
    </div>
   </el-col>
   </el-row>
  </p>
 </el-drawer>

七.底部页脚

底部页脚组件：srccomponentsFooterFooter.vue

1.源代码

<template>
 <div class='footer'>
  <span class="scroll"></span>
  <el-divider></el-divider>
  <span>法律声明</span>
  <el-divider direction="vertical"></el-divider>
  <span>友情链接</span>
  <el-divider direction="vertical"></el-divider>
  <span @click="drawer = true">联系我</span>
  <br/>
  <br/>
  <span class="copyright">版权所有 JEmbrace</span>								 
 10/11   首页 上一页 8 9 10 11 下一页 尾页