VueUse Browser 浏览器相关方法。
VueUse useBluetooth Vue 蓝牙相关的函数
点击访问>>Vue useBreakpoints 响应式网页网格断点,我们为了让网页适配各种屏幕尺寸,通常用响应式的CSS库,比如Tailwind样式库,useBreakpoints可以让你知道当前布局的规格。
点击访问>>VueUse useBroadcastChannel 实现 Vue的跨网页通讯,当浏览器打开同一域名下的多个网页时,可以通过该API进行数据通讯传输数据,比如我在工作中遇到的一个场景禁止多个选项卡下登录系统就可通过该API实现,还有大家经常用的音乐网站在A网页点击播放,它可以在B网页的播放列表进行播放也是这个原理。
点击访问>>VueUse useBrowserLocation 响应式 location,如果你用的Vue Router,那么请改用Vue Router提供的useRoute。
点击访问>>Vue 通过 VueUse 的 useClipboard 实现粘贴复制,是我们开发中最常用的到的,VueUse 提供了响应式的剪贴板API,提供响应剪贴板命令(剪切、复制和粘贴)以及异步读取和写入系统剪贴板的能力。
点击访问>>VueUse useColorMode 皮肤颜色切换并可以在下次打开保持状态,比如可以把网页设置成深色模式、高亮模式等,实现原理是在html标签上加上class样式的名称,需要你自己实现各种模式下的样式。
点击访问>>Vue修改css变量可以通过VueUse的useCssVar来实现,我们可以使用useCssVar来实现修改局部css变量和全局css变量。
点击访问>>VueUse useEventListener 事件监听,在mounted事件注册事件监听在unmounted注销监听。
点击访问>>Vue 取色器可以通过VueUse的useEyeDropper实现,它是EyeDropper API的响应式封装。
点击访问>>Vue 通过 VueUse 的 useFavicon 设置浏览器窗口icon图标。
点击访问>>VueUse useFileDialog 文件选择器,你可以配置允许用户上传文件扩展名和是否多选等选项。
点击访问>>Vue 通过 useFileSystemAccess 操作本地文件,你可以读取本地电脑的文件内容、文件名、大小等属性,你还可以修改文件内容或创建文件。
点击访问>>Vue 通过 useFullscreen 实现全屏模式,相当于F11的功能,你可以指定某个元素设置全屏模式。
点击访问>>VueUse useGamepad 游戏手柄,为Gamepad API提供响应式绑定。
点击访问>>Vue 通过 VueUse useImage 实现响应式的加载图片,它可以响应式的获取图片价值的状态,比如加载中、加载失败。
点击访问>>VueUse useMediaControls 响应式的视频音频控制。
点击访问>>VueUse useMediaQuery 是一个 CSS 媒体查询钩子,用于响应式。使用这个功能我们可以在 Vue 中使用 useMediaQuery 还行 CSS 媒体查询。
点击访问>>VueUse useMemory 响应式内的存信息,可以获取当前网页内存使用情况以及可使用的额度。
点击访问>>VueUse useObjectUrl 响应式对象URL,通过URL.createObjectURL()为File、Blob或MediaSource对象创建URL,组件卸载时通过revokeObjectURL()自动释放URL。
点击访问>>VueUse usePerformanceObserver 性能指标,usePerformanceObserver 可用于获取性能相关的数据,例如首帧fp、首屏fcp、首次有意义的绘制 fmp等等。
点击访问>>通过 VueUse usePermission 来 Vue 判断有没有相机、陀螺仪、麦克风等 api 权限。
点击访问>>VueUse usePreferredColorScheme Vue2/Vue3 获取系统主题
点击访问>>usePreferredContrast 是 CSS 媒体功能,用来检测用户是否要求将内容以更高或者更低的对比度进行呈现,有三个值no-preference:默认值,不作任何变化,less:期望使用对比度更低的界面,more:期望使用对比度更高的界面。
点击访问>>VueUse usePreferredDark 响应式系统主题是否是黑暗主题,在windows10中个性化设置里面开启或关闭高对比可以查看效果。
点击访问>>VueUse usePreferredLanguages 获取当前用户系统的语言,如果你可以根据用户使用的语音提示用户切换到对应的站点,你可以访问苹果或微软的官网试试看。
点击访问>>VueUse useScreenOrientation 屏幕方向相关API,获取用户当前屏幕方向的信息。
点击访问>>VueUse useScreenSafeArea ,由于现在很多手机有刘海屏和水滴屏,我们可以通过该方法来获取屏幕安全区域更好的适配手机。
点击访问>>在Vue框架中我们可以使用VueUse useScriptTag 来动态加载js文件,可以自动加载也可以由你手动控制何时加载js文件,当Vue组件卸载时间自动卸载已加载的文件。
点击访问>>VueUse useShare 分享网页功能,它可以让你从一个网页分享文本、链接\文件到设备上安装的其他应用程序。
点击访问>>Vue 通过 VueUse 的 useStyleTag 实现动态注入 css 样式,你可以动态加载css样式。
点击访问>>Vue 通过 VueUse 的 useTextareaAutosize 实现 textarea 文本域自适应高度,当然输入的文字内容超过 textarea 默认高度时会自动撑开该元素的高度。
点击访问>>Vue useUrlSearchParams 获取和设置url参数,这是一个非常有用的函数,我们在实际开发中经常或需要获取url参数的值,当然我们可以通过vue的路由和页面的属性获取,但是无法进行修改该参数,而useUrlSearchParams则是响应式的可以进行修改。
点击访问>>useTextDirection 响应式 html dir 属性来控制文字方向。
点击访问>>在 Vue 中你可以通过 useTitle 来修改网页的标题,当与 Nuxt3 一起使用时,这个函数将不会自动导入, 如果你想使用 VueUse 中的函数,请使用显式导入。
点击访问>>现在的手机基本都支持振动功能,通过useVibrate我们可以知道当前手机是否支持振动和调用vibrate方法让手机振动起来。
点击访问>>Vue useWakeLock 防止屏幕变黑或锁屏,我们可以用在用户不操作网页但是需要屏幕一直高亮和不锁屏幕的场景中,比如大屏显示、播放视频或音乐。
点击访问>>Vue useWebNotification 显示桌面通知,当用户打开我们的网页后又去浏览其他网页,这时你发送一个桌面通知可以把用户来回到我们的网页。
点击访问>>VueUse useWebWorker JS创建多线程任务,JavaScript采用的是单线程模型,而Web Worker可以给js创建多线程的环境,那么当需要长时间耗时的任务就可以交给webworker去执行,而主线程就不会被阻塞。
点击访问>>useWebWorkerFn 可以独立于UI主线程运行,当执行耗时长或专用大量消耗计算资源的方法时并不会阻塞UI交互,这样程序交互更顺滑,使用 Promise 语法。
点击访问>>