设计科技有限公司_企业网站推广的策略_推销广告_今天大事件新闻

常用的一些api总会忘记，在此记录方便查找

@vueuse/core

import {useClipboard} from "@vueuse/core"

1. useState 状态管理 创建和管理局部状态。
2. useStorage：在 localStorage 或 sessionStorage 中存储和同步状态。
3. useMouse：获取鼠标位置  

       const {x,y} = useMouse(); //获取到该点的x y坐标

4. useTitle：动态设置文档标题。
5. useFavicon：动态设置网页的 favicon。
6. useFetch：进行 HTTP 请求。
7. useWebSocket：使用 WebSocket 进行实时通信。
8. useInterval：定时器
9. useTimeout：延时器。
10. useTransition：处理过渡效果。
11. useSpring：实现弹簧动画。
12. useDebounce：防抖函数。
13. useThrottle：节流函数。
14. 监听鼠标按下 useMousePressed()

    <script setup>
    const { pressed } = useMousePressed()
    </script><template><p>{{ pressed }}</p>
    </template>

15. 获取鼠标选择的文字 useTextSelection() 

    <script setup>
    const state = useTextSelection()
    </script><template><p>一段供鼠标选择的文字</p><p>被鼠标选择的文字是：{{ state.text }}</p>
    </template>

16. // 获取滚动条坐标 const { x, y } = useWindowScroll({ behavior: 'smooth' })
17. 元素滚动条 useScroll()  const el = ref<HTMLElement | null>(null) const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
18. useClipboard  //复制到剪贴板 

    <script setup lang="ts">
    const { copy, copied, isSupported, text } = useClipboard()
    //copy 复制的方法
    //copied 是否完成复制
    //isSupported 浏览器是否支持复制到剪贴板
    //text 复制到剪贴板的内容let msg = '你好'async function doCopy() {copy(msg)if (copied) {alert('已复制到剪贴板！')}
    }
    </script><template><div class="p-20"><p>{{ msg }}</p><p v-if="text">已复制到剪贴板的内容：{{ text }}</p><button v-if="isSupported" @click="doCopy">复制</button></div>
    </template>

19. 暂停代码执行 promiseTimeout 

    import { promiseTimeout } from '@vueuse/core'
    async function print() {// 开启 console 的默认计时器console.time()// 打印当前 console默认计时器 的时间console.timeLog()// 等待1s后执行await promiseTimeout(1000)// 打印当前 console默认计时器 的时间console.timeLog()
    }
    print()

20. 获取联网信息 useNetwork()  

    const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()

21. 判断是否联网 useOnline() 

    const online = useOnline()