115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
<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>
|