【vue】使用无障碍工具条(详细)

news2024/12/26 14:58:26

引入:使用的是太阳湾的无障碍工具条,代码地址:https://gitee.com/tywAmblyopia/ToolsUI
具体步骤:下载代码后,将其中的 canyou 文件夹拖入 vue 项目中的 public 文件夹中;
在这里插入图片描述
上图是在项目目录中的样子,记得不要改文件夹的名字,就叫 canyou
然后在 vue 项目中的 public/index.html 文件中引入 1.8 以上版本的 jquery,和 canyou 文件夹中的 wza.min.js 文件,最后在 <body> 中引入

<a id="wzayd" title="网站信息无障碍工具条" href="javascript:;" class="wzayd" accesskey="g">无障碍阅读</a> 

如图:
在这里插入图片描述
我 jquery 引入的方式是 cdn 引入,如果改为本地导入会出现报错:
在这里插入图片描述
演示:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/979497.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nginx - 根据请求参数路由进行不同的响应

文章目录 需求思路 需求 业务有一个统一入口 /api/biz?type1 /api/biz/type2需要对不同的接口实现流控 最常见的是通过location进行路径匹配的时候&#xff0c;但是无法使用正则表达一起捕获这个路径和querstring的参数。如果我们想通过URL里面的Query String进行不同的rew…

mybatisplus多租户配置

概述 当前mybatisPlus版本 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.2</version> </dependency>jdk版本&#xff1a;17 springboot版本&#xff1a;…

macOS外接显示器切换窗口卡顿的问题

背景 最近发现在使用外接显示器的情况下&#xff0c;切换窗口鼠标经常会卡一下卡一下的。 过程 由于我个人有安装自动切换输入法的工具&#xff08;Input Source Pro&#xff09;&#xff0c;我以为是在不同窗口中切换了输入法导致的卡顿&#xff0c;我就关闭了这个软件&…

YOLO目标检测——VOC2007数据集+已标注VOC格式标签下载分享

VOC2007数据集是一个经典的目标检测数据集&#xff0c;该数据集包含了20个常见的目标类别&#xff0c;涵盖了人、动物、交通工具等多个领域&#xff0c;共同11220图片。使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;标签格式为VOC格式&#xff08;即xml标签&a…

随心记录0816

1. foce相关方法 下面这张图☞的都是uvm_hdl_force和uvm_hdi_deposit 2.post randomize函数的使用方法 【验证小白】随机中使用post_randomize的正确姿势_尼德兰的喵的博客-CSDN博客 3. 4. process用法 systemverilog的process类 | 骏的世界 (lujun.org.cn) 5.uvm_re_mat…

被百度判定为低质量网站了!如何整改?

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 先说结论&#xff1a;接受现实&#xff0c;不要幻想百度恢复了! 百度自9月初大批量删除百度资源平台权限以来&#xff0c;几乎90%(未经证实**&#xff0c;但数量确实不小)的网站都被取消了权限&am…

【正点原子STM32连载】 第二十九章 DMA实验 摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html# 第二…

【PowerQuery】PowerQuery学习路径

PowerQuery这么好,怎么去学习呢?相信很多初读本书的朋友迫切的希望了解整个PowerQuery全景知识和它提供的相应的功能。但是对于PowerQuery来说,一开始就会进行自定义函数的构建当然也是不可能的,这里有相应的学习路径来进行由浅入深的学习,帮助读者更好的理解PowerQuery的…

12V/24V/48V 直流DC电源浪涌保护方案图 超齐全

直流DC电源端口浪涌过压防护一直都是很多新老电子工程师关注的方案之一。不管是电源端口浪涌防护还是信号接口静电保护&#xff0c;浪涌静电防护&#xff0c;找东沃&#xff0c;电路保护不迷路&#xff01;东沃电子专注于研发、生产、销售静电保护二极管&#xff08;ESD&#x…

natapp 内网穿透 获取网页信息相关内容简介

1 首选介绍natapp 内网穿透进入官网 https://natapp.cn/ 购买或者使用免费隧道 协议使用web ,填写本地地址和web端可访问的端口 进入exe文件的目录 运行 natapp -authtokenxxxxxx 剩下获取微信用户信息 第一步获取code 这里需要设置授权域名 这里可以设置上 natapp给分配的地…

WebSocket原理简介

慢聊Go之GoLang中使用Gorilla Websocket&#xff5c;Go主题月 - 掘金 (juejin.cn) 【Go项目】24. WebSocket 基本原理_哔哩哔哩_bilibili 1.http和socket的区别 1&#xff09; http要先给服务器发请求&#xff0c;然后才会得到响应&#xff0c;基本是一问一答式。 而socke…

纯css实现奥运五环、3D平移、旋转、扭曲

文章目录 前言效果图htmlcss 前言 1、不是真正的五环&#xff0c;因为通过形变得来。 2、不同电脑显示器的像素不同&#xff0c;显现的效果不同。 3、不推荐使用此方法。 4、主要通过旋转加平移的方式实现。 效果图 html <div class"olympic_rings"><span …

医美小程序怎么做

医疗美容小程序商城功能明细&#xff1a; 1. 商品展示&#xff1a; - 商品分类&#xff1a;根据不同的医疗美容产品进行分类展示&#xff0c;方便用户查找和浏览。 - 商品详情&#xff1a;展示商品的详细信息&#xff0c;包括价格、规格、功效、成分等&#xff0c;以及用户评价…

Java反射:探索对象创建与类信息获取

文章目录 1. 对象的创建2. 类的初始化2.1 类的加载2.2 类的连接2.3 类的初始化 3. 反射是什么&#xff1f;4. 获取Class类对象4.1 使用类名.class4.2 使用对象的getClass()方法4.3 使用Class.forName() 5. 获取构造器对象5.1 使用getConstructors()和getDeclaredConstructors()…

C标准输入与标准输出——stdin,stdout

&#x1f517; 《C语言趣味教程》&#x1f448; 猛戳订阅&#xff01;&#xff01;&#xff01; ​—— 热门专栏《维生素C语言》的重制版 —— &#x1f4ad; 写在前面&#xff1a;这是一套 C 语言趣味教学专栏&#xff0c;目前正在火热连载中&#xff0c;欢迎猛戳订阅&#…

【iVX】iVX的低代码未来发展趋势:加速应用开发的创新之路

简介&#xff1a; 随着数字化转型的飞速发展&#xff0c;企业和组织对快速开发和交付高质量应用的需求越来越迫切。低代码开发平台作为一种创新的解决方案&#xff0c;极大地简化了应用程序的开发过程。在这一领域&#xff0c;iVX低代码平台作为领先的创业公司&#xff0c;正在…

【kafka】kafka介绍

https://kafka.apachecn.org/intro.html Apache Kafka是一个分布式流处理平台。这到底意味着什么呢? 我们知道流处理平台需要具有以下三种特性&#xff1a; 可以发布和订阅流式的记录。这一方面与消息队列或者企业消息系统类似。可以储存流式的记录&#xff0c;并且有较好的…

初识自动驾驶技术之旅 第一课 学习笔记

​ &#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 &#x1f4da; 前言 &#x1f4d8; 1. 自动驾驶人才需求与挑战 &#x1f4d8; 2. Apollo …

什么合同管理系统?4类合同管理软件评测

说到合同管理系统&#xff0c;前提还是弄清楚合同有哪些类型&#xff0c;合同管理有那些痛点&#xff0c;才好对症下药。 一、合同的类型和合同管理的痛点 从法律角度来说&#xff0c;合同可以分为&#xff1a;有名合同与无名合同、单务合同与双务合同、有偿合同与无偿合同、…

Redis7安装配置

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…