约 398 字大约 1 分钟

2022-05-13

npm versionnpm total downloadsnpm yearly downloadsgithub source

指南

为你的 vuepress 站点,在编写文章时, 提供嵌入 can-i-use WEB feature 各平台支持说明 的功能。

方便在描述某个 WEB feature 时,能更直观的表述 该特性的支持程度。

安装

yarn
yarn add @vuepress-plume/plugin-caniuse

使用

Step1:添加插件

将插件添加到你的 vuepress 项目的配置文件中:

.vuepress/config.ts
import { defineUserConfig } from 'vuepress'
import { caniusePlugin } from '@vuepress-plume/plugin-caniuse'

export default defineUserConfig({
  plugins: [
    caniusePlugin()
  ]
})

Step2:在markdown中使用

在你的 文章 markdown文件中,使用以下格式:

::: caniuse <feature> {browser_versions}
:::

示例: 获取 css 伪类选择器 :dir() 在各个浏览器的支持情况图标:

::: caniuse css-matches-pseudo
:::

效果:

Method

caniusePlugin([options])

插件注册函数

options: [CanIUsePluginOptions]

  • options.mode: 配置 can-i-use 在 文章中的 嵌入模式, 默认: image
    • image: 嵌入 特性图表图片
    • embed: 嵌入 iframe, 实时的,可交互的模式

Markdown 语法

::: caniuse <feature> {browser_versions}
:::

<feature>

必填。 正确取值请参考 https://caniuse.bitsofco.de/

{browser_versions}

可选。当前特性在多个版本中的支持情况。

默认值为: {-2,-1,1}

格式: {number,number,...} 取值范围为 -5 ~ 3

  • 小于0 表示低于当前浏览器版本的支持情况
  • 0 表示当前浏览器版本的支持情况
  • 大于0 表示高于当前浏览器版本的支持情况