vueuse笔记-Browser

useEyeDropper

在web中创建吸管工具
用法示例:

<template>
<div>
  吸到的颜色:{{sRGBHex}},  isSupported:{{isSupported}}
  <a-button @click="open()">开启吸管工具 </a-button>
</div>
</template>
import { useEyeDropper } from '@vueuse/core'
const { isSupported, open, sRGBHex } = useEyeDropper()

useFavicon

修改网页的favicon图标
用法示例:

import { useFavicon } from '@vueuse/core'
const icon = useFavicon()
icon.value = 'src/assets/imgs/logo.png' // change current icon

useFileDialog

轻松打开文件对话框,实现上传文件功能
用法示例:

<template>
    <a-button>选择文件</a-button>
    <p>上传的文件:{{myfile}}</p>
</template>
<script>
import { useFileDialog } from '@vueuse/core'
const { files, open, reset, onChange } = useFileDialog()
const myflile = ref(null);
onChange((files) => {
  myflile.value = files[0].name
})
</script>

useFileSystemAccess

使用FileSystemAccessAPI创建和读写本地文件（谷歌浏览器低版本不支持）
用法参考: github.com/vueuse/vueu…

useFullscreen

响应式全局APT,添加了以全屏模式显示特定元素的方法，并在不再需要该元素时退出全屏模式。实现了用户的整个屏幕来呈现所需的内容的功能
用法示例：

<template>
 <div>
  isFullscreen:{{isFullscreen}}
  <a-button @click="toggle()">切换全屏模式</a-button>
  <a-button @click="enter()">进入全屏模式</a-button>
  <a-button @click="exit()">退出全屏模式</a-button>
 </div>
</template>

<script setup>
import {useFullscreen} from '@vueuse/core'
const {isFullscreen,enter,exit,toggle} = useFullscreen();
</script>

useImage

在浏览器中加载一个图像，在图像未加载出来之前可以添加一个loading

<template>
<span v-if="isLoading">Loading</span>
<img v-else :src="imgUrl"></img>
</template>
<script>
  import {useImage} from '@vueuse/core'
  const imgUrl = 'http:xxxx.png'
  const {isLoading} = useImage({src:imgUrl},{delay:1000})
</script>