vuepress-theme-plume/docs/notes/plugins/caniuse.md

title, author, createTime, permalink

title	author	createTime	permalink
plugin-caniuse	pengzhanbo	2024/03/11 17:22:52	/plugins/plugin-caniuse/

:::warning Deprecated 该插件功能已整合到 vuepress-plugin-md-power 。 因此，此插件不再更新维护，并标记为 弃用。 :::

指南

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

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

安装

::: code-tabs @tab npm

npm install @vuepress-plume/plugin-caniuse

@tab:active yarn

yarn add @vuepress-plume/plugin-caniuse

@tab pnpm

pnpm add @vuepress-plume/plugin-caniuse

:::

使用

Step1：添加插件

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

::: code-tabs @tab .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
:::

效果：

::: 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 表示高于当前浏览器版本的支持情况