vue-about-me

Display copyright and some links about me.

• Demo
• vue-about-me | unpkg
• vue-about-me | jsdelivr

How To Use

Import

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>

// use default name VueAboutMe
import VueAboutMe from "vue-about-me";
import "vue-about-me/style.css";

Icon

We use Iconify.

内置类型：自动生成对应图标

• github
• telegram
• weibo
• twitter
• wechat
• 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.

Example

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'
},
links: [
  {
    // ...
    icon: 'ri:cloud-line'
    // ...
  }
]

Template

<vue-about-me :copyright="copyright" :links="links"></vue-about-me>

You can see example folder for more details.

Options

Attribute	Description	Type	Options	Default
isDark	暗色模式 （黑色图标在暗色模式下会变成白色）	Boolean （可选）	-	false
copyright	显示版权	Object	——
links	显示链接	Array[Object]	——

copyright

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

links

Name	Type
links	Array
link	Object

link

Attribute	Description	Type	Options	Default
type	类型（自动生成对应图标）	string	Icon	---
name	名称		——
color	颜色		——
backgroundColor	背景颜色		——	transparent
icon	图标名称		——
label	标签提示		——
href	链接		——

Sponsors