步骤第一步 去gitee看代码仓库大家别忘了去这个仓库star哦 第二步 使用这个 canyou文件夹中的内容![](https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/bada605317cf450e9d3852f06ee0050d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1715748193&x-signature=fXk%2Fq11BzKKJ59RPAameemZjHU0%3D)
第三步 把 canyou 文件夹丢到vue的public文件夹里面这样的图示: ![](https://p3-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/a18a9226d1bc4f0bb7590feef55557e1~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1715748193&x-signature=%2BOY8wNr8uAjxBhct83c6ljNBCcQ%3D)
第四步 再在public文件夹下的index.html文件中添加需要使用的脚本如下: 入口文件index.html <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 无障碍依赖jquery和自由的js脚本,所以需要引入,注意顺序 --> <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script id="rrbayJs" src="/canyou/js/wza.min.js" referrerpolicy="origin" ></script> <title> <%= htmlWebpackPlugin.options.title %> </title> <style> </style></head>第五步 在适当地方丢进去一个a标签作为无障碍功能的开关这样的话,点击一下这个a标签,就开启了无障碍功能啦,就能出现第一张效果图啦 <a id="wzayd" title="网站信息无障碍工具条" href="javascript:;" class="wzayd" accesskey="g">无障碍阅读</a>可以自己给a标签开关加点样式 线上演示效果和效果代码
|