1.效果图:
2.vue文件代码
1.js部分:
<script setup lang="ts">
import {reactive} from "vue";
import {Refresh, CaretLeft} from "@element-plus/icons-vue";
interface DirectionButton {
label: any,
key: string,
value: number
}
const directionButton = reactive<DirectionButton[]>([
{
label: '上',
key: 'up',
value: 1
},
{
label: '右上',
key: 'up-right',
value: 2
},
{
label: '右',
key: 'right',
value: 3
},
{
label: '右下',
key: 'down-right',
value: 4
},
{
label: '下',
key: 'down',
value: 5
},
{
label: '左下',
key: 'down-left',
value: 6
},
{
label: '左',
key: 'left',
value: 7
},
{
label: '左上',
key: 'up-left',
value: 8
},
{
label: '中心',
key: 'center',
value: 9
},
])
/**
* @description 云台控制
* @param btn {DirectionButton}
*/
const handleRegulate = (btn: DirectionButton) => {
switch (btn.value) {
case 1:
console.log('上')
break;
case 2:
console.log('右上')
break;
case 3:
console.log('右')
break;
case 4:
console.log('右下')
break;
case 5:
console.log('下')
break;
case 6:
console.log('左下')
break;
case 7:
console.log('左')
break;
case 8:
console.log('左上')
break;
case 9:
console.log('复位')
break;
}
}
</script>
2.html部分:
<template>
<div class="controller">
<div v-for="btn in directionButton"
:key="btn.key"
:class="[btn.value!=9?'sector':'',btn.key]"
:title="btn.label"
@click="handleRegulate(btn)"
>
<el-icon>
<CaretLeft></CaretLeft>
</el-icon>
</div>
</div>
</template>
3.css/less/scss部分
.controller {
position: relative;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(22deg);
box-shadow: var(--panel-head-box-shadow);
border-radius: 50%;
z-index: 9;
.sector {
width: 194px;
height: 194px;
background-color: var(--core-button-normal-bg-color);
clip-path: polygon(50% 50%, 100% 50%, 100% 3%);
border-radius: 50%;
position: absolute;
cursor: pointer;
&:hover {
background-color: var(--core-hover-color);
}
.el-icon {
position: absolute;
right: 20px;
top: 63px;
transform: rotate(-200deg);
}
}
/* 各个方向的扇形按钮 */
.up {
transform: rotate(270deg);
}
.right {
transform: rotate(0deg);
.el-icon {
transform: rotate(-202deg);
}
}
.down-right {
transform: rotate(45deg);
}
.down {
transform: rotate(90deg);
.el-icon {
transform: rotate(-204deg);
}
}
.down-left {
transform: rotate(135deg);
}
.left {
transform: rotate(180deg);
.el-icon {
transform: rotate(-200deg);
}
}
.up-left {
transform: rotate(225deg);
}
.up {
transform: rotate(270deg);
}
.up-right {
transform: rotate(315deg);
}
/* 中心的圆形空心区域 */
.center {
position: absolute;
transform: translate(-50%, -50%); /* 将中心定位到控制器的中心 */
width: 65px;
height: 65px;
top: 100px;
left: 100px;
background-color: var(--core-button-normal-bg-color);
border: 1px solid var(--core-border-color);
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
z-index: 10; /* 确保中心区域在其他扇形之上 */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
background-color: var(--core-hover-color);
}
}
}
3.总结
给每一个方向的按钮绑定点击事件,通过传递不同的value区分不同方向处理对应的交互,中心位置的按钮,是一个复原/重置按钮。