VueUse

VueUse是一款基于组合式API的函数集合。

• 参考
  • VueUse - 基于Vue组合式API的实用工具集

useRefHistory

跟踪 ref 的更改历史，提供撤消和重做功能。

Usage

import { ref } from 'vue';
import { useRefHistory } from '@vueuse/core';

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

在VUE内部, 当ref被修改时, watch会异步触发一个历史点，并将同一个tick内的多个修改组合在一起处理。

counter.value += 1;

await nextTick();
console.log(history.value);
/* [
  { snapshot: 1, timestamp: 1601912898062 },
  { snapshot: 0, timestamp: 1601912898061 }
] */

您可以使用undo将ref值重置为最后一个历史点。

console.log(counter.value); // 1
undo();
console.log(counter.value); // 0

• 参考
  • VueUse - useRefHistory

useDraggable

使元素可拖拽。

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { useDraggable } from '@vueuse/core';

const el = ref<HTMLElement | null>(null);

// `style` will be a helper computed for `left: ?px; top: ?px;`
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 },
});
</script>

<template>
  <div ref="el" :style="style" style="position: fixed">Drag me! I am at {{ x }}, {{ y }}</div>
</template>

Component Usage

<template>
  <UseDraggable v-slot="{ x, y }" :initial-value="{ x: 10, y: 10 }"> Drag me! I am at {{ x }}, {{ y }} </UseDraggable>
</template>

该函数还通过@vueuse/components提供了一个无渲染的组件版本，可以通过给组件添加storageKey和storageType启用元素位置的持久性。

<template>
  <UseDraggable storage-key="vueuse-draggable" storage-type="session"> Refresh the page and I am still in the same position! </UseDraggable>
</template>

• 参考
  • VueUse - useDraggable

useIntersectionObserver

响应式监听目标元素的可见性。

Usage

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

const target = ref(null);
const targetIsVisible = ref(false);

const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
  targetIsVisible.value = isIntersecting;
});
</script>

<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>

• 参考
  • VueUse - useDraggable

onClickOutside

监听元素外部的点击事件，对模态框和下拉菜单很有用。

Usage

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

const target = ref(null);

onClickOutside(target, event => console.log(event));
</script>

<template>
  <div ref="target">Hello world</div>
  <div>Outside element</div>
</template>

此功能使用了Event.composedPath()，IE 11、Edge 18 及更低版本是不支持的这个方法的。

Component Usage

<template>
  <OnClickOutside
    :options="{
      ignore: [
        /* ... */
      ],
    }"
    @trigger="count++"
  >
    <div>Click Outside of Me</div>
  </OnClickOutside>
</template>

Directive Usage

<script setup lang="ts">
import { ref } from 'vue';
import { vOnClickOutside } from '@vueuse/components';

const modal = ref(false);
function closeModal() {
  modal.value = false;
}
</script>

<template>
  <button @click="modal = true">Open Modal</button>
  <div v-if="modal" v-on-click-outside="closeModal">Hello World</div>
</template>

还可以将处理程序设置为数组。

<script setup>
import { ref } from 'vue';
import { vOnClickOutside } from '@vueuse/components';

const modal = ref(false);

const ignoreElRef = ref();

const onClickOutsideHandler = [
  ev => {
    console.log(ev);
    modal.value = false;
  },
  { ignore: [ignoreElRef] },
];
</script>

<template>
  <button @click="modal = true">Open Modal</button>

  <div ref="ignoreElRef">click outside ignore element</div>

  <div v-if="modal" v-on-click-outside="onClickOutsideHandler">Hello World</div>
</template>

• 参考
  • VueUse - useDraggable