1.自定义滑块

做法： 1.先定义好动画，暂停 2.使用动画的delay时间，来确定各个时间点位置 3.通过input:range来改变delay的css变量值，使用dom.style.setProperty('--delayTime',25s)来设置

<template> <!--智能环绕参数面板--> <pop-dialog width="368px" left="50%" top="35%" title="智能环绕设置" @close="onClose" > <div class="content"> <div class="explanation-box"> 说明：可通过键盘微调飞行位置，调整环绕高度或半径，请检查周边环境后再执行环绕操作。 </div> <div class="params-box"> <div class="params-box-item"> <div class="params-box-item-title">环绕高度</div> <div class="params-box-item-content"> <div class="params-btn" @click="handleSurround(-100)">-100</div> <div class="params-btn" @click="handleSurround(-10)">-10</div> <div class="params-btn" @click="handleSurround(-1)">-1</div> <a-input placeholder="请输入" addon-after="m" v-model:value="formData.surroundHeight" /> <div class="params-btn add" @click="handleSurround(1)">1</div> <div class="params-btn add" @click="handleSurround(10)">10</div> <div class="params-btn add" @click="handleSurround(100)">100</div> </div> </div> <div class="params-box-item"> <div class="params-box-item-title">环绕距离</div> <div class="params-box-item-content"> <div class="params-btn" @click="handleSurRadius(-100)">-100</div> <div class="params-btn" @click="handleSurRadius(-10)">-10</div> <div class="params-btn" @click="handleSurRadius(-1)">-1</div> <a-input placeholder="请输入" addon-after="m" v-model:value="formData.surroundRadius" /> <div class="params-btn add" @click="handleSurRadius(1)">1</div> <div class="params-btn add" @click="handleSurRadius(10)">10</div> <div class="params-btn add" @click="handleSurRadius(100)">100</div> </div> </div> <div class="params-box-item"> <div class="params-box-item-title">环绕速度</div> <div class="params-box-item-content column"> <div class="slider-box" ref="sliderBoxRef"> <input type="range" name="" id="" class="slider-input" :min="0" :max="50" ref="sliderInputRef" v-model="sliderValue" > <div class="slider-inner"> <img ref="sliderArrowRef" class="slider-arrow" :src="sliderArrow" alt="" /> </div> </div> <div class="slider-display"> <div class="slider-display-name"> {{ isClockwise ? '顺时钟' : '逆时针' }} </div> <div class="slider-display-name"> <span class="blue">{{ formData.surroundSpeed }}</span >m/s </div> <div class="slider-display-name">25m/s</div> </div> </div> </div> </div> </div> <template #footer> <a-button class="border-radius4" @click="onCancel">取消</a-button> <a-button class="border-radius4" type="primary" @click="onConfirm" >确定</a-button > </template> </pop-dialog> </template> <script setup lang="ts"> import { computed, onMounted, reactive, ref, nextTick } from 'vue' import popDialog from '@/components/pop-dialog.vue' import { message } from 'ant-design-vue' import sliderArrow from '@/components/cockpit/img/slider-arrow.png' const $emit = defineEmits(['close', 'confirm']) //顺时针 const isClockwise = ref(true) const formData = ref({ surroundHeight: 3, surroundRadius: 3, surroundSpeed: 3, }) //输入框速度 const sliderValue = ref(25) const handleSurround = (value: any) => { formData.value.surroundHeight = Number(formData.value.surroundHeight) + value } const handleSurRadius = (value: any) => { formData.value.surroundRadius = Number(formData.value.surroundRadius) + value } const sliderInputRef = ref() const sliderBoxRef = ref() onMounted(() => { if (isClockwise.value) {//顺时针 sliderValue.value = 25 - formData.value.surroundSpeed } else { sliderValue.value = formData.value.surroundSpeed + 25 } sliderInputRef.value.addEventListener('input', (e: any) => { if (e.target.value >= 25) { isClockwise.value = false formData.value.surroundSpeed= e.target.value - 25 } else { isClockwise.value = true formData.value.surroundSpeed=25 - e.target.value } const time = -50 + e.target.value; console.log(`${time}s` ); sliderBoxRef.value.style.setProperty('--delayTime',`${time}s` ) }) }) const onCancel = () => { $emit('close') } const onConfirm = () => { $emit('confirm') } //指点模式选择 const handleModelClick = (item: any) => {} const onClose = () => { $emit('close') } </script> <style lang="scss" scoped> @keyframes sliderInner { 0% { width: 45%; right: 50%; left: auto; //靠右居中 transform: translate(0%, -50%); } 50% { width: 0%; right: 50%; left: auto; transform: translate(0%, -50%); } 50.01% { width: 0%; right: auto; left: 50%; transform: translate(0%, -50%); } 100% { width: 45%; right: auto; left: 50%; transform: translate(0%, -50%); } } @keyframes sliderArrow { 0% { right: auto; left: 0; transform: translate(-50%, -50%); } 50% { right: auto; left: 0; transform: translate(-50%, -50%); } 50.01% { right: 0; left: auto; transform: translate(50%, -50%); } 100% { right: 0; left: auto; transform: translate(50%, -50%); } } $totalTime:50s; .popup { .popup-content { padding: 12px; } } .content { width: 100%; display: flex; flex-direction: column; gap: 8px; .explanation-box { width: 100%; /* 自动布局 */ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px; gap: 16px; background: rgba(255, 170, 0, 0.2); color: #ffaa00; } .params-box { display: flex; flex-direction: column; gap: 8px; .params-box-item { height: 90px; padding: 0px 12px; background: rgba(13, 21, 29, 0.6); display: flex; flex-direction: column; justify-content: center; gap: 8px; .params-box-item-title { } .params-box-item-content { display: flex; gap: 4px; .params-btn { cursor: pointer; user-select: none; width: auto; min-width: 30px; height: 30px; padding: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); // 添加以下属性确保flex行为正确 flex: 0 0 auto; // 不伸缩，根据内容自适应 box-sizing: border-box; // 确保padding不影响实际宽度计算 color: #a2a7b4; &.add { color: #fff; } &:hover { background: rgba(255, 255, 255, 0.24); } } &.column { flex-direction: column; } .slider-box { --delayTime: -50s; position: relative; width: 324px; height: 24px; background: url('@/components/cockpit/img/slider-bar.png') no-repeat center; background-size: 100% 100%; &::after { content: ''; z-index: 2; display: block; width: 10px; height: 20px; border-radius: 2px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; } .slider-input{ opacity: 0; width: 90%; position: absolute; top: 50%; transform: translate(5%,-50%); z-index: 9; } .slider-inner { z-index: 1; position: absolute; width: 0%; height: 12px; top: 50%; left: 50%; // transform: translate(-100%, -50%); background-color: #1a71ff; animation: sliderInner $totalTime linear var(--delayTime,-25s) infinite; animation-play-state: paused; .slider-arrow { z-index: 9; // cursor: pointer; // pointer-events: all; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); animation: sliderArrow $totalTime linear var(--delayTime,-25s) infinite; animation-play-state: paused; } } } .slider-display { display: flex; justify-content: space-between; font-size: 14px; color: #fff; .slider-display-name { .blue { color: #1a71ff; font-size: 14px; font-weight: 600; } } } } } } } </style>