浏览器

useFullscreen全屏展示

//isFullscreen 当前是否是全屏
//toggle  是函数直接调用即可
const { isFullscreen, toggle } = useFullscreen();

useClipboard粘贴功能

//text 粘贴的内容
//copy 是粘贴函数
const { text, copy, isSupported }
= useClipboard({ copiedDuring: 1500 });

useDark开启暗黑模式工具

这个需要自定义样式类通过 toggleDark函数控制

const isDark = useDark({selector: "body",//class渲染的标签valueDark: "dark",//暗黑class名字valueLight: "light"//高亮class名字
});
const toggleDark = useToggle(isDark);

useTitle设置标题内容

const title = useTitle()
console.log(title.value) // print current title
title.value = 'Hello' // change current title

useUrlSearchParams设置Url内容

    const params = useUrlSearchParams('history')params.foo = 'bar';params.vueuse = 'awesome';

当时我学习的案例看不懂联系我

<template><div><h1>VueUse工具插件</h1><div><input type="text" /></div><h5 @click="toggle">useFullscreen全屏展示</h5><h5>useActiveElement()当前点击的元素</h5><h5>useBreakpoints选择当前窗口范围</h5><h5>useBrowserLocation浏览器URL信息</h5><note>useClipboard 粘贴功能</note><p>当前粘贴内容:<code>{{ text || 'none' }}</code></p><input v-model="input" type="text" /><button @click="copy(input)">Copy</button><div v-if="!isSupported">你的浏览器不支持当前api</div><div><h5>useCssVar控制css变量</h5><div ref="el" style="color: var(--color)">颜色值, {{ color }}</div><button @click="switchColor">改变颜色</button></div><div><h3>开启useDark 黑暗模式</h3><button @click="toggleDark">开启暗黑模式</button></div><div><h4>useEventListener 页面卸载自动卸载监听</h4></div><div><h4>useFavicon网站图标更换 一般跟 usePreferredDark当前页面是否是暗黑主题还有useDark 一起使用</h4></div><div><h4>useFetch一款http请求插件，感觉axios的功能都有反正没什么区别感觉可能比axios方便</h4></div><div><h4>useMediaControls媒体控制器提供了自定义媒体组件的基本元素</h4></div><div><h4>useMediaQuery媒体查询跟原生html类似</h4></div><div><h4>usePermission</h4><h5>未来提高用户体验截止到2021年5月当前api还在实验阶段无法使用,<ahref="https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API">MDN Web api介绍</a></h5></div><div><h4>usePreferredColorScheme</h4><h5>查询当前配色方案 跟,useDark相关函数配合使用</h5></div><div><h4>usePreferredDark</h4><h5>当前页面是否是暗黑主题</h5></div><div><h4>useShare </h4><h5 @click="startShare">点击分享谷歌支持其他平台估计不支持</h5></div><div><h4>useTitle </h4><h5 >设置浏览器标题</h5></div><div><h4> useUrlSearchParams </h4><h5 >设置浏览器Url参数</h5><ul><li v-for='key in Object.keys(params)' :key="key">{{ key }}={{ params[key] }}</li></ul></div></div>
</template>
<script setup>
import { reactive, watch, ref } from "vue";
import {useFullscreen,useActiveElement,useBreakpoints,useBrowserLocation,useClipboard,usePermission,useCssVar,useDark,useToggle,useScriptTag ,useShare,useTitle,useUrlSearchParams
} from "@vueuse/core";
const title = useTitle()
console.log(title.value) // print current title
title.value = 'Hello' // change current title
const { share } = useShare();
function startShare() {share({title: 'Hello',text: 'Hello my friend!',url: location.href,})
};const params = useUrlSearchParams('history')params.foo = 'bar';params.vueuse = 'awesome';
const microphoneAccess = usePermission("microphone");
const breakpoints = useBreakpoints({tablet: 640,laptop: 1024,desktop: 1280
});
const isDark = useDark({selector: "body",valueDark: "dark",valueLight: "light"
});const toggleDark = useToggle(isDark);
let input = "";
let el = null;
const color = useCssVar("--color", el);
const switchColor = (color) => {color.value =color
};
const laptop = breakpoints.between("tablet", "desktop");
const location = useBrowserLocation();
const { isFullscreen, toggle } = useFullscreen();
const activeElement = useActiveElement(); //当前点击的元素
const { text, copy, isSupported } = useClipboard({ copiedDuring: 1500 });
watch(isDark, el => {console.log("是否是含黑模式", el);
});watch(activeElement, el => {console.log("focus changed to", el);
});
</script>

VueUse中文文档/Vue官方工具库相关推荐

AutoIt 在线中文文档、开发工具（GUI 图形开发工具）
AutoIt 在线中文文档.开发工具 (GUI 图形开发工具) 一.在线中文文档 1.1 官方文档翻译版 1.2 用户自定义函数 1.3 脚本之家版二.开发工具一.在线中文文档 1.1 官方文档翻 ...
python pptx库中文文档_基于python-pptx库中文文档及使用详解
个人使用样例及部分翻译自官方文档,并详细介绍chart的使用一:基础应用 1.创建pptx文档类并插入一页幻灯片 from pptx import Presentation prs = Presen ...
Backtrader官方中文文档:集成TA-Lib指标库参考
本文档参考backtrader官方文档,是官方文档的完整中文翻译,可作为backtrader中文教程.backtrader中文参考手册.backtrader中文开发手册.backtrader入门资料使 ...
VueUse 中文文档：Components 组件
在v5.0中,我们引入了一个新的包@vueuse/components,它提供了组合式函数的无渲染组件版本. Install $ npm i @vueuse/core@vueuse/component ...
Chrome 开发者工具官方中文文档
传送门 Chrome开发者工具官方中文文档 Chrome开发者工具详解前端学习front-end-study系列 Elements面板(https://zhuanlan.zhihu.com/p/24 ...
python中文昵称-官方出品 Python 中文文档！拜托，别再说看不懂了
点击" 开发者技术前线 ",选择"星标�" 在看|星标|留言, 真爱回复"666",获取一份技术人专属大礼包作者:机器之心参与:思源 ...
Python官方中文文档来了
你不一定要点蓝字关注我的机器之心报道参与:思源 Python 作为世界上最好用的语言,官方支持的文档一直没有中文.小伙伴们已经习惯了原汁原味的英文文档,但如果有官方中文文档,那么查阅或理解速度都会 ...
Python用不好？终于有官方中文文档啦
点击上方"码农突围",马上关注这里是码农充电第一站,回复"666",获取一份专属大礼包真爱,请设置"星标"或点个"在看&quo ...
Python 深度学习库 Keras 发布官方中文文档，这里有你需要了解的一切
今年1月,Keras作者.谷歌AI研究员François Chollet在推特上发出召唤:讲中文的Keras用户们,是否有人愿意帮忙一起搞个Keras文档的中文版? 一个多月后,官方中文文档来了. K ...

VueUse中文文档/Vue官方工具库

浏览器

useFullscreen全屏展示

useClipboard粘贴功能

useDark开启暗黑模式工具

useTitle设置标题内容

useUrlSearchParams设置Url内容

当时我学习的案例看不懂联系我

VueUse中文文档/Vue官方工具库相关推荐

最新文章

热门文章