<template>
<view>
<view class="camera-content">
<view class="camera-up" @tap="cameraTapBtn" @longpress="cameraLongBtn" data-title="上"
@touchend="cameraTouchBtn">上</view>
<view class="camera-middle">
<view class="camera-middle-left" @tap="cameraTapBtn" @longpress="cameraLongBtn" data-title="左"
@touchend="cameraTouchBtn">左</view>
<view>中</view>
<view class="camera-middle-right" @tap="cameraTapBtn" @longpress="cameraLongBtn" data-title="右"
@touchend="cameraTouchBtn">右</view>
</view>
<view class="camera-down" @tap="cameraTapBtn" @longpress="cameraLongBtn" data-title="下"
@touchend="cameraTouchBtn">下</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
timeOnline: null,
degreesNum: 0
}
},
methods: {
cameraTapBtn(event) {
let directionTitle = event.target.dataset.title
this.ControlFun(directionTitle, "点击")
},
cameraLongBtn(event) {
let directionTitle = event.target.dataset.title
this.ControlFun(directionTitle, "长按")
},
cameraTouchBtn() {
this.degreesNum = 0
clearInterval(this.timeOnline); // 清除计时器
},
ControlFun(directionTitle, controlTime) {
let This = this
This.degreesNum = 0
console.log(directionTitle)
if (controlTime == "点击") {
This.degreesNum++
console.log(This.degreesNum)
} else if (controlTime == "长按") {
This.timeOnline = setInterval(() => {
This.degreesNum++
console.log(This.degreesNum)
}, 200);
}
}
},
}
</script>
<style scoped>
.camera-content {
margin: 60upx auto;
width: 480upx;
height: 480upx;
border-radius: 50%;
border: 1px solid #efefef;
box-shadow: 2px 2px 10px #909090;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 30upx;
box-sizing: border-box;
}
.camera-content .camera-middle {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
justify-content: space-between;
}
</style>
网友评论