VueUse

VueUse官网地址https://vueuse.org/open in new window

==这里就列举常用工具详情请去官网 查看所有API==

浏览器

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还在实验阶段无法使用,
        <a
          href="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>