@160over90/vue-wai-modal 中文文档教程

Question

vue-wai-modal

Features

Vue Modal 是一个遵循 W3C Web Accessibility Initiative 的组件，它提供了一种简单的方式来实现模式。

如果你没有 yarn，你可以在这里下载它。

Instructions for global registration

yarn add @160over90/vue-wai-modal

在 main.js（应用程序入口点）

import VueWaiModal from '@160over90/vue-wai-modal';

Vue.use(VueWaiModal);

Instructions for editing this package

yarn install

Compiles and hot-reloads for development

yarn run serve

Examples

中包含一个实现模态的简单示例。

<template>
  <div id="app">
    <ModalButton :controls="'example-modal'">
      Open button
    </ModalButton>
    <ModalBackdrop
      :id="'example-modal'"
      :transitionProps="{ name: 'fade' }"
    >
      <ModalBackdropDialog
        :ariaLabel="'modal'"
        :ariaLabelledby="'open-modal'"
        class="ExampleComponent__dialog"
      >
        <h1
          class="ExampleComponent__content"
          v-text="'Modal Content'"
        />
        <ModalButton :controls="'example-modal'">
          Close button
        </ModalButton>
      </ModalBackdropDialog>
    </ModalBackdrop>
  </div>
</template>

Props

--- 模态背景组件 ---

id（字符串，必需） 将按钮与模态背景

transition 相匹配的 ID（字符串，默认值：'transition'） 链接到过渡组件

transitionProps（对象，默认值：() => ({})） 链接到转换的名称

:transitionProps="{ name: 'fade' }"

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

initiallyOpen（布尔值，默认值：false） 页面加载模式已经打开

mode（字符串，默认值：'show'，validate（value）） 检查 v-if, v-show

closedFocus ([HTMLElement, String], Default: undefined)

--- Modal Backdrop Dialog ---

ariaLabel< /strong>（字符串，默认值：空） 用于定义在文本在屏幕上不可见的情况下标记当前元素的字符串

ariaLabelledby（字符串，默认值：null） 为辅助技术建立对象及其标签之间的关系，例如屏幕阅读器

--- Modal Button ---

controls （字符串，必需） 背景 ID 链接（必须相同）

License

MIT