113 lines
2.1 KiB
Vue
113 lines
2.1 KiB
Vue
<template>
|
||
<view class="move-circle" :style="containerStyle">
|
||
<image src="/static/index/keyimg/lunpan.png" class="move-circle-all" />
|
||
<view class="click-box-top" @click="handleClick(0)" />
|
||
<view class="click-box-left" @click="handleClick(3)" />
|
||
<view class="click-box-bottom" @click="handleClick(2)" />
|
||
<view class="click-box-right" @click="handleClick(1)" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue'
|
||
|
||
const props = defineProps({
|
||
/**
|
||
* 水平位置，单位 rpx
|
||
*/
|
||
left: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
/**
|
||
* 垂直位置，单位 rpx
|
||
* 优先使用 bottom，如果同时传入 top 和 bottom，则以 top 为准
|
||
*/
|
||
bottom: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
top: {
|
||
type: Number,
|
||
default: undefined
|
||
}
|
||
})
|
||
const emit = defineEmits<{
|
||
(e: 'movecard', dir: number): void
|
||
}>()
|
||
|
||
const key = ref(-1)
|
||
let resetTimer: number | null = null
|
||
|
||
// 计算容器样式
|
||
const containerStyle = computed(() => {
|
||
const style: Record<string, string> = {
|
||
left: `${props.left}rpx`
|
||
}
|
||
if (props.top !== undefined) {
|
||
style.top = `${props.top}rpx`
|
||
} else {
|
||
style.bottom = `${props.bottom}rpx`
|
||
}
|
||
return style
|
||
})
|
||
|
||
function handleClick(dir: number) {
|
||
if (resetTimer !== null) {
|
||
clearTimeout(resetTimer)
|
||
}
|
||
key.value = dir
|
||
emit('movecard', dir)
|
||
// 500ms 后复位
|
||
resetTimer = setTimeout(() => {
|
||
key.value = -1
|
||
resetTimer = null
|
||
}, 500)
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.move-circle {
|
||
position: absolute;
|
||
width: 330rpx;
|
||
height: 330rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9999;
|
||
}
|
||
.move-circle-all {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
}
|
||
.click-box-top {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 100rpx;
|
||
width: 130rpx;
|
||
height: 120rpx;
|
||
}
|
||
.click-box-bottom {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 100rpx;
|
||
width: 130rpx;
|
||
height: 120rpx;
|
||
}
|
||
.click-box-left {
|
||
position: absolute;
|
||
bottom: 100rpx;
|
||
left: 0;
|
||
width: 98rpx;
|
||
height: 120rpx;
|
||
}
|
||
.click-box-right {
|
||
position: absolute;
|
||
bottom: 100rpx;
|
||
right: 0;
|
||
width: 98rpx;
|
||
height: 120rpx;
|
||
}
|
||
</style>
|