元素 ​

<template>
  <div>Hello</div>
</template>
<script setup>
import { useDocumentVisibility } from "@vueuse/core";
import { watch } from "vue";
const winVisibility = useDocumentVisibility();
watch(
  () => winVisibility.value,
  val => {
    console.log("winVisibility", val);
  }
);
</script>
<style lang="less"></style>

<template>
  <div>
    Hello
    <input type="text" placeholder="1" />
  </div>
</template>
<script setup>
import { useActiveElement } from "@vueuse/core";
import { watch } from "vue";
const activeEl = useActiveElement();
watch(
  () => activeEl.value,
  val => {
    console.log("activeEl", val);
  }
);
</script>
<style lang="less"></style>

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

<script>
import { ref } from "vue";
import { useElementVisibility } from "@vueuse/core";

export default {
  setup() {
    const target = ref(null);
    const targetIsVisible = useElementVisibility(target);

    return {
      target,
      targetIsVisible,
    };
  },
};
</script>

<template>
  <div class="app" @click="log('app')">
    <div class="box" ref="boxRef" :style="style" @click="log('Draggable')">
      <div class="children" @click="log('children')"></div>
    </div>
  </div>
</template>
<script setup>
import { useDraggable } from "@vueuse/core";
import { ref, watchEffect } from "vue";
const boxRef = ref(null);
const { x, y, style } = useDraggable(boxRef, {
  initialValue: { x: 20, y: 20 }, // 初始位置
  exact: false, // 仅在点击被绑定的元素时才拖动 (子元素点击无效)
  preventDefault: false, // 阻止默认行为
  stopPropagation: false, // 阻止捕获和冒泡阶段中当前事件的进一步传播
  onStart: (position, event) => {
    console.log("on onStart", position, event);
  },
  onMove: () => {},
  onEnd: () => {},
});
const log = str => {
  console.log(str);
};
watchEffect(() => {
  console.log("x", x.value, "y", y.value, "style", style.value);
});
</script>
<style>
.app {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.box {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: black;
}

.children {
  width: 20px;
  height: 20px;
  background: red;
}
</style>

<template>
  <div class="app">
    <div class="box" ref="boxRef"></div>
  </div>
</template>
<script setup>
import { useDropZone } from "@vueuse/core";
import { ref, watchEffect } from "vue";
const boxRef = ref(null);
const { isOverDropZone } = useDropZone(boxRef, file => {
  console.log("on-drop", file);
});
watchEffect(() => {
  console.log("isOverDropZone", isOverDropZone.value);
});
</script>
<style>
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.box {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: black;
}
</style>

<template>
  <div class="app">
    <div class="box" ref="boxRef"></div>
  </div>
</template>
<script setup>
import { useElementBounding } from "@vueuse/core";
import { ref, watchEffect } from "vue";
const boxRef = ref(null);
const { x, y, top, right, bottom, left, width, height } = useElementBounding(boxRef);
watchEffect(() => {
  console.log(x.value, y.value, top.value, right.value, bottom.value, left.value, width.value, height.value);
});
</script>
<style>
.app {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.box {
  position: absolute;
  top: -40px;
  width: 300px;
  height: 300px;
  background-color: black;
}
</style>

<template>
  <div ref="el">Height: {{ height }} Width: {{ Width }}</div>
</template>

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

export default {
  setup() {
    const el = ref(null)
    const { width, height } = useElementSize(el)

    return {
      el,
      width,
      height,
    }
  }
})
</script>