更新

src/views/coursewarePlay/videoPlay/videoPlay.vue

@@ -44,6 +44,7 @@
                   <div class="sliderSpeedCon">
                      <img @click="handlePalySpeed(playController.speedStep)" src="./img/jia.png" />
                      <el-slider
+                        tooltip-class="sliderSpeedTitTooltip"
                         class="sliderSpeed"
                         @change="handlePalySpeedChange"
                         v-model="playController.palySpeed"
@@ -72,6 +73,7 @@ import "tcplayer.js/dist/tcplayer.min.css"
 import { onMounted, onUnmounted, ref, reactive, watch } from "vue"
 import { UUID } from "@/libs/tools"
 import { formatTime } from "./tools"
+import { addClass, removeClass, setStyle } from "@/libs/tools"
 
 const props = defineProps<{
    listenWinEvents?: boolean
@@ -95,6 +97,32 @@ const timeController = reactive({
 const btnSpendDom = ref()
 const popoverSpendDom = ref()
 let _popoverSpendTime: any
+let _sliderSpeedTitTime: any
+const body = document.querySelector("body")
+const name = "_sliderSpeedTit"
+function handleSliderSpeedTitShow() {
+   const sliderSpeedTitTooltipDom = document.querySelector(".sliderSpeedTitTooltip.el-popper")
+   sliderSpeedTitTooltipDom?.setAttribute("data-popper-placement", "top")
+   setStyle(
+      document.querySelector(".sliderSpeedTitTooltip.el-popper .el-popper__arrow") as any,
+      {
+         transform: `translate(15px, 0)`
+      } as any
+   )
+   setStyle(
+      sliderSpeedTitTooltipDom as any,
+      {
+         "z-index": "3000",
+         inset: "auto auto 0px 0px",
+         transform: `translate(172px, ${-156 - (playController.palySpeed - 0.5) * 10 * 15}px)`
+      } as any
+   )
+   addClass(body, name)
+   clearTimeout(_sliderSpeedTitTime)
+   _sliderSpeedTitTime = setTimeout(() => {
+      removeClass(body, name)
+   }, 800)
+}
 // 定时隐藏
 function handlePopoverTimeHide() {
    _popoverSpendTime && clearTimeout(_popoverSpendTime)
@@ -227,6 +255,7 @@ function handlePalySpeed(value: number) {
    }
    playController.palySpeed = palySpeed
    handlePalySpeedChange(palySpeed)
+   handleSliderSpeedTitShow()
 }
 /* 是否显示控制器 */
 function handleVideoKeydown(e: KeyboardEvent) {
@@ -258,6 +287,13 @@ defineExpose({
 })
 </script>
 
+<style lang="scss">
+body._sliderSpeedTit {
+   .sliderSpeedTitTooltip {
+      display: initial !important;
+   }
+}
+</style>
 <style lang="scss" scoped>
 .videoPlay {
    width: 100%;