vuepress-theme-plume/docs/notes/theme/guide/组件/npmBadge.md

title, author, icon, createTime, permalink

title	author	icon	createTime	permalink
Npm 徽章	pengzhanbo	akar-icons:npm-fill	2024/07/26 22:07:23	/guide/components/npm-badge/

概述

Npm 徽章组件 用于显示 npm 包信息，并提供相关的链接。

徽章由 https://shields.io 提供支持。

使用

使用该组件需要你手动导入 NpmBadge 或 NpmBadgeGroup 组件：

<!-- 在 markdown 中导入 -->
<script setup>
import NpmBadge from 'vuepress-theme-plume/features/NpmBadge.vue'
import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
</script>

<!-- 导入后，即可在 markdown 中使用 -->
<NpmBadge name="vuepress-theme-plume" type="dm" />

<!-- 并排显示多个 npm badge -->
<NpmBadgeGroup name="vuepress-theme-plume" items="version,dm" />

<NpmBadge />

单个 npm badge

Props

名称	类型	必填	默认值	说明
name	string	否	''	npm 包名，为空则从 repo 中获取
repo	string	name 为空时必填	''	包 github 仓库地址, 格式为 owner/repo
type	NpmBadgeType	是	-	徽章类型
theme	NpmBadgeTheme	否	'flat'	徽章主题
label	string	否	''	徽章标签
color	string	否	'#32A9C3'	徽章颜色
labelColor	string	否	'#1B3C4A'	徽章标签颜色
branch	string	否	'main'	仓库分支
dir	string	否	''	包所在仓库目录，适用于 monorepo 项目

Types

type NpmBadgeType =
  // github
  | 'source' // github source
  | 'stars' // github stars
  | 'forks' // github forks
  | 'license' // github license
  // npm
  | 'version' // npm version
  | 'dt' // alias d18m
  | 'd18m' // npm downloads last 18 months
  | 'dw' // npm downloads weekly
  | 'dm' // npm downloads monthly
  | 'dy' // npm downloads yearly

type NpmBadgeTheme = 'flat' | 'flat-square' | 'plastic' | 'for-the-badge' | 'social'

示例

• <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="source" /> -
• <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="stars" /> -
• <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="forks" /> -
• <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="license" /> -
• <NpmBadge name="vuepress-theme-plume" type="version" /> -
• <NpmBadge name="vuepress-theme-plume" type="dt" /> -
• <NpmBadge name="vuepress-theme-plume" type="d18m" /> -
• <NpmBadge name="vuepress-theme-plume" type="dy" /> -
• <NpmBadge name="vuepress-theme-plume" type="dm" /> -
• <NpmBadge name="vuepress-theme-plume" type="dw" /> -

<NpmBadgeGroup />

组合多个 npm badge

Props

名称	类型	必填	默认值	说明
name	string	否	''	npm 包名，为空则从 repo 中获取
repo	string	name 为空时必填	''	包 github 仓库地址, 格式为 owner/repo
items	string | NpmBadgeType[]	否	-	徽章类型列表, 传入 string 时用 ','分隔，会自动转换为 NpmBadgeType[]
theme	NpmBadgeTheme	否	''	徽章主题
color	string	否	''	徽章颜色
labelColor	string	否	''	徽章标签颜色
branch	string	否	''	仓库分支
dir	string	否	''	包所在仓库目录，适用于 monorepo 项目

Slots

<NpmBadgeGroup /> 支持传入 多个 <NpmBadge /> 组件。

<NpmBadgeGroup /> 声明的 Props 将被注入到 <NpmBadge /> 组件中。通过这种方式来实现和简化徽章组合。

示例

输入：

<NpmBadgeGroup
  repo="pengzhanbo/vuepress-theme-plume"
  items="stars,version,dm,source"
/>

输出：

使用 <slot /> 灵活定义徽章组合：

输入：

<NpmBadgeGroup repo="pengzhanbo/vuepress-theme-plume">
  <NpmBadge type="stars" />
  <NpmBadge type="version" label="npm" />
  <NpmBadge type="dm" />
  <NpmBadge type="source" />
</NpmBadgeGroup>

输出：