Rabbitzzc / sensors-orientation

mock sensors orientation, like devtoos

Home Page:https://www.w3.org/TR/orientation-sensor/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

sensors-orientation

pPwj35V.png

A draggable DOM component that simulates Orientation, similar to the browser devtools, and matches the behavior of the browser devtools.

Usage

Demo

yarn 

yarn demo

Install

yarn add sensors-orientation

Use in Vue

import { ref, onMounted } from 'vue'
import registerOrientation from 'sensors-orientation'
import 'sensors-orientation/dist/index.css'
// import type {OrientationView} from 'sensors-orientation'


const manager = ref(null)

function reset() {
    manager.value.resetDeviceOrientation();
}

// 生命周期钩子
onMounted(() => {
  manager.value = registerOrientation(document.querySelector('.orientation'));
  manager.value.onChangeDeviceOrientation(args => {
    console.error('onChangeDeviceOrientation', args);
  })
})

API

registerOrientation

register orientation, use it first.

params

  1. dom: HTMLElement

return

Return a manager of type OrientationView

manager.resetDeviceOrientation

reset the orientation data to [0, 90, 0]

manager.onChangeDeviceOrientation

listens the orientation data changes and triggers a callback

params

  1. callback: ChangedFCType

manager.setDeviceOrientation

set device orientation, like user input.

params

  1. orientation: OrientationType

Type

  • OrientationType
  • OrientationView

About

mock sensors orientation, like devtoos

https://www.w3.org/TR/orientation-sensor/

License:MIT License


Languages

Language:TypeScript 75.8%Language:CSS 19.2%Language:Vue 3.6%Language:HTML 1.4%