Guoguo-notes
主页
常用笔记
vue笔记及周边生态
  • 团队协作及规范
  • 项目框架及架构
  • 飞码篇
  • Java
  • React笔记
GitHub
主页
常用笔记
vue笔记及周边生态
  • 团队协作及规范
  • 项目框架及架构
  • 飞码篇
  • Java
  • React笔记
GitHub
  • vue笔记及周边生态

    • 1. Element Plus --vue3.0.md
    • 2. Element ui 笔记.md
    • 3. Taro.md
    • 4. Vue 代码片段.md
    • 5. Vue 全局封装 main.js.md
    • 6. Vue 笔记.md
    • 7. Vue3 .md
    • 8. Vue3+Element Plus.md
    • 9. element plus 本地启动.md
    • 10. jsx tsx 代码片段.md
    • 11. jsx tsx 笔记.md
    • 12. uniapp笔记.md
    • 13. vite 笔记.md
    • 14. vite手写插件.md
    • 15. vue.js 下载文件.md
    • 16. vueuse笔记.md
    • 17. vxe-table笔记.md
    • 18. 代码片段 - 解析数学公式.md
    • 19. 常用插件.md
    • 20. 汇智腾远笔记.md
    • 21. 视频播放插件.md

vueuse --> @vueuse/core

安装

npm i @vueuse/core

useDebounceFn(防抖)

防抖是指当一个事件被触发后,在一定时间内如果该事件再次被触发,那么就会取消前一次的操作,重新开始计时。(防止在短时间内频繁触发事件导致页面性能下降)

<template>
  <div>
    <div>{{ counter }}</div>
    <button @click="addNum">add</button>
  </div>
</template>
<script lang="ts" setup>
import { useDebounceFn } from "@vueuse/core";
const counter = ref(0);
const handleAddFun = () => {
  counter.value += 1;
};
const addNum = useDebounceFn(handleAddFun, 300, { maxWait: 5000 });
</script>

useFullscreen(全屏)

<template>
  <button @click="toggle">全屏</button>
</template>
<script lang="ts" setup>
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, toggle } = useFullscreen()
console.log('isFullscreen ===>', isFullscreen)
</script>

useClipboard (剪切板功能)

<template>
 <div>
   <input v-model="input" type="text" />
   <button @click="copy(input)">Copy</button>
 </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useClipboard } from "@vueuse/core";
const input = ref("");
const { text, copy, isSupported } = useClipboard();
// text: 复制的内容; copy: 复制函数; isSupported: 当前的浏览器是否支持这个api
</script>

useColorMode(切换主题颜色)

<template>
	<div>
	  <div :class="mode" style="width: 40px; height: 40px"></div>
      <button @click="btn">切换主题色</button>
	</div>
</template>
<script lang="ts" setup>
import { useColorMode } from "@vueuse/core";
const mode = useColorMode();
const btn = () => {
  mode.value = mode.value === "light" ? "dark" : "light";
};
</script>
<style>
.light {
  background-color: #ccc;
}
.dark {
  background-color: #333;
}
</style>

useWindowSize(响应式获取窗口尺寸)

<template>
	<div>
	  <div>{{ width }}-{{ height }}</div>
	</div>
</template>
<script lang="ts" setup>
import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();
</script>

onClickOutside 检测区域之外的的点击事件

<script setup>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

const container = ref(null)
onClickOutside(container, () => alert('Good. Better to click outside.'))
</script>

<template>
  <div>
   <p>Hey there, here's some text.</p>
    <div style="background-color: pink;;" ref="container">
      <p>Please don't click in here.</p>
    </div>
  </div>
</template>

useStorage 自动同步到 localstorage

useStorage真的很酷,因为它会自动将 ref 同步到 localstorage,事例如下:

<script setup>
import { useStorage } from '@vueuse/core'
const input = useStorage('unique-key', 'Hello, world!')
</script>

<template>
  <div>
    <input v-model="input" />
  </div>
</template>
Edit this page
Last Updated:
Contributors: 袁果锅
Prev
15. vue.js 下载文件.md
Next
17. vxe-table笔记.md