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

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'
    // ...
  }
]

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