VueUse Browser 浏览器相关方法

VueUse Browser 浏览器相关方法。

useBluetooth 蓝牙函数

VueUse useBluetooth Vue 蓝牙相关的函数

点击访问>>

useBreakpoints 网页网格断点

Vue useBreakpoints 响应式网页网格断点,我们为了让网页适配各种屏幕尺寸,通常用响应式的CSS库,比如Tailwind样式库,useBreakpoints可以让你知道当前布局的规格。

点击访问>>

useBroadcastChannel 跨网页通讯

VueUse useBroadcastChannel 实现 Vue的跨网页通讯,当浏览器打开同一域名下的多个网页时,可以通过该API进行数据通讯传输数据,比如我在工作中遇到的一个场景禁止多个选项卡下登录系统就可通过该API实现,还有大家经常用的音乐网站在A网页点击播放,它可以在B网页的播放列表进行播放也是这个原理。

点击访问>>

useBrowserLocation 响应式location

VueUse useBrowserLocation 响应式 location,如果你用的Vue Router,那么请改用Vue Router提供的useRoute。

点击访问>>

useClipboard 粘贴复制

Vue 通过 VueUse 的 useClipboard 实现粘贴复制,是我们开发中最常用的到的,VueUse 提供了响应式的剪贴板API,提供响应剪贴板命令(剪切、复制和粘贴)以及异步读取和写入系统剪贴板的能力。

点击访问>>

useColorMode 皮肤颜色切换

VueUse useColorMode 皮肤颜色切换并可以在下次打开保持状态,比如可以把网页设置成深色模式、高亮模式等,实现原理是在html标签上加上class样式的名称,需要你自己实现各种模式下的样式。

点击访问>>

useCssVar 修改css变量

Vue修改css变量可以通过VueUse的useCssVar来实现,我们可以使用useCssVar来实现修改局部css变量和全局css变量。

点击访问>>

useEventListener 事件监听

VueUse useEventListener 事件监听,在mounted事件注册事件监听在unmounted注销监听。

点击访问>>

useEyeDropper 取色器

Vue 取色器可以通过VueUse的useEyeDropper实现,它是EyeDropper API的响应式封装。

点击访问>>

useFavicon 设置浏览器窗口图标

Vue 通过 VueUse 的 useFavicon 设置浏览器窗口icon图标。

点击访问>>

useFileDialog 文件选择器

VueUse useFileDialog 文件选择器,你可以配置允许用户上传文件扩展名和是否多选等选项。

点击访问>>

useFileSystemAccess 操作本地文件

Vue 通过 useFileSystemAccess 操作本地文件,你可以读取本地电脑的文件内容、文件名、大小等属性,你还可以修改文件内容或创建文件。

点击访问>>

useFullscreen 全屏模式

Vue 通过 useFullscreen 实现全屏模式,相当于F11的功能,你可以指定某个元素设置全屏模式。

点击访问>>

useGamepad 游戏手柄

VueUse useGamepad 游戏手柄,为Gamepad API提供响应式绑定。

点击访问>>

useImage 图片

Vue 通过 VueUse useImage 实现响应式的加载图片,它可以响应式的获取图片价值的状态,比如加载中、加载失败。

点击访问>>

useMediaControls 视频音频控制

VueUse useMediaControls 响应式的视频音频控制。

点击访问>>

useMediaQuery 媒体查询

VueUse useMediaQuery 是一个 CSS 媒体查询钩子,用于响应式。使用这个功能我们可以在 Vue 中使用 useMediaQuery 还行 CSS 媒体查询。

点击访问>>

useMemory 响应式内存信息

VueUse useMemory 响应式内的存信息,可以获取当前网页内存使用情况以及可使用的额度。

点击访问>>

useObjectUrl 响应式对象URL

VueUse useObjectUrl 响应式对象URL,通过URL.createObjectURL()为File、Blob或MediaSource对象创建URL,组件卸载时通过revokeObjectURL()自动释放URL。

点击访问>>

usePerformanceObserver 性能指标

VueUse usePerformanceObserver 性能指标,usePerformanceObserver 可用于获取性能相关的数据,例如首帧fp、首屏fcp、首次有意义的绘制 fmp等等。

点击访问>>

usePermission 判断 api 权限

通过 VueUse usePermission 来 Vue 判断有没有相机、陀螺仪、麦克风等 api 权限。

点击访问>>

usePreferredColorScheme 获取系统主题

VueUse usePreferredColorScheme Vue2/Vue3 获取系统主题

点击访问>>

usePreferredContrast 色彩对比度

usePreferredContrast 是 CSS 媒体功能,用来检测用户是否要求将内容以更高或者更低的对比度进行呈现,有三个值no-preference:默认值,不作任何变化,less:期望使用对比度更低的界面,more:期望使用对比度更高的界面。

点击访问>>

usePreferredDark 黑暗主题

VueUse usePreferredDark 响应式系统主题是否是黑暗主题,在windows10中个性化设置里面开启或关闭高对比可以查看效果。

点击访问>>

usePreferredLanguages 用户系统语言

VueUse usePreferredLanguages 获取当前用户系统的语言,如果你可以根据用户使用的语音提示用户切换到对应的站点,你可以访问苹果或微软的官网试试看。

点击访问>>

useScreenOrientation 屏幕方向API

VueUse useScreenOrientation 屏幕方向相关API,获取用户当前屏幕方向的信息。

点击访问>>

useScreenSafeArea 屏幕安全区域

VueUse useScreenSafeArea ,由于现在很多手机有刘海屏和水滴屏,我们可以通过该方法来获取屏幕安全区域更好的适配手机。

点击访问>>

useScriptTag 动态加载js文件

在Vue框架中我们可以使用VueUse useScriptTag 来动态加载js文件,可以自动加载也可以由你手动控制何时加载js文件,当Vue组件卸载时间自动卸载已加载的文件。

点击访问>>

useShare 分享功能

VueUse useShare 分享网页功能,它可以让你从一个网页分享文本、链接\文件到设备上安装的其他应用程序。

点击访问>>

useStyleTag 动态注入CSS

Vue 通过 VueUse 的 useStyleTag 实现动态注入 css 样式,你可以动态加载css样式。

点击访问>>

useTextareaAutosize textarea自适应高度

Vue 通过 VueUse 的 useTextareaAutosize 实现 textarea 文本域自适应高度,当然输入的文字内容超过 textarea 默认高度时会自动撑开该元素的高度。

点击访问>>

useUrlSearchParams 获取设置URL参数

Vue useUrlSearchParams 获取和设置url参数,这是一个非常有用的函数,我们在实际开发中经常或需要获取url参数的值,当然我们可以通过vue的路由和页面的属性获取,但是无法进行修改该参数,而useUrlSearchParams则是响应式的可以进行修改。

点击访问>>

useTextDirection 文字方向

useTextDirection 响应式 html dir 属性来控制文字方向。

点击访问>>

useTitle 修改网页标题

在 Vue 中你可以通过 useTitle 来修改网页的标题,当与 Nuxt3 一起使用时,这个函数将不会自动导入, 如果你想使用 VueUse 中的函数,请使用显式导入。

点击访问>>

useVibrate 手机振动功能

现在的手机基本都支持振动功能,通过useVibrate我们可以知道当前手机是否支持振动和调用vibrate方法让手机振动起来。

点击访问>>

useWakeLock 防止屏幕变黑或锁屏

Vue useWakeLock 防止屏幕变黑或锁屏,我们可以用在用户不操作网页但是需要屏幕一直高亮和不锁屏幕的场景中,比如大屏显示、播放视频或音乐。

点击访问>>

useWebNotification 显示桌面通知

Vue useWebNotification 显示桌面通知,当用户打开我们的网页后又去浏览其他网页,这时你发送一个桌面通知可以把用户来回到我们的网页。

点击访问>>

useWebWorker 创建多线程任务

VueUse useWebWorker JS创建多线程任务,JavaScript采用的是单线程模型,而Web Worker可以给js创建多线程的环境,那么当需要长时间耗时的任务就可以交给webworker去执行,而主线程就不会被阻塞。

点击访问>>

useWebWorkerFn 多线程函数

useWebWorkerFn 可以独立于UI主线程运行,当执行耗时长或专用大量消耗计算资源的方法时并不会阻塞UI交互,这样程序交互更顺滑,使用 Promise 语法。

点击访问>>