update:按钮特效优化

This commit is contained in:
2026-07-31 11:16:34 +08:00
parent d6f914ca7e
commit 4245a3f947
3 changed files with 28 additions and 7 deletions
+20 -3
View File
@@ -1,12 +1,17 @@
<script setup>
import { ref, watch } from "vue";
import SButton from "@/components/SButton.vue";
import audioManager from "@/audioManager";
const props = defineProps({
show: {
type: Boolean,
default: false,
},
clickSound: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: () => {},
@@ -39,7 +44,19 @@ watch(
{}
);
const playClickSound = () => {
if (props.clickSound) {
audioManager.play("点击按钮");
}
};
const handleSelectTarget = (target) => {
playClickSound();
selectedTarget.value = target;
};
const handleConfirm = () => {
playClickSound();
props.onConfirm(selectedTarget.value);
props.onClose();
};
@@ -70,14 +87,14 @@ const handleConfirm = () => {
<view class="target-options">
<view
:class="{ 'target-btn': true, 'target-choosen': selectedTarget === 1 }"
@click="() => (selectedTarget = 1)"
@click="handleSelectTarget(1)"
>
<text>20厘米全环靶</text>
</view>
<view style="width: 30rpx"></view>
<view
:class="{ 'target-btn': true, 'target-choosen': selectedTarget === 2 }"
@click="() => (selectedTarget = 2)"
@click="handleSelectTarget(2)"
>
<text>40厘米全环靶</text>
</view>
@@ -194,4 +211,4 @@ const handleConfirm = () => {
color: #fed847;
border: 4rpx solid #fed847;
}
</style>
</style>