update:按钮特效优化
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user