VueUse好用的函数(1)——Browser类

前言

vue3出来也蛮久了，渐渐的成为了主流，团队中也开始使用了起来。 vue3函数式编程理念，和react有了相似之处。

在用react开发时，各种hooks封装使得开发效率大大提升。vue3也有一些类似的hooks库，就比如最近发现的VueUse，订阅数蛮多，不知可用性如何，也没看到中文官网，函数太多了，有的实用性不强，有的不清楚如何使用，在此记录一下我认为可用性强一点的函数吧。

安装

使用npm 或cnpm安装即可。

npm i @vueuse/core

函数总览

函数分为几大类。分别是

• Browser
• Sensors
• Animation
• State
• Elements
• Component
• Watch
• Network
• Utilities
• Misc

browser 类

useClipboard 剪贴板

提供响应剪贴板命令（剪切、复制和粘贴）以及异步读取和写入系统剪贴板的功能。

import { useClipboard } from '@vueuse/core'

const source = '我是剪贴板的内容'
const { text, copy, copied, isSupported } = useClipboard({ source })

或者

import { useClipboard } from '@vueuse/core'

const { text, copy, copied, isSupported } = useClipboard()；
copy('我是剪贴板的内容')

useEyeDropper 取色器

取色器，和浏览器调试工具中的取色一样。

<template>
    <UseEyeDropper v-slot="{ isSupported, sRGBHex, open }">
        <button :disabled="!isSupported" @click="open">
            sRGBHex: {{ sRGBHex }}
        </button>
    </UseEyeDropper>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useEyeDropper } from '@vueuse/core';
import { UseEyeDropper } from '@vueuse/components'

export default defineComponent({
    name: '',
    components: {
        UseEyeDropper
    },
    setup() {
        const { isSupported, open, sRGBHex } = useEyeDropper();
        return {
            isSupported,
            open,
            sRGBHex,
        };
    },
});
</script>

useFavicon 导航栏图标

设置浏览器标签上的icon,无法获取，只能修改。

import { useFavicon } from '@vueuse/core'

const icon = useFavicon()

icon.value = 'dark.png' // change current icon

useFullscreen 全屏

dom全屏，进入和退出，切换方法

const el = ref<HTMLElement | null>(null)

const { isFullscreen, enter, exit, toggle } = useFullscreen(el)

<video ref='el'>

useMediaControls 媒体标签参数

可获取媒体组件video的参数，具体参数参考文档接口。

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useMediaControls } from '@vueuse/core'

const video = ref()
const { playing, currentTime, duration, volume } = useMediaControls(video, { 
  src: 'video.mp4',
})

// Change initial media properties
onMounted(() => {
  volume.value = 0.5
  currentTime.value = 60
})
</script>

<template>
  <video ref="video" />
  <button @click="playing = !playing">Play / Pause</button>
  <span>{{ currentTime }} / {{ duration }}</span>
</template>

useMediaQuery 媒体查询

响应式媒体查询，宽度/暗黑模式

import { useMediaQuery } from '@vueuse/core'

const isLargeScreen = useMediaQuery('(min-width: 1024px)')
const isPreferredDark = useMediaQuery('(prefers-color-scheme: dark)')

usePreferredColorScheme 系统主题

获取系统主题模式。light|dark|no-preference

import { usePreferredColorScheme } from '@vueuse/core'

const preferredColor = usePreferredColorScheme()

useShare 分享

响应式 Web Share API。浏览器提供可以共享文本或文件内容的功能。

import { useShare } from '@vueuse/core'

const { share, isSupported } = useShare()

function startShare() {
  share({
    title: 'Hello',
    text: 'Hello my friend!',
    url: location.href,
  })
}

useUrlSearchParams 路由参数

获取url中query参数，或者设置query参数

import { useUrlSearchParams } from '@vueuse/core'

const params = useUrlSearchParams('history') //history模式
const params = useUrlSearchParams('history') //hash模式

console.log(params.foo) // 'bar'
params.foo = 'bar'
params.vueuse = 'awesome'
// url updated to `?foo=bar&vueuse=awesome`

以上就是browser分类中的一些函数啦，有一些没写到的，有的是实用性不强，也有的不清楚如何使用哈~后续的函数再抽空补充。