a cute resume template with vuejs
npm install vue-iresumetext
// by npm
$ npm install vue-iresume --save
// by cnpm
$ cnpm install vue-iresume --save
// by yarn
$ yarn add vue-iresume --save
`
使用
example文件夹可以指导你的使用
在example文件夹已经添加example/Demo.vue 可以把简历的详细内容提取成json文件,如example/resume/resume.json
简历的背景可以换成图片,如背景图example/img/bg1.jpg
`javascript
`
接口
- pData
type: Object
Default: {
user: {
name: "itagn", // 谁的简历
avatars: "头像地址", // 头像url,默认是一个可爱的二次元萌妹动图
leftModules: [ // 左边的模块,根据moduleType来区分不同的模块样式
{
moduleName: "联系方式",
moduleType: 0,
data: [
{ name: "电话", "value": "xxxxxxxxxx", icon: "xxx", url: "xxx" } // icon和url都不是必填的数据,提供了简历将更加完整
]
},
{
moduleName: "应聘岗位",
moduleType: 1,
data: [
"xx工程师"
]
},
{
moduleName: "个人评价",
moduleType: 2,
data: [
"自我评价"
]
}
],
rightModules: [ // 右边的模块,根据moduleType来区分不同的模块样式
{
moduleName: "基础信息",
moduleType: 0,
data: [
{ name: "姓名", value: "itagn", icon: "xxx" } // icon可以省略
]
},
{
moduleName: "工作经验",
moduleType: 1,
icon: "xxx", // icon可以省略
data: [
{
name: "xxxx有限公司",
url: "相关链接", // 可以省略
startTime: "2018/x",
endTime: "2018/x",
miniModule: [
{
miniName: "工作内容",
data: [
"码代码"
]
}
]
}
]
},
{
moduleName: "团队项目",
moduleType: 2,
icon: "xxx", // icon可以省略
data: [
{
name: "团队项目xx系统",
url: "相关链接", // 可以省略
startTime: "2018/x",
endTime: "2018/x",
miniModule: [
{
miniName: "项目介绍",
data: "团队项目介绍"
},
{
miniName: "项目职责",
data: [
"工作量"
]
}
]
}
]
},
{
moduleName: "个人项目",
moduleType: 2,
icon: "xxx", // icon可以省略
data: [
{
name: "个人项目xx系统",
url: "相关链接", // 可以省略
startTime: "2018/x",
endTime: "2018/x",
miniModule: [
{
miniName: "项目介绍",
data: "团队项目介绍"
},
{
miniName: "项目职责",
data: [
"工作量"
]
}
]
}
]
},
{
moduleName: "技能树",
moduleType: 3,
data: [
"javascript"
]
},
{
moduleName: "自我评价",
moduleType: 4,
data: [
"自我评价文章段落"
]
}
]
}
}
- pNode
type: Object
Default: {
className: '', // 如果你在组件上添加了id或者class属性,对应填写className,一个页面展示多个简历需要添加标识
theme: 'blue', // 简历主题风格,默认为blue,其他值pink,orange,purple,yellow
cols: 2, // 简历展示的风格,默认不为1,为1时简历展示一栏,为2时展示2栏【中间有分割线】,为3时展示2栏【中间无分割线】
avatars: true, // 是否展示头像,默认不为false【展示】,设置为true展示,设置为false不展示
leftBackground: '', // 简历左边背景,可以为图片地址或者颜色,默认使用主题风格
leftColor: '', // 简历左边字体颜色,默认使用主题风格
rightBackground: '', // 简历右边背景,可以为图片地址或者颜色,默认使用主题风格
rightColor: '' // 简历右边字体颜色,默认使用主题风格
}
- index
type: Number
describe:
同步父组件的index数据,确认同一个页面多个简历能有正确的层级关系
若一个页面只有一个简历时,则可以忽略该接口
属性的取值
- theme
blue / pink / orange / purple / yellow
- icon
你可以在链接 ICON 看所有的icon样式
以下的颜色为 #334455
icon-link
以下的颜色为 #707070
icon-user | icon-time | icon-sex | icon-address | icon-school | icon-education | icon-major
以下的颜色跟随字体颜色
icon-email | icon-github | icon-npm | icon-phone | icon-project |
icon-qq | icon-sina | icon-star | icon-tieba | icon-zhihu
事件
- syncZIndex`