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>