在此程式碼中，我有一個開始和一個停止按鈕以及一個計時器。
我想從手機獲取信息，例如 DeviceOrientationEvent 以及絕對、alpha、beta 和 gamma 等屬性，如本鏈接所示。
我不知道該怎麼做這樣的事情，因為我從來沒有使用過這類事件。
收到這些事件後，我會將它們保存在例如方向[]。
<template>
<q-page padding>
<div class="text-center text-h5 q-mt-lg">
{{ $t('tasks.motion.title') }}
</div>
<div class="row justify-center q-mt-lg">
<q-btn
@click="startTest"
v-show="!isStarted"
:label="$t('common.start')"
/>
<q-btn
@click="completeTest"
v-show="isStarted"
:label="$t('common.complete')"
/>
</div>
</q-page>
</template>
<script>
import phone from 'modules/phone'
import userinfo from 'modules/userinfo'
import { format as Qformat } from 'quasar'
const TEST_DURATION = 60
export default {
name: 'MotionOrientationPage',
props: {
sKey: String,
tId: Number
},
data: function () {
return {
isSignalCheck: true,
isStarted: false,
isCompleted: false,
timer: undefined,
totalTime: TEST_DURATION,
startedTS: undefined,
completionTS: undefined,
alpha: []
}
},
mounted: async function () {
// Events that are running always
if (window.DeviceMotionEvent) {
console.log('devicemotion was defined')
}
if (window.DeviceOrientationEvent) {
console.log('GyroScope was defined')
}
},
methods: {
async startTest () {
this.isStarted = true
this.startedTS = new Date()
this.startTimer()
phone.screen.forbidSleep()
if (this.isStarted && this.isCompleted === false) {
window.addEventListener('deviceorientation', function (event)
{
this.saveAlpha(event.alpha)
console.log(event.alpha)
})
}
},
saveAlpha (alpha) {
this.alpha.push(alpha)
},
startTimer () {
this.totalTime = TEST_DURATION
this.timer = setInterval(() => this.countDown(), 1000)
},
stopTimer () {
clearInterval(this.timer)
},
countDown () {
if (this.totalTime >= 1) {
this.totalTime--
} else {
this.completeTest()
}
},
completeTest () {
this.isStarted = false
this.completionTS = new Date()
this.stopTimer()
phone.screen.allowSleep()
this.isCompleted = true
// package the report
const sKey = this.sKey
const taskId = parseInt(this.taskId)
const userKey = userinfo.user._key
let report = {
userKey: userKey,
sKey: sKey,
taskId: taskId,
createdTS: new Date(),
startedTS: this.startedTS,
completionTS: this.completionTS,
alpha: this.alpha
}
this.$router.push({ name: 'reportMotionOrientation', params: { report: report } })
}
},
computed: {
minutes () {
return Qformat.pad(Math.floor(this.totalTime / 60))
},
seconds () {
return Qformat.pad(this.totalTime - (this.minutes * 60))
}
},
beforeDestroy: function () {
this.stopTimer()
phone.screen.allowSleep()
}
}
</script>
編輯：使用程式碼，每當我模仿開發工具中感測器標籤中alpha值的變化時，我都會收到Uncaught TypeError: this.saveAlpha is not a function at eval (file1.vue?149e :95) 。
我個人沒有這樣做過，但看起來您需要新增一個偵聽器，然後使用一種或多種方法來保存事件中的新資料。
data() { return { ..., alpha: [] } }, mounted: { window.addEventListener('deviceorientation', function(event) { this.saveAlpha(event.alpha) }); // more event listeners }, methods: { saveAlpha(alpha) { this.alpha.push(alpha) }, // more saveMethods }評論更新：
... data() { return { continue: "false" { }, methods: { ... listener() { if(this.continue) { window.addEventListener('deviceorientation', function(event) { this.saveAlpha(event.alpha) }); // more event listeners } } }然後在您的元件中，確保
@click=listener。您需要添加一些邏輯來圍繞該方法開始/停止捕獲。您可以使用按鈕翻轉continue屬性。