1.2.7 • Published 2 years ago
vue-about-me v1.2.7
vue-about-me
Display copyright and some links about me.
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
- 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 | 显示链接 | ArrayObject | —— |
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
1.2.7
2 years ago
1.2.6
2 years ago
1.2.5
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
3 years ago
1.1.5
3 years ago
1.1.4
3 years ago
1.1.1
3 years ago
1.0.2
3 years ago
1.1.0
3 years ago
1.0.1
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.0.3
3 years ago
1.0.0-alpha.5
3 years ago
1.0.0-alpha.4
3 years ago
1.0.0-alpha.3
3 years ago
1.0.0-alpha.2
3 years ago
1.0.0-alpha.1
3 years ago
0.3.2
4 years ago
0.3.1
4 years ago
0.3.0
4 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.0
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago