vueuse的常用方法记录

1. useStorage(key, value): 响应式的LocalStorage

   // 初始化 useLocalStorage，传入 key 和默认值
   const storedValue = useStorage('my-key', 'default-value');
   
   // 监听存储值的变化
   watch(storedValue, (newValue, oldValue) => {
     console.log('存储值从', oldValue, '变更为', newValue);
   });
   

2. 获取当前聚焦的元素

   const activeElement = useActiveElement()
   
   watch(activeElement, (el) => {
     console.log('当前活动元素是', el)
   })
   

3. 记录Ref的变化，并且可以撤销和重做

   const counter = ref(0)
   const { history, undo, redo } = useRefHistory(counter)
   

4. 监听页面显示隐藏

   const visibility = useDocumentVisibility()
   watch(visibility, (newValue, oldValue) => {
     console.log('文档可见性从', oldValue, '变更为', newValue)
   })
   

5. 监听具体元素的拖动

   const el = ref<HTMLElement | null>(null)
   
   // `style` 将作为 `left: ?px; top: ?px;` 的辅助计算属性
   const { x, y, style } = useDraggable(el, {
     initialValue: { x: 40, y: 40 },
   })
   

6. 检测目标元素的可见性。

   const target = ref(null)
   
   const { stop } = useIntersectionObserver(
     target,
     ([{ isIntersecting }], observerElement) => {
       if (isIntersecting ) {
       	// 可见
       } else {
       	// 不可见
       }
     },
   )
   

7. 监听鼠标事件

   const target = ref(null)
   
   const { x, y, isOutside } = useMouseInElement(target)
   

8. 获取当前的响应式窗口大小

   const { width, height } = useWindowSize()
   

9. 获取蓝牙API

   const {
     isSupported,
     isConnected,
     device,
     requestDevice,
     server,
   } = useBluetooth({
     acceptAllDevices: true,
   })
   

10. 剪贴板：useClipboard
11. 打开取色器：

    const { isSupported, open, sRGBHex } = useEyeDropper()
    

12. 插入div和样式

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

13. 根据内容自动更新 textarea 的高度。

    <script setup lang="ts">
    const { textarea, input } = useTextareaAutosize()
    </script>
    
    <template>
      <textarea
        ref="textarea"
        v-model="input"
        class="resize-none"
        placeholder="想说点什么？"
      />
    </template>
    

14. 设备震动

    // 这会让设备振动 300 毫秒
    // 然后在振动设备另外 300 毫秒之前暂停 100 毫秒：
    const { vibrate, stop, isSupported } = useVibrate({ pattern: [300, 100, 300] })
    
    // 开始振动，当模式完成时，它将自动停止：
    vibrate()
    
    // 但是如果你想停止它，你可以：
    stop()
    

15. 监听点击事件

const target = ref(null)

onClickOutside(target, event => console.log(event))

16. 监听键盘

onKeyStroke('ArrowDown', (e) => {
  e.preventDefault()
})

17. 监听长按事件：onLongPress