Vue 3 的可视化隐藏组件 - vue-visually-hidden

Vue 3 的可视化隐藏组件 - vue-visually-hidden
插件名称 vue-visually-hidden
发布时间 2021年11月30日
插件作者 yamanoku

Vue 3 的视觉隐藏组件,它允许您在视觉上隐藏元素,但让辅助技术(如屏幕阅读器)可以访问它们。

安装和下载:

# Yarn
$ yarn add vue-visually-hidden

# NPM
$ npm i vue-visually-hidden

使用

1. 导入 Visually Hidden 组件。

import { VisuallyHidden } from 'vue-visually-hidden'
// 样式表
import 'vue-visually-hidden/dist/style.css'

2. 将 Visually Hidden 组件添加到模板中。

<template>
  <div>
    <VisuallyHidden>
      可视隐藏文本
    </VisuallyHidden>
  </div>
</template>

3. 确定是否在聚焦时显示内容。

<template>
  <div>
    <VisuallyHidden :isFocusable="true">
      可视隐藏文本
    </VisuallyHidden>
  </div>
</template>