見出し画像

VueUse#Elementsで出来ること

るらい

VueUseのリファレンスはありますので不要と思いきや
英語なのでという理由でパッと閉じてしまう人を見てしまった
そこで逆引き形式で少しずつ纏めて更新していこうと思います


はじめに

VueUse はこちらで提供されているライブラリです
難しいことは言いません、とっても便利な機能が使えるようになります

インストールは npm ではこちらです
詳しくは公式サイトを見てください

npm i @vueuse/core


アクティブ要素を取得する
(useActiveElement)

useActiveElement() を使うとアクティブな要素の HTMLElement を動的に取得できますが、HTMLElementって何？ってひとはあまり使わないかも
使わなくても何とでもなりますので

HTMLElementの詳しい内容はこちらへ

  • import
    useElementSize を @vueuse/core から import

import { useActiveElement } from '@vueuse/core'

  • 変数定義
    アクティブ要素の情報を格納するための変数を定義する

// 変数定義
// - アクティブ要素の判定変数
const active = useActiveElement()

  • 使い方
    active の変数の中に HTMLElement が動的に反映されます
    例えば active?.id として呼び出すと active要素のIDが取得できます
    ※undefined の可能性があるので active? としています

    active?.dataset.id とすると data-id属性の値が取れますので上手に使えば便利な機能になると思います

  bodyの要素
  <div class="d-flex">
    <v-text-field
      class="mx-2"
      :value="active?.id"
      variant="plain"
      readonly
    ></v-text-field>
  </div>
  <div class="d-flex">
    <v-text-field
      class="mx-2"
      label="target1の要素"
      id="target1"
    ></v-text-field>
    <v-text-field
      class="mx-2"
      label="target2の要素"
      id="target2"
    ></v-text-field>
  </div>

↑ これはあくまで動きを見るためのものですが
こんな感じでアクティブ要素を参照


画面のアクティブ／非アクティブを判定する
(useDocumentVisibility)

useDocumentVisibility() を使うと 対象画面のアクティブ／非アクティブを判定できます
ファンクション名からして使い方違うのかもしれませんが判定は可能
定間隔でデータを取得するような画面で 非アクティブ時に データ取得を行わないようにするときなどに便利です
※非アクティブ時に データ取り続けたら大変なことになりますしね

  • import
    useDocumentVisibility を @vueuse/core から import
    ※判定の都合で watch も vue から import

import { watch } from 'vue';
import { useDocumentVisibility } from '@vueuse/core'

  • 変数定義
    active の判定を行うための変数を定義する

// 変数定義
// - 画面アクティブの判定変数
const active = useDocumentVisibility()

  • 使い方
    画面がアクティブになると active に 'visible'
    画面が非アクティブになると avtive に 'hidden'
    が設定されます
    そこで watch で該当変数を監視することでアクティブ／非アクティブの判定を行うことができます

watch(active, (aft,bef) => {
  if (bef == 'visible' && aft == 'hidden') {
    console.log('非アクティブになりました')
  }
  if (aft == 'visible' && bef == 'hidden') {
    console.log('アクティブになりました')
  }
})


要素の大きさを取得する(useElementSize)

useElementSize() を使うと指定した要素の大きさを取得できる

  • import
    useElementSize を @vueuse/core から import

import { useElementSize } from '@vueuse/core'

  • 変数定義
    次に変数を定義します、必要なのは以下の2つ

  1. 変更をキャッチするための変数

  2. 大きさを取得するための変数(1. の変数を useElementSize で設定する)

// 変数定義
// - 変更をキャッチするための変数
const cardSize = ref<HTMLDivElement | null>(null);
// - 大きさを取得するための変数
const size = useElementSize(cardSize);

  • 使い方
    取得したい要素に ref=“変更をキャッチするための変数” を設定する
    ここではVuetifyタグにいれていますが、divでもなんでも良いです
    width / height を取得したい時は以下のように取得します

    • 大きさを取得するための変数.width

    • 大きさを取得するための変数.height

<!-- 大きさを取得したい要素に ref を設定する -->
<v-card
  class="ma-0 bg-accent-1"
  height="50vh"
  width="50vw"
  ref="cardSize"
>
  <v-card-item>
    <v-card-title>
      {{ size.height }} / {{ size.width }}
    </v-card-title>
  </v-card-item>
</v-card>

これだけです
今までのようにResize Observerで変更を検知する必要はなく
これで動的にサイズを取得できます

画面サイズを大きく
画面サイズを小さく


マウスの位置を取得する(useMouse)

useMouse() を使うと画面内のマウス位置を動的に取得することができる

  • import
    useMouse を @vueuse/core から import

import { useMouse } from '@vueuse/core'

  • 変数定義
    mouse の位置を格納するための変数を定義する

// 変数定義
// - マウスの位置変数
const mouse = useMouse();

const { x, y } = useMouse();
こんな感じでx, y を分けて指定しても大丈夫ですが変数名を指定したいので
例では自分で定義した変数にuseMouseの戻り値を設定している

  • 使い方
    参照方法は mouse.x / mouse.y と指定する
    ここでは画面上で見えるようしている

    • mouse.x

    • mouse.y

<v-card
  class="ma-0 bg-accent-1"
  height="50vh"
  width="50vw"
>
  <v-card-item>
    <v-card-title>
      {{ mouse.x }} / {{ mouse.y }}
    </v-card-title>
  </v-card-item>
</v-card>

以下のようにマウスの位置を動的に取得できます


要素内のマウスの位置を取得する(useMouseInElement)

useMouseInElement() を使うと画面のみならず要素内のマウス位置、さらに指定した要素の大きさを動的に取得することができる
つまり useElementSize + useMouse < useMouseInElement となる
以下のようなときに便利な機能です

  • マウス操作でSVGタグを移動

  • コンテキストメニューの表示位置

  • ツールチップを動的に表示する

  • import
    useMouseInElement を @vueuse/core から import

import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'

  • 変数定義
    次に変数を定義します、必要なのは以下の2つ

  1. 変更をキャッチするための変数

  2. マウスの位置や要素の大きさを取得するための変数
    (1. の変数を useMouseInElementで設定する)

// 変数定義
// - 判定したい要素変数
const area = ref(null)
// - マウスの位置変数
const mouse = useMouseInElement(area)

  • 使い方
    取得したい要素に ref=“変更をキャッチするための変数” を設定する
    ここではVuetifyタグにいれていますが、divでもなんでも良いです
    各種値を取得したい時は以下のように取得します

    • mouse.x ･･･ 画面上のマウスの位置（X座標）

    • mouse.y ･･･ 画面上のマウスの位置（Y座標）

    • mouse.elementX ･･･ 要素上のマウスの位置（X座標）

    • mouse.elementY ･･･ 要素上のマウスの位置（Y座標）

    • mouse.isOutside ･･･ マウスが要素の外にいるか否か

    • mouse.elementPositionX ･･･ 要素の位置（X座標）

    • mouse.elementPositionY ･･･ 要素の位置（Y座標）

    • mouse.elementHeight ･･･ 要素の高さ

    • mouse.elementWidth ･･･ 要素の幅

<div
  class="d-flex justify-center align-center"
  style="height: 100vh;"
>
  <v-card
    class="ma-0 pa-2 bg-accent-5"
    ref="area"
    height="50%"
    width="50%"
    variant="outlined"
  >
    <div>
      <h4>x / y</h4>
      <h2 class="ml-5">{{ mouse.x }} / {{ mouse.y }}</h2>
    </div>
    <v-divider class="my-2"></v-divider>
    <div>
      <h4>elementX / elementY</h4>
      <h2 class="ml-5">{{ mouse.elementX }} / {{ mouse.elementY }}</h2>
    </div>
    <v-divider class="my-2"></v-divider>
    <div>
      <h4>isOutside</h4>
      <h2 class="ml-5">{{ mouse.isOutside }}</h2>
    </div>
    <v-divider class="my-2"></v-divider>
    <div>
      <h4>elementPositionX / elementPositionY </h4>
      <h2 class="ml-5">{{ mouse.elementPositionX }} / {{ mouse.elementPositionY }}</h2>
    </div>
    <v-divider class="my-2"></v-divider>
    <div>
      <h4>elementHeight / elementWidth </h4>
      <h2 class="ml-5">{{ mouse.elementHeight }} / {{ mouse.elementWidth }}</h2>
    </div>
  </v-card>
</div>

下記GIFのように各種情報を動的に取得できます


この記事が気に入ったらサポートをしてみませんか？