vueUse,vue mouse
本文主要介绍VueUse的实现示例，以简化您的依赖关系。有需要的朋友可以参考一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
使用前先安装网页的全屏剪贴板和拾色器，本地拖拽元素，缓存其他安全区域，动态修改favicon。
引言
VueUse是基于Composition API的效用函数集合，支持Vue2和Vue3。使用它可以帮助我们快速实现日常开发中的一些常见需求。本文将分享并列举几种常见的需求通过VueUse来实现，让大家感受一下它的魅力！
使用前安装
Vue3:
npm i @vueuse/core - save
如果是Vue2，需要另外安装@vue/composition-api。
npm i @vue/composition-api -保存
网页全屏
在后台管理系统中，经常会有打开网页全屏的功能，大部分都是使用screenfull插件实现的。
VueUse为我们提供了相关的API，方便我们实现全屏网页。
模板
el-button @click=切换
{{ isFullscreen？退出全屏:打开全屏 }}
/el-button
/模板
脚本语言设置
从“@vueuse/core”导入{ useFullscreen }
const { isFullscreen，toggle }=useFullscreen()
/脚本
UseFullscreen还支持传入一个元素，这样只有元素区域才会全屏显示。
模板
el-button @click=切换
全屏打开
/el-button
让我全屏显示/div
/模板
脚本语言设置
从“@vueuse/core”导入{ useFullscreen }
const El=refHTMLElement null(null)
const { toggle }=使用全屏(el)
/脚本
剪切板
以前Vue2是用vue-clipboard2插件实现的。同样，它可以很容易地用VueUse实现。
模板
El-button @ click= onClick copy/El-button
/模板
脚本语言设置
从“@vueuse/core”导入{ useClipboard }
const { isSupported，copy }=useClipboard()
const onClick=()={
如果(受支持){
复制(我就是复制的内容)。然后(()={
console.log(复制成功)
})
}否则{
警报(“您的浏览器不支持剪贴板API”)
}
}
/脚本
取色器
模板
差异
El-button @click=open 打开颜色选择器/el-button
El-button type= primary style= width:100p x button/El-button
Color: {{ sRGBHex }}/p
/div
/模板
脚本语言设置
从“@vueuse/core”导入{ use滴管}
const { open，sRGBHex }=滴管()
/脚本
调用open函数打开颜色选择器，并在任意位置单击鼠标左键获得相应的颜色。
拖拽元素
模板
差异
ref=el
style=位置：固定；宽度：400px高度：400px背景：红色
:style=style
/div
px: {{ x }}，y:{{ y }}/p
/模板
脚本语言设置
从“@vueuse/core”导入{ useDraggable }
const El=refHTMLElement null(null)
const { x，y，style }=useDraggable(el)
/脚本
几行简单的代码可以使元素可拖动。
本地缓存
脚本语言设置
从“@vueuse/core”导入{ useStorage }
const state=useStorage(test ，{ id: xxxx ，name: james })
/脚本
上面的代码将test作为一个键存储在一个对象中，返回值是ref类型。
这个操作可以让我们不用使用原生API将json转换成string。
那么我们就可以很容易地操纵对象中的某个字段，而不需要像使用native API一样，把整个对象拿出来替换，可以说是非常舒服了。
State.value.id==abc //查看localStorage，可以发现id已经更改为abc
使用会话存储模式：
const state=useStorage(test ，{ id: xxxx ，name: james }，sessionStorage)
其他
安全区域
使用useScreenSafeArea可以轻松获得屏幕的安全区域距离，你再也不用担心刘海平和底部的安全距离了。
脚本语言设置
从“@vueuse/core”导入{ useScreenSafeArea }
const { top，right，bottom，left }=useScreenSafeArea()
/脚本
动态修改favicon
如果我们需要动态修改favicon，创建标签，添加元素，替换地址等。在项目中，虽然代码量不多，但使用以下方法显然要方便得多。
模板
El-button @click=onClick 切换图标/el-button
/模板
脚本语言设置
从“@vueuse/core”导入{ useFavicon }
从“@/assets/image/logo.png”导入徽标
const icon=useFavicon()
const onClick=()={
图标.值=徽标
}
/脚本
如上，我们可以动态设置一张图片作为网站的图标。
以上是VueUse函数精简你的依赖关系的详细内容。更多关于VueUse精简依赖关系的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。