vue視頻時間進度條組件使用方法詳解
更新時間：2022年03月30日 11:27:08 作者：帥_帥
這篇文章主要為大家詳細介紹了vue視頻時間進度條組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue視頻時間進度條組件的使用方法，供大家參考，具體內(nèi)容如下
有些視頻是以視頻流的形式進行渲染的，沒有視頻滾動條，所以就寫了24h的時間組件
實現(xiàn)思路：
1、24h的時間刻度線總寬度為12960px
2、點擊24h線的某一點，獲取這一點離左側(cè)原點的距離（使用dom元素layerX和offsetLeft綜合判斷）
3、計算點擊時線段的占比比率
4、每天的時間是86400000毫秒
5、占比比率乘以86400000就是獲取的你點擊的時間
代碼如下：
<template>
? <div class="time-main">
? ? <div class="center-content" ref="centerRef">
? ? ? <div
? ? ? ? ref="timeRef"
? ? ? ? class="time-line"
? ? ? ? @click.capture="clickTimeLine($event)"
? ? ? >
? ? ? ? <template v-for="(item, i) in timeArr">
? ? ? ? ? <div
? ? ? ? ? ? :key="'a' + i"
? ? ? ? ? ? class="base-line"
? ? ? ? ? ? :style="{ left: 90 * i + 'px', height: 14 + 'px' }"
? ? ? ? ? ></div>
? ? ? ? ? <div :key="i" class="base-title" :style="{ left: 4 + 90 * i + 'px' }">
? ? ? ? ? ? {{ item }}
? ? ? ? ? </div>
? ? ? ? ? <div
? ? ? ? ? ? :key="'b' + i"
? ? ? ? ? ? class="base-line"
? ? ? ? ? ? :style="{ left: 18 + 90 * i + 'px' }"
? ? ? ? ? ></div>
? ? ? ? ? <div
? ? ? ? ? ? :key="'c' + i"
? ? ? ? ? ? class="base-line"
? ? ? ? ? ? :style="{ left: 36 + 90 * i + 'px' }"
? ? ? ? ? ></div>
? ? ? ? ? <div
? ? ? ? ? ? :key="'d' + i"
? ? ? ? ? ? class="base-line"
? ? ? ? ? ? :style="{ left: 54 + 90 * i + 'px' }"
? ? ? ? ? ></div>
? ? ? ? ? <div
? ? ? ? ? ? :key="'e' + i"
? ? ? ? ? ? class="base-line"
? ? ? ? ? ? :style="{ left: 72 + 90 * i + 'px' }"
? ? ? ? ? ></div>
? ? ? ? </template>
? ? ? </div>
? ? </div>
? ? <div class="btn-content">
? ? ? <div class="left-arow" @click="clickRightMove">
? ? ? ? <i class="el-icon-arrow-left"></i>
? ? ? </div>
? ? ? <div>{{ yesterdayTime | formatDateTime }}</div>
? ? ? <div class="right-arow" @click="clickLeftMove">
? ? ? ? <i class="el-icon-arrow-right"></i>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
import {
? compare,
? exactDiv,
? exactMul,
? exactSub,
? exactAdd,
? decimalsFormat,
} from "@/util/util.js";
export default {
? name: "timeLine",
? // inject: ["screenNum"],
? // watch: {
? // ? screenNum: {
? // ? ? handler(val) {
? // ? ? ? console.log("切換了val==", val);
? // ? ? },
? // ? },
? // },
? props: {
? ? dateArr: {
? ? ? type: Array,
? ? },
? },
? data() {
? ? return {
? ? ? clickCnt: 0,
? ? ? leftMoveWidth: 0,
? ? ? endTimeFlag: false,
? ? ? timeArr: [
? ? ? ? "00:00",
? ? ? ? "00:10",
? ? ? ? "00:20",
? ? ? ? "00:30",
? ? ? ? "00:40",
? ? ? ? "00:50",
? ? ? ? "01:00",
? ? ? ? "01:10",
? ? ? ? "01:20",
? ? ? ? "01:30",
? ? ? ? "01:40",
? ? ? ? "01:50",
? ? ? ? "02:00",
? ? ? ? "02:10",
? ? ? ? "02:20",
? ? ? ? "02:30",
? ? ? ? "02:40",
? ? ? ? "02:50",
? ? ? ? "03:00",
? ? ? ? "03:10",
? ? ? ? "03:20",
? ? ? ? "03:30",
? ? ? ? "03:40",
? ? ? ? "03:50",
? ? ? ? "04:00",
? ? ? ? "04:10",
? ? ? ? "04:20",
? ? ? ? "04:30",
? ? ? ? "04:40",
? ? ? ? "04:50",
? ? ? ? "05:00",
? ? ? ? "05:10",
? ? ? ? "05:20",
? ? ? ? "05:30",
? ? ? ? "05:40",
? ? ? ? "05:60",
? ? ? ? "06:00",
? ? ? ? "06:10",
? ? ? ? "06:20",
? ? ? ? "06:30",
? ? ? ? "06:40",
? ? ? ? "06:50",
? ? ? ? "07:00",
? ? ? ? "07:10",
? ? ? ? "07:20",
? ? ? ? "07:30",
? ? ? ? "07:40",
? ? ? ? "07:50",
? ? ? ? "08:00",
? ? ? ? "08:10",
? ? ? ? "08:20",
? ? ? ? "08:30",
? ? ? ? "08:40",
? ? ? ? "08:50",
? ? ? ? "09:00",
? ? ? ? "09:10",
? ? ? ? "09:20",
? ? ? ? "09:30",
? ? ? ? "09:40",
? ? ? ? "09:50",
? ? ? ? "10:00",
? ? ? ? "10:10",
? ? ? ? "10:20",
? ? ? ? "10:30",
? ? ? ? "10:40",
? ? ? ? "10:50",
? ? ? ? "11:00",
? ? ? ? "11:10",
? ? ? ? "11:20",
? ? ? ? "11:30",
? ? ? ? "11:40",
? ? ? ? "11:50",
? ? ? ? "12:00",
? ? ? ? "12:10",
? ? ? ? "12:20",
? ? ? ? "12:30",
? ? ? ? "12:40",
? ? ? ? "12:50",
? ? ? ? "13:00",
? ? ? ? "13:10",
? ? ? ? "13:20",
? ? ? ? "13:30",
? ? ? ? "13:40",
? ? ? ? "13:50",
? ? ? ? "14:00",
? ? ? ? "14:10",
? ? ? ? "14:20",
? ? ? ? "14:30",
? ? ? ? "14:40",
? ? ? ? "14:50",
? ? ? ? "15:00",
? ? ? ? "15:10",
? ? ? ? "15:20",
? ? ? ? "15:30",
? ? ? ? "15:40",
? ? ? ? "15:50",
? ? ? ? "16:00",
? ? ? ? "16:10",
? ? ? ? "16:20",
? ? ? ? "16:30",
? ? ? ? "16:40",
? ? ? ? "16:50",
? ? ? ? "17:00",
? ? ? ? "17:10",
? ? ? ? "17:20",
? ? ? ? "17:30",
? ? ? ? "17:40",
? ? ? ? "17:50",
? ? ? ? "18:00",
? ? ? ? "18:10",
? ? ? ? "18:20",
? ? ? ? "18:30",
? ? ? ? "18:40",
? ? ? ? "18:50",
? ? ? ? "19:00",
? ? ? ? "19:10",
? ? ? ? "19:20",
? ? ? ? "19:30",
? ? ? ? "19:40",
? ? ? ? "19:50",
? ? ? ? "20:00",
? ? ? ? "20:10",
? ? ? ? "20:20",
? ? ? ? "20:30",
? ? ? ? "20:40",
? ? ? ? "20:50",
? ? ? ? "21:00",
? ? ? ? "21:10",
? ? ? ? "21:20",
? ? ? ? "21:30",
? ? ? ? "21:40",
? ? ? ? "21:50",
? ? ? ? "22:00",
? ? ? ? "22:10",
? ? ? ? "22:20",
? ? ? ? "22:30",
? ? ? ? "22:40",
? ? ? ? "22:50",
? ? ? ? "23:00",
? ? ? ? "23:10",
? ? ? ? "23:20",
? ? ? ? "23:30",
? ? ? ? "23:40",
? ? ? ? "23:50",
? ? ? ],
? ? ? switchWidthNum: 540,
? ? ? yesterdayTime: 0,
? ? ? clickTimeVal: 0,
? ? };
? },
? mounted() {
? ? // this.handleWidthFn();
? ? this.dealScrollMove();
? ? // console.log("mounted==", this.dateArr);
? },
? methods: {
? ? dealScrollMove() {
? ? ? if (this.$refs.centerRef.offsetWidth >= 540) {
? ? ? ? this.switchWidthNum = 540;
? ? ? } else if (this.$refs.centerRef.offsetWidth >= 360) {
? ? ? ? this.switchWidthNum = 360;
? ? ? } else if (this.$refs.centerRef.offsetWidth >= 270) {
? ? ? ? this.switchWidthNum = 270;
? ? ? } else if (this.$refs.centerRef.offsetWidth >= 180) {
? ? ? ? this.switchWidthNum = 180;
? ? ? } else {
? ? ? ? this.switchWidthNum = 90;
? ? ? }
? ? ? let time0 = new Date(new Date().toLocaleDateString()).getTime(); //獲取當(dāng)日0點時間戳
? ? ? let time1 = new Date().getTime(); // 當(dāng)前時間
? ? ? let sumTimeWidth = 12960;
? ? ? let dayTimeSum = 86400000; //一天的毫秒數(shù)
? ? ? // if (this.clickTimeVal) {
? ? ? // ? time1 = this.clickTimeVal;
? ? ? // ? console.log("進==", time1);
? ? ? // ? console.log("進=2=", this.clickTimeVal);
? ? ? // }
? ? ? if (this.dateArr.length > 0) {
? ? ? ? time1 = this.dateArr[0];
? ? ? ? time0 = exactSub(time0, dayTimeSum);
? ? ? ? console.log("進==", this.dateArr);
? ? ? ? console.log("進=2=", this.clickTimeVal);
? ? ? }
? ? ? let timeSub = exactSub(time1, time0);
? ? ? // console.log("timeSub=", timeSub);
? ? ? if (this.dateArr.length > 0) {
? ? ? ? this.yesterdayTime = this.dateArr[0];
? ? ? ? this.clickTimeVal = this.dateArr[0];
? ? ? } else {
? ? ? ? this.yesterdayTime = exactSub(time0, dayTimeSum);
? ? ? }
? ? ? let dayPer = exactDiv(timeSub, dayTimeSum); //一天的百分比
? ? ? console.log("exactDiv(timeSub, dayTimeSum)==", this.yesterdayTime);
? ? ? // console.log("dayPer==", dayPer);
? ? ? let scrollWidth = exactMul(sumTimeWidth, dayPer);
? ? ? // console.log("scrollWidth=333333=", scrollWidth);
? ? ? // console.log("scrollWidth=33333555553=", this.switchWidthNum);
? ? ? // 除以switchWidthNum 獲取點擊的個數(shù)
? ? ? let switchClickCnt = exactDiv(scrollWidth, this.switchWidthNum);
? ? ? // console.log("switchClickCnt==", switchClickCnt);
? ? ? this.clickCnt = parseInt(switchClickCnt) - 1;
? ? ? this.clickLeftMove();
? ? ? // console.log("點擊的數(shù)量1===", this.clickCnt);
? ? },
? ? handleWidthFn() {
? ? ? this.$nextTick(() => {
? ? ? ? if (this.$refs.centerRef.offsetWidth >= 540) {
? ? ? ? ? this.switchWidthNum = 540;
? ? ? ? } else if (this.$refs.centerRef.offsetWidth >= 360) {
? ? ? ? ? this.switchWidthNum = 360;
? ? ? ? } else if (this.$refs.centerRef.offsetWidth >= 270) {
? ? ? ? ? this.switchWidthNum = 270;
? ? ? ? } else if (this.$refs.centerRef.offsetWidth >= 180) {
? ? ? ? ? this.switchWidthNum = 180;
? ? ? ? } else {
? ? ? ? ? this.switchWidthNum = 90;
? ? ? ? }
? ? ? });
? ? },
? ? clickTimeLine(event) {
? ? ? // console.log("event==", event);
? ? ? // console.log("event=layerX==", event.layerX);
? ? ? // console.log("event=layerX=target===", event.target.offsetLeft);
? ? ? let sumTimeWidth = 12960;
? ? ? let dayTimeSum = 86400000; //一天的毫秒數(shù)
? ? ? let time0 = new Date(new Date().toLocaleDateString()).getTime(); //獲取當(dāng)日0點時間戳
? ? ? let yesterdayTime = exactSub(time0, dayTimeSum);
? ? ? let timePointNum = 0;
? ? ? // className: "time-line"
? ? ? if (event.target.className == "time-line") {
? ? ? ? timePointNum = event.layerX;
? ? ? } else {
? ? ? ? timePointNum = exactAdd(event.layerX, event.target.offsetLeft);
? ? ? }
? ? ? let timemove = exactAdd(timePointNum, this.leftMoveWidth);
? ? ? let timePer = exactDiv(timemove, sumTimeWidth); // 點擊的百分比
? ? ? let clickTimeNum = exactMul(dayTimeSum, timePer); //
? ? ? let trueTimeNum = exactAdd(clickTimeNum, yesterdayTime); // time
? ? ? let fomretTime = parseInt(trueTimeNum);
? ? ? this.clickTimeVal = new Date(fomretTime).getTime();
? ? ? this.$emit(
? ? ? ? "handleClickTimeLineFn",
? ? ? ? new Date(fomretTime)
? ? ? );
? ? ? // console.log("trueTimeNum==", trueTimeNum);
? ? ? // console.log("fomretTime==", fomretTime);
? ? ? // console.log("new Date==", new Date(fomretTime));
? ? },
? ? clickLeftMove() {
? ? ? // console.log("點擊的數(shù)量==2=", this.clickCnt);
? ? ? this.handleWidthFn();
? ? ? // console.log("this.$refs.centerRef==", this.$refs.centerRef);
? ? ? // console.log("centerRef=offsetWidth=", this.$refs.centerRef.offsetWidth);
? ? ? // console.log("centerRef=clientWidth=", this.$refs.centerRef.clientWidth);
? ? ? if (this.endTimeFlag) {
? ? ? ? return;
? ? ? }
? ? ? this.clickCnt++;
? ? ? this.leftMoveWidth = this.clickCnt * this.switchWidthNum;
? ? ? let letWidth = this.clickCnt * this.switchWidthNum + "px";
? ? ? // console.log(this.clickCnt);
? ? ? // console.log("this.$refs.timeRef==", this.$refs.timeRef);
? ? ? if (this.leftMoveWidth + this.$refs.centerRef.offsetWidth > 12960) {
? ? ? ? letWidth = 12960 - this.$refs.centerRef.offsetWidth + "px";
? ? ? ? this.endTimeFlag = true;
? ? ? } else {
? ? ? ? this.endTimeFlag = false;
? ? ? }
? ? ? this.$refs.timeRef.style.transform = "translateX(-" + letWidth + ")";
? ? ? this.$refs.timeRef.style.transition = "all 0.5s";
? ? },
? ? clickRightMove() {
? ? ? this.handleWidthFn();
? ? ? if (this.clickCnt > 0) {
? ? ? ? this.clickCnt--;
? ? ? }
? ? ? this.leftMoveWidth = this.clickCnt * this.switchWidthNum;
? ? ? let letWidth = this.clickCnt * this.switchWidthNum + "px";
? ? ? // console.log(this.clickCnt);
? ? ? // console.log("this.$refs.timeRef==", this.$refs.timeRef);
? ? ? if (this.endTimeFlag) {
? ? ? ? this.endTimeFlag = false;
? ? ? }
? ? ? this.$refs.timeRef.style.transform = "translateX(-" + letWidth + ")";
? ? ? this.$refs.timeRef.style.transition = "all 0.5s";
? ? },
? },
};
</script>
<style scoped lang="scss">
.time-main {
? position: relative;
? width: 100%;
? margin: auto;
? overflow: hidden;
? // display: flex;
? // ? border: 1px solid red;
}
.center-content {
? width: calc(100% - 30px);
? margin-left: 30px;
? overflow: hidden;
}
.btn-content {
? width: calc(100% - 30px);
? margin-left: 30px;
? display: flex;
? justify-content: space-between;
? color: #fff;
}
.time-line {
? position: relative;
? font-size: 12px;
? /* left: -7357.15px; */
? // ? left: 30px;
? height: 19px;
? width: 12960px;
? border-bottom: 1px solid rgb(90, 90, 90);
? margin: 0px;
? padding: 0px;
? transition: left 0.9s ease 0s;
? color: #fff;
? z-index: 10;
? &:hover {
? ? cursor: pointer;
? }
? .base-title {
? ? position: absolute;
? ? left: 4px;
? ? bottom: 3px;
? ? color: #fff;
? ? z-index: -1;
? }
}
.base-line {
? position: absolute;
? width: 1px;
? height: 4px;
? bottom: 0px;
? background-color: rgb(90, 90, 90);
? z-index: 9;
}
.left-arow {
? // position: absolute;
? // left: 2%;
? color: #fff;
? font-size: 20px;
}
.right-arow {
? // position: absolute;
? // right: 2%;
? color: #fff;
? font-size: 20px;
}
</style>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
跳轉(zhuǎn)到指定URL,向history棧添加一個新的紀錄,點擊后退會返回至上一個頁面,這篇文章給大家介紹vue如何跳轉(zhuǎn)到其他頁面,包括無參跳轉(zhuǎn)和帶參跳轉(zhuǎn),本文結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-10-10
本篇文章主要介紹了Vue組件開發(fā)初探，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了element-ui?table表格底部合計自定義配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
今天在寫vue項目時碰到的問題是怎么修改vue的網(wǎng)頁圖標,所以下面這篇文章主要給大家介紹了關(guān)于vue項目中更改名字和圖標的簡單實現(xiàn),文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-08-08
vue打包相關(guān)細節(jié)整理(小結(jié))
這篇文章主要介紹了vue打包相關(guān)細節(jié)整理(小結(jié)),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue3實現(xiàn)全局loading指令,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
vue組件vue-treeselect箭頭和叉圖標變大問題及解決
這篇文章主要介紹了vue組件vue-treeselect箭頭和叉圖標變大問題及解決方案，具有很好的參考價值，希望對大家有所幫助。2022-07-07
這篇文章主要介紹了在Vue.js中加載字體的正確方法,本文通過實例圖文相結(jié)合給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
uni-app是一個使用Vue.js開發(fā)的多端開發(fā)框架,下面這篇文章主要給大家介紹了關(guān)于uni-app?vue3接口請求封裝的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了一個手寫的vue放大鏡，組件使用less，文中給出了示例代碼,需要的朋友可以參考下2019-08-08