Nocturnal Programmer's Machine

    vue-about-me
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.7 • Public • Published

    vue-about-me

    npm npm npm npm bundle size (minified + gzip)

    Demo

    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
    • 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 —— cloudri: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

    Install

    npm i vue-about-me

    DownloadsWeekly Downloads

    29

    Version

    1.2.7

    License

    MIT

    Unpacked Size

    56.3 kB

    Total Files

    22

    Last publish

    Collaborators

    • yunyoujun