组件用.vue还是.js_A11y对话的Vue.js组件

组件用.vue还是.js

Vue A11y对话 (Vue A11yDialog)

This is a Vue.js wrapper component for [email protected]

这是[受电子邮件保护]的Vue.js包装器组件

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install vue-a11y-dialog

用法 (Usage)

In your main.js application file, install the component:

在您的main.js应用程序文件中，安装组件：

import VueA11yDialog from 'vue-a11y-dialog'

Vue.use(VueA11yDialog)

Then use it as follows:

然后按以下方式使用它：

<template>
  <div id="app">
    <!-- ... -->
    <button type="button" @click="openDialog">
      Open dialog
    </button>

    <a11y-dialog id="app-dialog" app-root="#app" @dialog-ref="assignDialogRef">
      <h1 slot="title">Your dialog title</h1>
      <div>
        <p>Your content</p>
      </div>
    </a11y-dialog>
  </div>
</template>

export default {
  name: 'YourComponent',

  data: () => ({
    dialog: null
  }),

  methods: {
    openDialog () {
      if (this.dialog) {
        this.dialog.show()
      }
    },

    assignDialogRef (dialog) {
      this.dialog = dialog
    }
  }
}

It's important to assign the direct reference to the dialog instance via @dialog-ref, otherwise there is no way to call its methods.

通过@dialog-ref将直接引用分配给对话框实例非常重要，否则无法调用其方法。

Alternatively, you can also import the component directly into your file without installing it first:

另外，您也可以将组件直接导入文件中，而无需先安装它：

import { VueA11yDialog } from 'vue-a11y-dialog'
export default {
  name: 'YourComponent',

  components: {
    'a11y-dialog': VueA11yDialog
  },

  methods: {
    // ...
  }
}

API (API)

All a11y-dialog instance methods are available, see their docs for more.

所有a11y-dialog实例方法均可用，有关更多信息，请参见其文档 。

disable-native (disable-native)

• Property: disable-native

  属性 ： disable-native

• Type: Boolean

  类型 ： Boolean

• Default: false

  默认值 ： false

• Description: Per default we're using the native <dialog> element. However, if you want to disable that and use a <div role="dialog"> instead, you can just do that by adding this attribute. This gives you full control (and responsibilites) over styling. Read the a11y-dialog Styling layer documentation for more information.

  说明 ：默认情况下，我们使用本机<dialog>元素。 但是，如果要禁用该功能并改用<div role="dialog"> ，则只需添加此属性即可。 这使您可以完全控制(和负责)样式。 阅读a11y-dialog样式层文档以获取更多信息。

• Usage:

  用法 ：

<a11y-dialog disable-native>
  <!-- ... -->
</a11y-dialog>

id (id)

• Property: id

  属性 ： id

• Type: String

  类型 ： String

• Required: true

  必填 ： true

• Description: The unique HTML id attribute added to the dialog element, internally used by a11y-dialog to manipulate the dialog.

  说明 ：添加到对话框元素的唯一HTML id属性，由a11y-dialog在内部用于操纵对话框。

• Usage:

  用法 ：

<a11y-dialog id="main-dialog">
  <!-- ... -->
</a11y-dialog>

app-root (app-root)

• Property: appRoot

  属性 ： appRoot

• Type: String, Array<String> — CSS Selector string.

  Type ： String ， Array<String> — CSS选择器字符串。

• Required: true

  必填 ： true

• Description: The selector(s) a11y-dialog needs to disable when the dialog is open.

  说明 ：打开对话框时，选择器a11y-dialog需要禁用。

• Usage:

  用法 ：

<a11y-dialog app-root="#app">
  <!-- ... -->
</a11y-dialog>

class-names (class-names)

• Property: class-names

  属性 ： class-names

• Type: Object

  类型 ： Object

• Required: false

  必填 ： false

• Default: {}

  默认值 ： {}

• Description: Object of classes for each HTML element of the dialog element. Keys are: base, overlay, element, document, title, closeButton. See a11y-dialog docs for reference.

  描述 ：dialog元素的每个HTML元素的类对象。 键是： base ， overlay ， element ， document ， title ， closeButton 。 请参阅a11y-dialog文档以获取参考。

• Usage:

  用法 ：

<a11y-dialog :class-names="{ base: 'base-class', overlay: 'overlay-class' }">
  <!-- ... -->
</a11y-dialog>

title-id (title-id)

• Property: titleId

  属性 ： titleId

• Type: String

  类型 ： String

• Required: false

  必填 ： false

• Default: Defaults to id + '-title'.

  默认值 ：默认为id + '-title' 。

• Description: The HTML id attribute of the dialog’s title element, used by assistive technologies to provide context and meaning to the dialog window.

  描述 ：对话框标题元素HTML id属性，由辅助技术用来为对话框窗口提供上下文和含义。

• Usage:

  用法 ：

<a11y-dialog title-id="main-title">
  <!-- ... -->
</a11y-dialog>

close-button-label (close-button-label)

• Property: closeButtonLabel

  属性 ： closeButtonLabel

• Type: String

  类型 ： String

• Required: false

  必填 ： false

• Default: 'Close this dialog window'

  默认值 ： 'Close this dialog window'

• Description: The HTML aria-label attribute of the close button, used by assistive technologies to provide extra meaning to the usual cross-mark.

  描述 ：关闭按钮HTML aria-label属性，辅助技术使用该属性为通常的十字标记提供额外的含义。

• Usage:

  用法 ：

<a11y-dialog close-button-label="Close this super dialog">
  <!-- ... -->
</a11y-dialog>

role (role)

• Property: role

  属性 ： role

• Type: String

  类型 ： String

• Required: false

  必填 ： false

• Default: dialog

  默认值 ： dialog

• Description: The role attribute of the dialog element, either dialog (default) or alertdialog to make it a modal (preventing closing on click outside of ESC key).

  描述 ：对话框元素的role属性，可以是dialog (默认)或alertdialog ，以使其成为模式(防止在ESC键外部单击而关闭)。

• Usage:

  用法 ：

<a11y-dialog role="alertdialog">
  <!-- ... -->
</a11y-dialog>

大事记 (Events)

dialog-ref (dialog-ref)

• Returns: An a11y-dialog instance or undefined.

  返回 ：一个a11y-dialog实例或undefined 。

• Description: This event emits the a11y-dialog instance once the component has been initialised. When it gets destroyed, the event returns undefined. This is needed to call instance methods of the dialog, e.g. this.dialog.show().

  说明 ：组件初始化后，此事件将发出a11y-dialog实例。 destroyed该事件后，该事件将返回undefined 。 这是调用对话框的实例方法所必需的，例如this.dialog.show() 。

• Usage:

  用法 ：

<a11y-dialog @dialog-ref="assignDialogRef">
  <!-- ... -->
</a11y-dialog>

export default {
  // ...
  methods: {
    assignDialogRef (dialog) {
      this.dialog = dialog
    }
  }
}

插槽 (Slots)

title (title)

• Name: title

  名称 ： title

• Default: \u00D7 (×)

  默认值 ： \u00D7 (×)

• Description: The title of the dialog, mandatory in the document to provide context to assistive technology. Could be hidden with CSS (while remaining accessible).

  描述 ：对话框的标题，在文档中必须提供，以为辅助技术提供上下文。 可以用CSS隐藏 (同时保持可访问性)。

• Usage:

  用法 ：

<a11y-dialog>
  <h1 slot="title">Your dialog title</h1>
  <!-- ... -->
</a11y-dialog>

closeButtonContent (closeButtonContent)

• Name: closeButtonLabel

  名称 ： closeButtonLabel

• Default: \u00D7 (×)

  默认值 ： \u00D7 (×)

• Description: The string that is the inner HTML of the close button.

  描述 ：字符串，它是关闭按钮的内部HTML。

• Usage:

  用法 ：

<a11y-dialog>
  <span slot="closeButtonContent">Close dialog</span>
  <!-- ... -->
</a11y-dialog>

服务器端渲染 (Server-side Rendering)

This is a client-only component; a11y-dialog won't render anything on the server and wait for your bundle to be executed on the client.

这是仅客户端的组件； a11y-dialog将不会在服务器上呈现任何内容，而是等待您的包在客户端上执行。

翻译自: https://vuejsexamples.com/vue-js-component-for-a11y-dialog/

组件用.vue还是.js