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

约定不等于承诺〃 2023-01-22 15:49 16阅读 0赞

VueUse官网地址[https://vueuse.org/][https_vueuse.org]

这里就列举常用工具详情请去官网 查看所有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>

[https_vueuse.org]: https://vueuse.org/