Display copyright and some links about me.
You just need import it, and write it where you need.
Example
// index.js
import Vue from 'vue'
import App from './App.vue'
// ...
<!-- component -->
<template>
<div>
<vue-about-me :copyright="copyright" :links="links"></vue-about-me>
</div>
</template>
<script>
import { VueAboutMe } from 'vue-about-me'
import 'vue-about-me/style.css'
We use Iconify.
内置类型:自动生成对应图标
- github
- telegram
- blog
- bilibili
<!-- 仅当你需要额外图标时,添加它 -->
<!-- add this in your html -->
<script src="https://code.iconify.design/2/2.0.0/iconify.min.js"></script>
Then find icon name in https://icones.js.org.
const copyright = {
name: 'Vue About Me',
repo: 'Vue-About-Me',
author: 'YunYouJun',
logo: 'ri:cloud-line',
// or
// logo: 'https://cn.vuejs.org/images/logo.png',
link: 'https://yunyoujun.github.io/vue-about-me/',
color: '#0078E7'
}
const links = [
{
// ...
icon: 'ri:cloud-line'
// ...
}
]
<vue-about-me :copyright="copyright" :links="links"></vue-about-me>
You can see example
folder for more details.
Attribute | Description | Type | Options | Default |
---|---|---|---|---|
isDark | 暗色模式 (黑色图标在暗色模式下会变成白色) | Boolean (可选) | - | false |
copyright | 显示版权 | Object | —— | |
links | 显示链接 | Array[Object] | —— |
Attribute | Description | Type | Options | Default |
---|---|---|---|---|
name | 名称 | string | Vue About Me | |
repo | 项目仓库名称(GitHub) | string | —— | Vue-About-Me |
author | 作者 | string | —— | YunYouJun |
icon | 图标名称 | string | —— |
cloud 或 ri:cloud-line (ref icones.js.org) |
link | 图标链接 | string | —— | # |
color | 图标颜色 | string | —— | #0078E7 |
Name | Type |
---|---|
links | Array |
link | Object |
Attribute | Description | Type | Options | Default |
---|---|---|---|---|
type | 类型(自动生成对应图标) | string | Icon | --- |
name | 名称 | —— | ||
color | 颜色 | —— | ||
backgroundColor | 背景颜色 | —— | transparent | |
icon | 图标名称 | —— | ||
label | 标签提示 | —— | ||
href | 链接 | —— |