初始化

src/views/common/SongProgress.vue

@@ -0,0 +1,114 @@
+<script setup>
+import {
+  ref,
+  onUnmounted,
+  reactive,
+  toRef,
+  toRefs,
+} from "vue";
+import { useStore } from "vuex";
+import { NProgress } from "naive-ui";
+import pubsub from "pubsub-js";
+import { getSongDetial } from "@/network/song";
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import duration from "dayjs/plugin/duration";
+
+const store = useStore();
+const progress = ref("");
+const wpProgress = ref("");
+const setTime = (e) => {
+  //设定状态条长度
+  rightDot.value = wpProgress.value.clientWidth - e.offsetX + 'px'
+  percentage.value = e.offsetX / wpProgress.value.clientWidth * 100
+  // console.log(rightDot.value);
+  //发布 设置进度条消息
+  pubsub.publish("zp.setProgressScale", {
+    scale: e.offsetX / wpProgress.value.clientWidth,
+  });
+};
+
+// const primaryColor = store.state.theme.themeOverrides.common.primaryColor;
+const rightDot = ref("px");
+//#region 处理消息订阅
+
+let percentage = ref(0.0);
+const psToken = pubsub.subscribe("zp", (msg, data) => {
+  switch (msg) {
+    case "zp.progress":
+      percentage.value = (data.progress * 100) / data.total;
+      rightDot.value =
+        (1 - data.progress / (data.total - 0)) *
+          wpProgress.value.clientWidth +
+        "px";
+      // console.log(rightDot.value);
+      break;
+  }
+});
+//卸载组件
+onUnmounted(() => {
+  pubsub.unsubscribe(psToken);
+});
+//#endregion
+</script>
+<template>
+  <div id="wpProgress" ref="wpProgress">
+    <n-progress
+      class="progress"
+      type="line"
+      :percentage="percentage"
+      :show-indicator="false"
+      :color="
+        store.state.theme.themeOverrides.common.primaryColor
+      "
+      :height="3"
+      :border-radius="0"
+      ref="progress"
+      @click="setTime"
+    />
+    <div
+      class="dot"
+      :style="{
+        backgroundColor:
+          store.state.theme.themeOverrides.common
+            .primaryColor,
+        right: rightDot,
+      }"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scope>
+#wpProgress {
+  position: relative;
+  // overflow: visible;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  .progress {
+    cursor: pointer;
+  }
+
+  .dot {
+    position: absolute;
+    // background-color: red;
+    height: 10px;
+    width: 10px;
+    border-radius: 6px;
+    top: -4px;
+    // left: -4px;
+    display: none;
+  }
+
+  &:hover {
+    .dot {
+      display: block;
+    }
+  }
+}
+</style>