Vue 通过 useFileSystemAccess 操作本地文件,你可以读取本地电脑的文件内容、文件名、大小等属性,你还可以修改文件内容或创建文件。
VueUse useFileDialog 文件选择器,你可以配置允许用户上传文件扩展名和是否多选等选项。
Vue 通过 VueUse 的 useFavicon 设置浏览器窗口icon图标。
Vue 取色器可以通过VueUse的useEyeDropper实现,它是EyeDropper API的响应式封装。
VueUse useEventListener 事件监听,在mounted事件注册事件监听在unmounted注销监听。
Vue修改css变量可以通过VueUse的useCssVar来实现,我们可以使用useCssVar来实现修改局部css变量和全局css变量。
VueUse useColorMode 皮肤颜色切换并可以在下次打开保持状态,比如可以把网页设置成深色模式、高亮模式等,实现原理是在html标签上加上class样式的名称,需要你自己实现各种模式下的样式。
Vue 通过 VueUse 的 useClipboard 实现粘贴复制,是我们开发中最常用的到的,VueUse 提供了响应式的剪贴板API,提供响应剪贴板命令(剪切、复制和粘贴)以及异步读取和写入系统剪贴板的能力。
VueUse useBrowserLocation 响应式 location,如果你用的Vue Router,那么请改用Vue Router提供的useRoute。
VueUse useBroadcastChannel 实现 Vue的跨网页通讯,当浏览器打开同一域名下的多个网页时,可以通过该API进行数据通讯传输数据,比如我在工作中遇到的一个场景禁止多个选项卡下登录系统就可通过该API实现,还有大家经常用的音乐网站在A网页点击播放,它可以在B网页的播放列表进行播放也是这个原理。
Vue useBreakpoints 响应式网页网格断点,我们为了让网页适配各种屏幕尺寸,通常用响应式的CSS库,比如Tailwind样式库,useBreakpoints可以让你知道当前布局的规格。
VueUse useBluetooth Vue 蓝牙相关的函数
VueUse useWindowSize 获取窗口大小,返回响应式对象。
Vue useWindowScroll 获取窗口滚动条位置,如果你想获取某个元素的滚动条位置,请使用useScroll
Vue useWindowFocus 获取窗口是否是焦点状态,比如你切换浏览器的选项卡,那么你的网页将失去焦点。
VueUse useResizeObserver 监控元素大小的变化
Vue 通过 useParentElement 获取指定元素的父元素,如果不传入指定的元素默认为当前组件的元素。
通过 Vue 的 Vueuse 库的useMutationObserver 监视 DOM 变动,比如节点增减、属性杨思琦变动变动都会触发MutationObserver事件。
VueUse useMouseInElement 鼠标hover事件 类似 onMouseover 事件但是更强大,它会返回是否在某元素里面、鼠标位置、元素位置、宽高等信息。
Vueuse useIntersectionObserver 检测元素是否可见,与useElementVisibility不同的是你可停止检测行为。