VueUse的一些实用功能

官方文档

https://vueuse.nodejs.cn/guide/
https://github.com/vueuse/vueuse

安装

npm i @vueuse/core

使用例子

复制

import { ref } from  vue 
import { useClipboard } from  @vueuse/core 
const coord = ref( 点击我可以复制数据 );
const { copy } = useClipboard({ coord })
function handleCopy() {
  copy(coord.value)
  console.log( 复制成功 )
}

<span style="cursor: pointer;" @click="handleCopy">{{ coord }}</span>

全屏

import { useFullscreen } from  @vueuse/core 
const { isFullscreen, toggle } = useFullscreen()

<div style="cursor: pointer;" @click="toggle">{{ isFullscreen ?  退出全屏  :  显示全屏  }}</div>

修改Title

import { useTitle } from  @vueuse/core 
const title =  修改页面的Title 
useTitle(title)

获取外观（深色或浅色）

import { useDark } from  @vueuse/core 
const isDark = useDark()

<div>{{ isDark ?  深色外观  :  浅色外观  }}</div>

数字加载动画

import { ref } from  vue 
import { useTransition, TransitionPresets } from  @vueuse/core 
const num = ref(0)
const output = useTransition(num, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})

num.value = 5000

const changeNumber = () => {
  num.value = Math.random() * 10000
}

<div @click="changeNumber" style="cursor: pointer;">
  点击显示随机数字：{{ Math.round(output) }}
</div>