hldy_app/component/public/game/joysticknew.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>