123 lines
2.1 KiB
Vue
123 lines
2.1 KiB
Vue
<template>
|
|
<view class="speed-control">
|
|
<view class="speed-button" @click="toggleMenu">
|
|
<text class="speed-text">{{ currentRate }}x</text>
|
|
<text class="arrow">▼</text>
|
|
</view>
|
|
|
|
<view v-if="showMenu" class="speed-menu">
|
|
<view
|
|
v-for="rate in rateOptions"
|
|
:key="rate"
|
|
class="speed-option"
|
|
:class="{ active: rate === currentRate }"
|
|
@click="selectRate(rate)"
|
|
>
|
|
{{ rate }}x
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
interface Props {
|
|
rate: number
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
rate: 1.0
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
change: [rate: number]
|
|
}>()
|
|
|
|
const rateOptions = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0]
|
|
const showMenu = ref(false)
|
|
const currentRate = ref(props.rate)
|
|
|
|
watch(
|
|
() => props.rate,
|
|
(newRate) => {
|
|
currentRate.value = newRate
|
|
}
|
|
)
|
|
|
|
const toggleMenu = () => {
|
|
showMenu.value = !showMenu.value
|
|
}
|
|
|
|
const selectRate = (rate: number) => {
|
|
currentRate.value = rate
|
|
showMenu.value = false
|
|
emit('change', rate)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.speed-control {
|
|
position: relative;
|
|
}
|
|
|
|
.speed-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 10rpx 20rpx;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: 8rpx;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
.speed-text {
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.arrow {
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.speed-menu {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
right: 0;
|
|
margin-bottom: 10rpx;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
border-radius: 8rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.speed-option {
|
|
padding: 20rpx 40rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
&.active {
|
|
color: #1989fa;
|
|
background-color: rgba(25, 137, 250, 0.1);
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
</style>
|