@adamdehaven/vuepress-plugin-custom-tooltip 中文文档教程

Question

VuePress-Plugin-Custom-Tooltip

Vue.js 项目的可重用工具提示组件。 这个插件是 @adamdehaven/vue-custom-tooltip 的 VuePress 包装器。

Installation

# With npm
npm install @adamdehaven/vuepress-plugin-custom-tooltip

# or Yarn
yarn add @adamdehaven/vuepress-plugin-custom-tooltip

您可以通过将插件安装到 .vuepress/config.js 文件中来使用该插件，如下所示：

// .vuepress/config.js
module.exports = {
  // Install the plugin using ONE of the options below:
  // --------------------------------------------------

  // 1. Install with default options
  plugins: ['@adamdehaven/vuepress-plugin-custom-tooltip'],

  // ===== OR  =====

  // 2. Install with custom options (defaults shown)
  plugins: [
    [
      '@adamdehaven/vuepress-plugin-custom-tooltip',
      {
        name: 'VueCustomTooltip',
        color: '#fff',
        background: '#000',
        borderRadius: 100,
        fontWeight: 400,
      },
    ],
  ],
}

或者，如果您正在使用主题，您可以在 .vuepress/theme/index.js 文件中安装：

// .vuepress/theme/index.js
module.exports = (options, ctx) => {
  return {
    // Install the plugin using ONE of the options below:
    // --------------------------------------------------

    // 1. Install with default options
    plugins: ['@adamdehaven/vuepress-plugin-custom-tooltip'],

    // ===== OR  =====

    // 2. Install with custom options (defaults shown)
    plugins: [
      [
        '@adamdehaven/vuepress-plugin-custom-tooltip',
        {
          name: 'VueCustomTooltip',
          color: '#fff',
          background: '#000',
          borderRadius: 100,
          fontWeight: 400,
        },
      ],
    ],
  }
}

Usage

<!-- Basic -->
What is <VueCustomTooltip label="This is a tooltip">a tooltip</VueCustomTooltip>?

<!-- With Props -->
What is
<VueCustomTooltip label="This is a tooltip" position="is-bottom" abbreviation sticky>a tooltip</VueCustomTooltip>?

<!-- With element(s) -->
<VueCustomTooltip label="View @adamdehaven on Twitter">
  <a class="button" href="https://twitter.com/adamdehaven">
    <span class="icon icon-twitter"></span>
    <span>Twitter</span>
  </a>
</VueCustomTooltip>

Options

将下面列出的任何选项传递给 Vue.use (VueCustomTooltip, {...}) 为您的项目自定义插件（不适用于组件内安装）< /em>。

关于与 CSS 属性相关的选项的说明

color、background、borderRadius 和 fontWeight 属性是使用 CSS 变量（自定义属性） 在伪元素上设置的，这意味着它们将回退到它们的不支持的浏览器中的默认值（例如 Internet Explorer）。

name

• Type: String
• Default: VueCustomTooltip

自定义您将在项目中使用的组件的名称。 首选 Camel-case 名称，因为这允许在您的项目中使用 camel-case 或 kebob-case。

Vue.use(VueCustomTooltip, {
  name: 'SuperCoolTooltip', // camel-case preferred
})

如果您使用驼峰命名法注册名称，则可以通过驼峰命名法或引用工具提示组件。 kebob-case：

<!-- Default name (user did not pass the 'name' option) -->

<!-- camel-case -->
Nice <VueCustomTooltip label="Neat!">tooltip</VueCustomTooltip>!
<!-- kebob-case -->
Nice <vue-custom-tooltip label="Neat!">tooltip</vue-custom-tooltip>!

<!-- Custom name (allows user to rename component) -->

<!-- camel-case -->
Nice <SuperCoolTooltip label="Neat!">tooltip</SuperCoolTooltip>!
<!-- kebob-case -->
Nice <super-cool-tooltip label="Neat!">tooltip</super-cool-tooltip>!

color

• Type: HEX Color
• Default: #fff

自定义工具提示中显示的文本的颜色。

Vue.use(VueCustomTooltip, {
  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)
})

background

• Type: HEX Color
• Default: #000

自定义工具提示的背景颜色（以及 underlined 文本颜色）。

Vue.use(VueCustomTooltip, {
  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)
})

borderRadius

• Type: Number
• Default: 100

自定义工具提示的边框半径。 必须是整数。

Vue.use(VueCustomTooltip, {
  borderRadius: 4,
})

fontWeight

• Type: Number
• Default: 400

自定义工具提示文本的字体粗细。 必须是 100 的倍数，介于 100 - 900 之间的整数。

Vue.use(VueCustomTooltip, {
  fontWeight: 700,
})

Props

除了上面的 插件选项 之外，您还可以将 props 传递给组件本身以自定义两者工具提示元素的外观和行为。

如果需要 true 值，可以简单地通过将属性添加到组件标签来传递接受布尔值的道具。 请参阅此处的 sticky 示例：

<VueCustomTooltip label="Tooltip" sticky>text/element</VueCustomTooltip>

所有其他属性都可以作为普通属性传递（如果相应的值是字符串，如上所示的 label 属性）或使用 v-bind 指令，如下所示：

<VueCustomTooltip :label="element.helpText" :sticky="false">text/element</VueCustomTooltip>

下面列出了工具提示组件的所有可用属性：

label

• Type: String
• Default: null

将显示在工具提示中的文本。 如果 label 的值为 null，则不会显示工具提示。

您可以不将 HTML 传递给 label 属性。

active

• Type: Boolean
• Default: true

确定工具提示是否应在悬停时显示，或者是否存在 sticky 道具，如果工具提示应该可见。

position

• Type: String
• Value: is-top / is-bottom / is-left / is-right
• Default: is-top

工具提示相对于它周围的文本/元素的位置。

abbreviation

• Type: Boolean
• Default: false

用语义正确的 元素替换组件的标准 元素，并设置 下划线 属性为 true。 这在向页面内容中的文本添加工具提示时非常有用，您希望在其中为单词或短语提供额外的上下文，或者提供单词或首字母缩略词的定义。

VuePress pages are served as an <VueCustomTooltip label="Single Page Application" abbreviation>SPA</VueCustomTooltip>.

sticky

• Type: Boolean
• Default: false

确定工具提示是否应始终显示（包括在组件加载/安装时），而不管元素是否悬停。

underlined

• Type: Boolean
• Default: false

在包含的文本下方添加虚线边框（与 ​​background HEX 值相同的颜色）。 如果 abbreviation 属性设置为 true，此值将自动设置为 true。

multiline

• Type: Boolean
• Default: false

允许工具提示文本根据需要换行。 可以与 size 属性结合使用来调整工具提示的宽度。

size

• Type: String
• Value: is-small / is-medium / is-large
• Default: is-medium

工具提示的宽度，如果 multiline 属性设置为 true。

Adding Custom Classes & Styles

就像任何其他 Vue 组件一样，您可以将类或样式直接添加到将应用于呈现的 标签（或 标记，如果 abbreviation 设置为 true）。

<!-- Tooltip component with custom classes and styles -->
<VueCustomTooltip class="your-class" :class="{ 'dynamic-class': isDynamic }" :style="{ display: 'inline' }" label="Neat"
  >text</VueCustomTooltip
>

如果您想在项目中扩展功能或工具提示样式，这将非常有用，它允许您调整工具提示元素的显示行为等内容。

tooltip 组件默认呈现为 display: inline-block 元素； 但是，您可以通过将样式直接绑定到组件来覆盖它，如上所示。

License

麻省理工学院