外国人做的甲骨文网站,wordpress popular posts怎么用,网站建设 赛门仕博,wordpress 页面打不开很多人看到里边有好看的东西就习惯性的点进来看看#xff0c;还一边点一边想 —— 好看的简历我见多了#xff0c;你这个又能好看到哪里去。我想差不多可以#xff1a; 哪里吧因为最近有在准备简历#xff0c;就习惯性的找一找有没有现成的简历模板。结果全是付费的#x…很多人看到里边有好看的东西就习惯性的点进来看看还一边点一边想 —— 好看的简历我见多了你这个又能好看到哪里去。我想差不多可以 哪里吧因为最近有在准备简历就习惯性的找一找有没有现成的简历模板。结果全是付费的丑的收5块稍微讲究一点的就差不多要10块钱了这让一个普通家庭出身的年轻人怎么负担得起。于是就产生了写一个简历模板的想法后来就有了这个轻量的简历神器。 vue-resume地址 https://luosijie.github.io/vue-resume/#/
源码 https://github.com/luosijie/vue-resume
使用方法 简历模板的操作可以说很简单基本上把握住这么几个原则 想改哪里点哪里右键删除加号增加
应用场景 简历作为图片下载后,可以 直接作为招聘网站的附件简历打印出来实际效果稍微有点模糊不过在可接受范围
不足之处 写这个的初衷是做一个便捷好用的简历模板但我觉得距离实现这个目标还有一段距离。目前还有以下缺陷 不能选择模板样式不支持多页简历不支持转换为PDF
功能实现
这是一个基于Vue的项目从最后实现来看本身没什么技术难点。不过也要考虑实际用户需求和应用场景然后将这些和 自己的技术水平 和 愿意投入的时间成本 做一个平衡。
Logo设计
Logo设计无关技术只不过项目无论大小我感觉有一个Logo才完整。不过关于Logo设计大多数人是不太懂的, 我自己总结了一条规律只要你设计的Logo让人一眼没看懂基本上就成功了一半了。 就好像你看出下面的Logo是字母 “V” 和 “R” 的结合体吗。 Logo下面是Logo的设计过程 Logo_process功能分析
这个项目最基本的单元是 图片 和 文字 然后组成各个 list组件 包括 About me, Skill, Education, Working Experience等。
图片文字组件 图片和文字只要实现可编辑功能就可以了。 文字
p contenteditabletrueLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit metus in libero rutrum congue aliquam eu libero. Donec tristique est pharetra fringilla sollicitudin. Etiam eu ipsum vitae nulla tincidunt scelerisque semper id arcu. Phasellus quam tellus, laoreet id felis a, dignissim facilisis orci. Mauris feugiat vulputate quam quis tincidunt. In eleifend augue eu tristique bibendum. Donec gravida, eros sed iaculis iaculis, magna est finibus tortor, ultricies accumsan diam lorem non neque.
/p
图片
edit-image.vue
基本上就是将本地图片上传并转为base64格式
templatediv classedit-image :style{ width: width px, height: height px}img :srcimgSrc altimage :class{ circle: isCircle }input typefile acceptimage/gif,image/jpeg,image/jpg,image/png changechangeImage/div
/template
scriptexport default {name: EditImage,props: {...},data: function () {return {imgSrc: this.src}},methods: {changeImage: function (evt) {let _this thislet reader new FileReader()let file evt.target.files[0]reader.readAsDataURL(file)reader.onload function (evt) {_this.imgSrc evt.target.result}}}}
/script
List组件
context-list.vue List-item组件List组件要实现 About me, Skill, Education, Working Experience 这些组件的通用功能。也就是:
标题内容增加条目
templatediv classcontext-list :class{ icon-margin-bottom: icon }div classlist-heading :class{ icon-class: icon }div classtitleEditImage v-ificon :srcicon height36 width36 classimg/EditImageh2 classtitle contenteditabletrue{{title}}/h2/divbutton classadd clickadd :class{ icon-margin-right: icon } /button/div// 实现内容功能ul idluoListItemAbout v-iftitle About me v-foritem in arry :keyitem.id/ListItemAboutListItemSkill v-iftitle Skill v-foritem in arry :keyitem.id/ListItemSkillListItemEducation v-iftitle Education v-foritem in arry :keyitem.id/ListItemEducationListItemExperience v-iftitle Working Experience v-foritem in arry :keyitem.id/ListItemExperienceListItemInfo v-ificon v-foritem in arry :keyitem.id/ListItemInfoslot namelistItem/slot/ul/div
/template
script...export default {name: ContextList,components: {EditImage,ListItemAbout,ListItemSkill,ListItemEducation,ListItemExperience,ListItemInfo},props: {// 实现标题功能title: {type: String,default: Title},icon: {type: String,default: }},data: function () {return {arry: []}},methods: {showAdd: function () {this.add true},// 实现条目增加功能add: function () {this.arry.push(1)}}}
/script
style...
/style
List-item组件
list-item.vue List-item组件List-item组件 主要实现每个条目的删除功能, 然后不同类型的条目在 list-Item组件 的基础上定义各自的内容
templateli classlist-item contextmenu.preventshowControl v-iflistItemslot/slotdiv v-iflistControl classlist-controlspan clickdeleteControldelete/spanspan clickcancelControlcancel/span/div/li
/template
scriptexport default {name: ListItem,data: function () {return {listControl: false,listItem: true}},methods: {// 显示控件showControl: function () {this.listControl true},// 取消操作cancelControl: function () {this.listControl false},// 删除控件deleteControl: function () {this.listItem false}}}
/script先这样了 欢迎star
