Vueuse 라이브러리에서 구성할 수 있는 유용한 장치 관련 vue 목록입니다.

이 목록의 모든 컴포저블은 Vueuse 라이브러리에서 가져온 것입니다. 이 라이브러리에는 많은 컴포저블이 있습니다.

블루투스 사용

이 컴포저블은 Web Bluetooth API의 도움으로 Bluetooth 장치를 연결하고 상호 작용하는 데 도움이 됩니다. 이것은 우리에게 5개의 변수와 1개의 함수를 제공합니다. acceptAllDevices 외에 전달할 수 있는 옵션이 3개 더 있습니다. Here's 브라우저 호환성에 대한 전체 개요. Official Docs

import { useBluetooth } from "@vueuse/core";

const {
    isSupported, // check if bluetooth is supported
    isConnected, // check if connected, reactive
    device, // device object, reactive
    requestDevice, // function to request device, returns a promise
    server, // handle services, reactive
    error // error helper, reactive
} = useBluetooth({
    acceptAllDevices: true,
    ...
});

클립보드 사용

클립보드에서 텍스트 복사, 잘라내기 및 붙여넣기 기능을 제공합니다. 시스템 클립보드에서 비동기식으로 읽고 쓸 수 있습니다. 클립보드 액세스를 위한 사용자 권한이 필요합니다. 이것은 우리에게 3개의 변수와 1개의 함수를 제공합니다. 텍스트는 반응형이며 복사된 텍스트를 포함하고, 복사는 함수이며 텍스트 매개변수를 허용합니다. 클립보드가 지원되는 경우 true입니다. Official docs

import { useClipboard } from "@vueuse/core";

const source = ref("Initial Text");
const { text, copy, copied, isSupported } = useClipboard({ source });

<template>
    <button @click="copy()">
        <!-- by default, `copied` will be reset in 1.5s -->
        <span v-if="!copied">Copy</span>
        <span v-else>Copied!</span>
    </button>
</template>

전체 화면 사용

이것은 전체 화면으로 들어가고 나가는 기능을 제공합니다. 이것은 우리에게 2개의 변수와 3개의 함수를 제공합니다. isFullscreen은 사용자가 전체 화면에 있는 경우 true가 되는 부울 변수입니다. enter는 전체 화면 보기를 트리거하는 함수이고 exit는 전체 화면에서 트리거하는 함수입니다. 토글은 전체 화면을 전환하는 함수 및 isSupported는 전체 화면이 지원되는 경우 true가 되는 부울 변수입니다. 지정된 요소를 전체 화면으로 만들기 위해 html 요소(예: <video /> )를 useFullscreen()에 전달할 수도 있습니다. Official docs

import { useFullscreen } from "@vueuse/core";

const { isFullscreen, enter, exit, toggle } = useFullscreen();

usePermission

이 컴포저블에서 권한 상태를 가져올 수 있습니다. Official docs

import { usePermission } from "@vueuse/core";

const microphoneAccess = usePermission("microphone");

useScreenOrientation

방향 유형(예: 세로-기본, 가로-보조 등), 방향 각도, 잠금 또는 잠금 해제 방향을 가져옵니다. Official docs

import { useScreenOrientation } from "@vueuse/core";

const {
    isSupported, // boolean
    orientation, //orientation type, reactive
    angle, // orientation angle, reactive
    lockOrientation, // lock orientation, accepts orientation type, function
    unlockOrientation, // unlock orientation, function
} = useScreenOrientation();

useDeviceOrientation

이는 장치의 물리적 방향에 대한 세부 정보를 제공합니다. Official docs

import { useDeviceOrientation } from "@vueuse/core";

const {
    isAbsolute,
    alpha, // z-axis, range: 0-360
    beta, // x-axis, range: -180 to 180
    gamma, // y-axis, range: -90 to 90
} = useDeviceOrientation();

WakeLock 사용

이 컴포저블은 화면이 어두워지거나 화면이 잠기는 것을 방지합니다. Official docs

import { useWakeLock } from "@vueuse/core";

const { isSupported, isActive, request, release } = useWakeLock();

사용진동

이렇게 하면 정의한 패턴으로 진동 장치에 액세스할 수 있습니다. Official docs

import { useVibrate } from "@vueuse/core";

// This vibrates the device for 300 ms
// then pauses for 100 ms before vibrating the device again for another 300 ms:
const { vibrate, stop, isSupported } = useVibrate({ pattern: [300, 100, 300] });

// Start the vibration, it will automatically stop when the pattern is complete:
vibrate();

// But if you want to stop it, you can:
stop();

배터리 사용

이것은 배터리 잔량과 충전 상태를 제공합니다. Official docs

import { useBattery } from "@vueuse/core";

const { charging, chargingTime, dischargingTime, level } = useBattery();

useDevicesList

입력/출력 장치 목록을 제공합니다. Official docs

import { useDevicesList } from "@vueuse/core";

const {
    devices,
    videoInputs: cameras,
    audioInputs: microphones,
    audioOutputs: speakers,
} = useDevicesList();

useGeolocation

이렇게 하면 사용자가 권한을 부여한 경우 사용자의 위치에 액세스할 수 있습니다. 위도, 경도, 속도, 방향 등과 같은 위치 옵션Official docs

import { useGeolocation } from "@vueuse/core";

const { coords, locatedAt, error } = useGeolocation();

useIdle

이렇게 하면 유휴 상태에 액세스할 수 있습니다. 아래 코드를 사용하면 화면 유휴 값과 상호 작용하지 않으면 true가 됩니다. Official docs

import { useIdle } from "@vueuse/core";

const { idle, lastActive } = useIdle(5 * 1000); // 5 seconds

console.log(idle.value); // true or false

useNetwork

이렇게 하면 네트워크 상태에 액세스할 수 있습니다. 네트워크 유형, 온라인 등의 상태Official docs

import { useNetwork } from "@vueuse/core";

const {
    isOnline,
    offlineAt,
    downlink,
    downlinkMax,
    effectiveType,
    saveData,
    type,
} = useNetwork();