- useStorage(key, value): 响应式的LocalStorage
javascript">
const storedValue = useStorage('my-key', 'default-value');
watch(storedValue, (newValue, oldValue) => {console.log('存储值从', oldValue, '变更为', newValue);
});
- 获取当前聚焦的元素
javascript">const activeElement = useActiveElement()watch(activeElement, (el) => {console.log('当前活动元素是', el)
})
- 记录Ref的变化,并且可以撤销和重做
javascript">const counter = ref(0)
const { history, undo, redo } = useRefHistory(counter)
- 监听页面显示隐藏
javascript">const visibility = useDocumentVisibility()
watch(visibility, (newValue, oldValue) => {console.log('文档可见性从', oldValue, '变更为', newValue)
})
- 监听具体元素的拖动
javascript">const el = ref<HTMLElement | null>(null)
const { x, y, style } = useDraggable(el, {initialValue: { x: 40, y: 40 },
})
- 检测目标元素的可见性。
javascript">const target = ref(null)const { stop } = useIntersectionObserver(target,([{ isIntersecting }], observerElement) => {if (isIntersecting ) {} else {}},
)
- 监听鼠标事件
javascript">const target = ref(null)const { x, y, isOutside } = useMouseInElement(target)
- 获取当前的响应式窗口大小
javascript">const { width, height } = useWindowSize()
- 获取蓝牙API
javascript">const {isSupported,isConnected,device,requestDevice,server,
} = useBluetooth({acceptAllDevices: true,
})
- 剪贴板:useClipboard
- 打开取色器:
javascript">const { isSupported, open, sRGBHex } = useEyeDropper()
- 插入div和样式
javascript">const {id,css,load,unload,isLoaded,
} = useStyleTag('.foo { margin-top: 32px; }')
- 根据内容自动更新 textarea 的高度。
javascript"><script setup lang="ts">
const { textarea, input } = useTextareaAutosize()
</script><template><textarearef="textarea"v-model="input"class="resize-none"placeholder="想说点什么?"/>
</template>
- 设备震动
javascript">
const { vibrate, stop, isSupported } = useVibrate({ pattern: [300, 100, 300] })
vibrate()
stop()
- 监听点击事件
javascript">const target = ref(null)onClickOutside(target, event => console.log(event))
- 监听键盘
javascript">onKeyStroke('ArrowDown', (e) => {e.preventDefault()
})
- 监听长按事件:onLongPress