vssue实用方法

浏览器

使用屏幕断点

import { useBreakpoints } from "@vueuse/core";
/**
 * 浏览器屏幕断点
 */
export const handleBreakpoints = () => {
  const breakpoints = useBreakpoints({
    xs: 0,
    sm: 768,
    md: 992,
    lg: 1200,
    xl: 1920,
    xxl: 2560,
  });
  const xs = breakpoints.between("xs", "sm");
  const sm = breakpoints.between("sm", "md");
  const md = breakpoints.between("md", "lg");
  const lg = breakpoints.between("lg", "xl");
  const xl = breakpoints.between("xl", "xxl");

  return { xs, sm, md, lg, xl };
};

复制文字

import { useClipboard } from "@vueuse/core";
/**
 * 复制文字
 * @param text 要复制的内容
 */
export const handleClipboard = (text: string) => useClipboard().copy(text);

事件监听

import { useEventListener } from '@vueuse/core'

const el = ref<HTMLElement | null>(null) // dom 元素
useEventListener(el,'click',() => {}) // 会在 dom 存在时自动注册事件，dom 被删除时会自动取消监听

取色器

import { useEyeDropper } from '@vueuse/core'
const { 
  isSupported, // 是否支持
  open, // 打开取色
  sRGBHex // 16 进制色值
} = useEyeDropper()

网站图标

import { useFavicon } from '@vueuse/core'
const icon = useFavicon()
icon.value = 'dark.png' // 修改当前网站的图标

全屏元素

import { useFullscreen } from '@vueuse/core'
const el = ref<HTMLElement | null>(null)
const { 
  isFullscreen, // 是否全屏
  enter, // 进入全屏
  exit, // 退出全屏
  toggle // 切换
} = useFullscreen(el) // 传如 dom 元素

异步加载图片

<script setup>
import { useImage } from '@vueuse/core'

const avatarUrl = 'https://place.dog/300/200'
const { isLoading } = useImage({ src: avatarUrl })
</script>

<template>
  <span v-if="isLoading">Loading</span>
  <img v-else :src="avatarUrl">
</template>

加载 script 标签

import { useScriptTag } from '@vueuse/core'
useScriptTag('https://player.twitch.tv/js/embed/v1.js',(el: HTMLScriptElement) => {

})

// 或手动控制加载
const { scriptTag, load, unload } = useScriptTag('https://player.twitch.tv/js/embed/v1.js',() => {

},{ manual: true },)

await load()
await unload()

加载 css 字符串

• 输入

import { useStyleTag } from '@vueuse/core'

const {
  id,
  css,
  load,
  unload,
  isLoaded,
} = useStyleTag('.home { margin-top: 32px; }')

css.value = '.home { margin-top: 64px; }'

• 输出

<style type="text/css" id="vueuse_styletag_1">
.foo { margin-top: 64px; }
</style>

网站标题

import { useTitle } from '@vueuse/core'

const title = useTitle('初始标题') // 可传入 computed 属性
// const title = useTitle('新标题', { titleTemplate: '%s | 默认值' }) // 新标题将会替换 %s
console.log(title.value) // 输出当前标题
title.value = 'Hello' // 修改标题

url 查询参数

• history

// 当前 url：localhost/?foo=fao
const params = useUrlSearchParams('history')
console.log(params.foo) // fao
params.foo = 'bar'
params.vueuse = 'some'
// 当前 url：localhost/?foo=bar&vueuse=awesome

• hash

const params = useUrlSearchParams('hash')
params.foo = 'bar'
params.vueuse = 'some'
// 当前 url：localhost/#/?foo=bar&vueuse=some

系统通知

import { useWebNotification } from '@vueuse/core'
const {
  isSupported, // 是否支持
  notification, // 原数据
  show,
  close,
  onClick,
  onShow,
  onError,
  onClose,
} = useWebNotification({
  title: '标题',
  body: '正文',
  dir: 'rtl', // 文本方向 "auto" | "ltr" | "rtl"
  lang: 'en', // 通知语言
  tag: 'test', // 通知 id
  icon: '', // 通知图标
  renotify: true, // 是否在新的通知替换旧的通知
  requireInteraction: false, // 是否保持活跃，直到用户点击关闭才消失
  silent: false, // 是否静音，关闭震动
  vibrate: [], // 指定具有震动的硬件发出震动
})

isSupported && show()

onClick.on(() => {
  console.log('click');
})

传感器

键盘事件

import { onKeyStroke } from '@vueuse/core'

onKeyStroke('ArrowDown', (e) => {
  console.log('按了↓');
})

// 监听多个键
onKeyStroke(['s', 'S', 'ArrowDown'], (e) => {
  console.log('按了' + e.key);
})

// 指定目标元素
onKeyStroke('A', (e) => {
  console.log('A')
}, { target:  document})

长按

import { onLongPress } from '@vueuse/core'
const el = ref()
onLongPress(el, () => {
  console.log('长按500ms');
})

onLongPress(el, () => {
  console.log('长按1000ms');
},{delay: 1000})

• 使用指令

<script setup lang="ts">
import { ref } from 'vue'
import { vOnLongPress } from '@vueuse/components'
</script>
<template>
  <button v-on-long-press="onLongPress"></button>
</template>

设备列表

import { useDevicesList } from '@vueuse/core'
const {
  devices, // 设备列表
  videoInputs, // 摄像头列表
  audioInputs, // 麦克风列表
  audioOutputs, // 扬声器列表
} = useDevicesList()

屏幕共享

import { useDisplayMedia } from "@vueuse/core";
const { isSupported, stream, enabled, start, stop } = useDisplayMedia({
  enabled: false, // 是否自动调用屏幕共享，false 为手动调用 start 方法
  video: true, // 屏幕共享
  audio: true, // 系统音频共享
});

start()

const video = ref();
watchEffect(() => {
  video.srcObject = stream.value
})

鼠标悬停

import { useElementHover } from '@vueuse/core'
const el = ref();
const isHovered = useElementHover(el)

• 指令

import { vElementHover } from '@vueuse/components'
// <button v-element-hover="onHover">
//   {{ isHovered }}
// </button>

焦点

import { useFocus } from '@vueuse/core'

const el = ref()
const { focused } = useFocus(el, { 
  initialValue: true, // 是否聚焦后出发元素上的focus事件
})
// 设置 focused 会触发聚焦与失焦

地理位置

import { useGeolocation } from '@vueuse/core'
const { 
  coords, // 经纬度
  locatedAt, // 时间
  error
} = useGeolocation()

跟踪用户空闲

import { useIdle } from '@vueuse/core'
const { idle, lastActive } = useIdle(5 * 60 * 1000) // 5 min
console.log(idle.value) // true or false  5 分钟后用户没有做任何操作则为 true

无限滚动

import { useInfiniteScroll } from '@vueuse/core'
const el = ref();
const data = ref([1,2,3,4,5,6])

useInfiniteScroll(el,() => {
  data.value.push(12)
},{ 
  direction: "bottom", // 监听方向 "top" | "bottom"
  distance: 10 // 距离边缘最小距离，默认 0
})

• 指令

import { vInfiniteScroll } from '@vueuse/components'
// <div v-infinite-scroll="onLoadMore">
//   <div v-for="item in data" :key="item">
//     {{ item }}
//   </div>
// </div>

// <!-- with options -->
// <div v-infinite-scroll="[onLoadMore, { 'distance' : 10 }]">
//   <div v-for="item in data" :key="item">
//     {{ item }}
//   </div>
// </div>

鼠标位置

import { useMouse } from '@vueuse/core'
const { x, y, sourceType } = useMouse()

网络状态

import { useNetwork } from '@vueuse/core'
const { 
  isSupported, // 是否支持
  isOnline, // 是否在线
  offlineAt, // 上次连接以来的时间
  downlink, // 下载速度
  downlinkMax, // 最大可达到的下载速度
  effectiveType, // 检测到的有效速度类型
  rtt, // 延迟
  saveData, // 用户是否激活了数据保护模式
  type // 网络类型
} = useNetwork()
console.log(isOnline.value)

网络在线

import { useOnline } from '@vueuse/core'
const online = useOnline() // 网络是否在线

页面离开

import { usePageLeave } from '@vueuse/core'
const isLeft = usePageLeave() // 鼠标是否离开页面

文本选中

import { useTextSelection } from '@vueuse/core'
const state = useTextSelection() // state.text