Etc.End的博客

点击切换以后发现页面变成深色模式，html和Local Storage对应的值也都发生了改变。来回切换也是没有任何问题的。的存储值（key 是可自定义的）。从而设置html的class。VueUse的官方案例使用了。官网可以看到，它自己就带有暗黑主题，我们只需要在 html 上添加一个名为。例子中使用的vue3写法，因为我做了配置，对应的api自己手动引入一下。欢迎一起学习，一起成长。所以选择使用useDark工具那就太方便了。，要实现深色主题的切换前提就得在项目中先安装。的依赖，并且在项目中进行注册。..

的一个只读属性，它返回一个 MediaDevices 对象，里面呢可以对设备的相机、麦克风等媒体输入进行连接访问，同时还可以进行屏幕共享。这样使用起来呢就更加的方便了。这里我们就做一个跟useDisplayMedia一样的屏幕共享的demo，但是我们在它的基础上增加视频录制、并且下载到本地的功能。这个就比较好玩，比如说你像录制自己玩游戏的视频，或者说一些比较短的视频、音乐等等的录制，你可以对这个demo做一些深入的改造。是没有办法正常使用相关的API，比如你的ip是192.**.**.**。........

看到这个工具的时候，我的第一想法是让我的全局设置变成一个可自由摆放，自由拖拽的小组件。同样，你还可以去实现弹出框，对话框的自由拖拽等等。自由发挥现象，反正有了这个工具你少写很多代码，而且减少bug风险，毕竟是vue官方工具。这里只是一个简单的demo，没有去处理窗口大小变化的时候，所以感兴趣的小伙伴可以自行往下扩展。下面的代码为useDraggable的部分源码，可以看到。参数是一个对象，里面有初始值，拖拽方式，监听事件等等。感兴趣的可以去看看源码。官方给出的demo，感兴趣的可以去VueUse官网看看。.

响应式获取当前时间。如果使用JavaScript实现一个动态时间显示的话。你得写不少代码。比如获取当前时间new Date()，再获取年月日等等，你还得使用setTimeout写个定时器不停的刷新元素。但是useNow帮我们封装好了，现在你只需要两行代码即可实现。简直不要太方便😍useNow返回的是一个Date类型（日期对象）上图可以看到，每一秒都是变化的，说明是响应式的，但是呢日期格式并没有处理。贴心的为你准备日期格式化工具。。你不用再自己封装，我们常用的日期格式化它都能满足。......