vuepress-theme-plume/docs/notes/vuepress-plugin/caniuse/README.md

title, createTime, author, permalink

title	createTime	author	permalink
plugin-caniuse	2022/05/13 01:02:51	pengzhanbo	/note/vuepress-plugin/caniuse/

项目地址： vuepress-plugin-caniuse

指南

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

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

安装

:::: code-group ::: code-group-item npm

npm install @vuepress-plume/vuepress-plugin-caniuse

::: ::: code-group-item yarn:active

yarn add @vuepress-plume/vuepress-plugin-caniuse

::: ::: code-group-item pnpm

pnpm add @vuepress-plume/vuepress-plugin-caniuse

::: ::::

使用

Step1：添加插件

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

:::: code-group ::: code-group-item .vuepress/config.ts

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

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

::: ::: code-group-item .vuepress/config.js

const { caniusePlugin } = require('@vuepress-plume/vuepress-plugin-caniuse')

module.exports = {
  plugins: [
    caniusePlugin()
  ]
}

::: ::::

Step2：在markdown中使用

在你的 文章 markdown文件中，使用以下格式：

::: caniuse <feature>
:::

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

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

效果：

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

Method

caniusePlugin([options])

插件注册函数

options: [CanIUsePluginOptions]

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