简介
发布订阅消息，子向父传值，展示项目经验详细信息。⭐️ 欢迎访问个人的简历网站预览效果
本章涉及修改与新增的文件：Fifth.vue、App.vue、utils、Project.ts
一、创建项目数据
在 src 目录下新建一个 utils 文件夹 ，再创建一个 Project.ts 文件
// 项目经验的详细数据
const project: any = {
center: {
projectDescription: "对接不同医院线上的数据，通过统一的VO转化为SaaS兼容同步的管理后台，技术人员接口配置，字段对照，数据同步的设置平台。",
projectDuty: "● 参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，PC 端后台开发，PigX5.0 低代码开发；\n● 配合后端接口联调，维护线上项目的稳定性，及时处理线上bug；",
projectEndTime: "2023-09",
projectGit: "",
projectName: "智慧医院数据中心管理系统",
projectOnline: "",
projectStack: "PigX 低代码开发框架、Vue3技术框架、Vuex、Vue-router、element UI Plus 组件库、TypeScript、钉钉报错通知等",
projectStartTime: "2021-03"
},
SaaS: {
projectDescription: "对接线下医院的互联网问诊、开方、销售、随访、对账、医生管理等功能的线上平台；提供相同的平台不同的医院操作和管理线上患者和医生，销售及财务等业务功能。",
projectDuty: "● 参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，PC 端后台开发，PigX 低代码开发；\n● 配合后端接口联调，维护线上项目的稳定性，及时处理线上bug；",
projectEndTime: "2023-09",
projectGit: "",
projectName: "怡宁SaaS互联网智慧医院管理系统",
projectOnline: "https://pt.yininghosp.com/dev_manager",
projectStack: "PigX 低代码开发框架、Vue2技术框架、Vuex、Vue-router、element ui 组件库、环信IM即时通讯等",
projectStartTime: "2021-10"
},
wzkn: {
projectDescription: "患者在线问诊聊天，视频通话，开方买药，量表评测，诊疗记录等功能的小程序平台",
projectDuty: "● 参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，uniapp 开发，环信IM即时通讯，医保插件开发；配合后端接口联调，维护线上项目的稳定性，及时处理线上bug；",
projectEndTime: "2023-09",
projectGit: "",
projectName: "温州康宁智慧医院（微信、支付宝小程序）",
projectOnline: "",
projectStack: "uniapp 框架，Vue2框架，uView UI库，IM即时通讯，医保插件",
projectStartTime: "2022-12"
},
yining: {
projectDescription: "患者在线问诊聊天，视频通话，开方买药，量表评测，诊疗记录等功能的小程序平台",
projectDuty: "● 参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，uniapp 开发，环信IM即时通讯，配合后端接口联调，维护线上项目的稳定性，及时处理线上bug；",
projectEndTime: "2022-12",
projectGit: "",
projectName: "怡宁心理互联网医院（微信小程序）",
projectOnline: "",
projectStack: "uniapp 框架、Vue2框架、Vuex、Vue-router、grace UI库、IM即时通讯",
projectStartTime: "2022-03",
},
shequ: {
projectDescription: "社区类管理项目包含智慧充电系统、智慧门禁系统、智慧消防系统、社区服务系统\n1) 智慧充电：是立足于智慧社区的充电支付平台，针对现代化社区电动车的充电需求，为社区住户提供充电点，方便用户便捷充电。配合物业设置充电点，变相限制电动车停放点 。\n2) 智慧门禁：是立足于智慧社区的门禁管理系统，根据物业管理需求设计开发便捷门禁管理系统。为了实现小区管理的安全问题，提高小区的安全性和可查证能力。\n3) 智慧消防：是立足于智慧社区的消防管理系统，配合物业管理安全楼栋，配备消防设备，定期检查统计记录，提供消防反馈，消防意见的记录平台。提高小区的消防安全性。\n4) 社区服务：是立足于智慧社区的社区服务系统，提供社区关爱，社区就业，社区商店，社区公告，社区活动等社区人员可消费，可互动，可参与的平台。"
, projectDuty: "技术栈选型，项目任务规划、Git代码管理、组件封装复用、需求更替、提审、发布",
projectEndTime: "2021-10",
projectGit: "",
projectName: "智慧社区（后台管理系统、小程序）",
projectOnline: "",
projectStack: "Vue、Vuex、Vue-router、vue-element-admin、element-UI、uniapp（H5、小程序）、vant-UI、uView-UI、百度地图、eCharts、微信支付等",
projectStartTime: "2020-11",
},
shike: {
projectDescription: "一款服务淘宝、京东、拼多多等电商平台卖家推广个人产品，免费送，试用的项目。类似试客联盟，琳琅类型的试用平台。",
projectDuty: "● 参与项目开发会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，vue-admin 开发，配合后端接口联调，维护线上项目的稳定性，及时处理线上bug、管理代码、发布；"
, projectEndTime: "2020-10",
projectGit: "",
projectName: "试客秀后台管理",
projectOnline: "",
projectStack: "Vue2框架、Vuex、Vue-router、element UI库",
projectStartTime: "2020-03",
},
xiuka: {
projectDescription: "由试客秀衍生的项目，服务淘宝、京东、拼多多等电商平台卖家推广个人产品的刷单项目，提高用户产品竞争力",
projectDuty: "● 参与项目开发会议，分配工作内容，跟进项目进度；\n● 项目框架搭建，业务逻辑梳理，技术栈选型，uniapp 开发，配合后端接口联调，维护线上项目的稳定性，及时处理线上bug、管理代码、发布；"
, projectEndTime: "2020-12",
projectGit: "",
projectName: "秀咖（H5、微信小程序、APP）",
projectOnline: "",
projectStack: "uniapp 框架、Vuex、Vue-router、uView UI库",
projectStartTime: "2020-08",
}
}
export default project
二、修改工作经验组件(Fifth.vue)
给项目文字添加点击事件，使用 defineEmits 注册事件文章来源：https://www.toymoban.com/news/detail-702270.html
<template>
<div class="container">
<div class="motto">
<span style="font-size: 30px;">工作经验</span>
<el-divider />
</div>
<div class="intr text-spacing">
<span v-for="(item, index) of textArr" :Key="index">
{{ item.text }}
</span>
</div>
<div class="margin-top-xl flex padding-top" style="width: 60%;">
<div class="flex flex-direction justify-around align-center padding-tb" style="width:15%;min-width: 140px;">
<div class="sphere" style="backgroundColor: #F05D4B;">
<span>24个月 +</span>
<span class="text18">浙江怡宁健康</span>
</div>
<div class="sphere" style="backgroundColor: #1cbbb4;">
<span>19个月</span>
<span class="text18">杭州云号科技</span>
</div>
</div>
<el-divider direction="vertical" style="height: 100%;" />
<div class="family padding-left-xl" style="width:85%">
<div class="square">
<div>工作时间：2021.10 - 至 今</div>
<div class="margin-tb-xs">担任岗位：前端开发组长</div>
<div>工作内容：</div>
<div class="margin-tb-xs">
<div>·参与项目开发会议，召开组内会议，分配工作内容，跟进项目进度；</div>
<div>·项目技术框架搭建，业务逻辑梳理，结构框架搭建，技术栈选型，研究新技术优化项目代码，不定期组内成员code review分享经验心得；</div>
<div>
<span>·开发维护</span>
<el-link class="margin-left-sm text15" type="warning"
@click="showProjectDetail('center')">智慧医院数据中心</el-link>
<el-link class="margin-left-sm text15" type="warning"
@click="showProjectDetail('SaaS')">怡宁SaaS智慧医院</el-link>
<el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('wzkn')">康宁智慧医院</el-link>
<el-link class="margin-left-sm text15" type="warning"
@click="showProjectDetail('yining')">怡宁心理智慧医院</el-link>
</div>
</div>
<!-- 公司各类项目趋于稳定，实行降本增效，只留下领导层，被动离职。 -->
<div>离职原因：</div>
</div>
<div class="square margin-top-xl">
<div>工作时间：2020.03 - 2021.10</div>
<div class="margin-tb-sm">担任岗位：前端开发程序员</div>
<div>工作内容：</div>
<div class="margin-tb-xs">
<div>·完成每日规划的项目任务，同步及跟进任务进度，按时交付项目内容；</div>
<div>·梳理业务逻辑，结构框架搭建，技术栈选型，UI模型设计，PC端后台开发，uniapp H5开发</div>
<div>
<span>·开发维护</span>
<el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('shike')">试客秀管理后台</el-link>
<el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('xiuka')">秀咖用户端</el-link>
<el-link class="margin-left-sm text15" type="warning" @click="showProjectDetail('shequ')">智慧社区</el-link>
</div>
</div>
<div>离职原因：初创公司，灰色边缘性业务，受到各平台打压管控，最终解散倒闭。</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts" name="Fifth">
import { reactive } from 'vue'
defineProps({
count: {
type: Number
},
});
// 注册事件
const emit = defineEmits(['showProject'])
// 点击事件
const showProjectDetail = (type: string) => {
emit('showProject', type)
}
const textArr = reactive([
{ text: '民生在勤，', checked: false },
{ text: '勤则不匮。', checked: false },
{ text: '勤劳一日，', checked: false },
{ text: '可得一夜安眠；', checked: false },
{ text: '勤劳一生，', checked: false },
{ text: '可得幸福长眠。', checked: false }
])
</script>
<style scoped>
.family {
letter-spacing: 1px;
line-height: 1.5;
font-family: 'KaiTi', sans-serif;
}
.sphere {
min-width: 130px;
min-height: 130px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 3px 3px 3px 3px rgba(10, 10, 10, .2);
}
.square {
position: relative;
width: 100%;
padding: 20px;
border-radius: 10px;
background-color: rgba(10, 10, 10, .3);
box-shadow: 6px 5px 5px 5px rgba(10, 10, 10, .3);
}
.square::before {
position: absolute;
content: '';
z-index: 20;
left: -30px;
top: 80px;
border: 15px solid transparent;
border-bottom: 5px solid transparent;
border-right: 15px solid rgba(10, 10, 10, .3);
}
</style>
三、App.vue 中监听展示项目详情事件
引入要展示的项目经验数据，监听组件中注册的事件，弹框形式展示详情文章来源地址https://www.toymoban.com/news/detail-702270.html
<template>
<div class="app-background">
<el-carousel height="100vh" direction="vertical" :autoplay="false">
<el-carousel-item>
<first />
</el-carousel-item>
<el-carousel-item>
<second />
</el-carousel-item>
<el-carousel-item>
<third />
</el-carousel-item>
<el-carousel-item>
<fourth />
</el-carousel-item>
<el-carousel-item>
<fifth @showProject="showProject" />
</el-carousel-item>
</el-carousel>
<!-- 项目经验详情 -->
<el-dialog v-model="showDialog" center>
<div class="family">
<div class="text18" style="text-align: center;font-weight: bold;">{{ projectInfo.projectName }}</div>
<div class="margin-top" style="text-align: center;">
{{ projectInfo.projectStartTime }} - {{ projectInfo.projectEndTime }}
</div>
<div class="flex margin-top">
<div style="min-width: 100px;">项目描述：</div>
<div>{{ projectInfo.projectDescription }}</div>
</div>
<div class="flex margin-top">
<div style="min-width: 100px;">项目职责：</div>
<div>{{ projectInfo.projectDuty }}</div>
</div>
<div class="flex margin-top">
<div style="min-width: 100px;">技术栈：</div>
<div>{{ projectInfo.projectStack }}</div>
</div>
<div class="flex margin-top" v-if="projectInfo.projectOnline">
<div style="min-width: 100px;">线上地址：</div>
<el-link :href="projectInfo.projectOnline" target="_blank">
{{ projectInfo.projectOnline }}
</el-link>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import first from './components/First.vue'
import second from './components/Second.vue'
import third from './components/Third.vue'
import fourth from './components/Fourth.vue'
import fifth from './components/Fifth.vue'
import project from './utils/Project.ts' // 引入数据
import { ref } from 'vue'
const showDialog = ref(false)
const projectInfo = ref(project['center'])
const showProject = (value: any) => {
if (project[value]) {
projectInfo.value = project[value]
showDialog.value = true
}
}
</script>
<style scoped>
.app-background {
position: relative;
width: 100%;
height: 100vh;
background-image: url('./assets/bgBig.png');
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
}
.el-carousel__item {
min-height: 100vh;
background-color: rgba(10, 10, 10, 0.3);
}
::v-deep(.el-dialog) {
background-color: rgb(250, 235, 215);
animation: jackInTheBox;
animation-duration: 1.5s;
}
</style>
 |
 |
=> To Be Continued
点赞 评论 收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏
到了这里，关于四、子向父传值，展示项目经验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
