传送:vue 拖拽进度条滑动组件(一) 竖向滑动插件
传送:vue 拖拽进度条滑动组件(二) 横向滑动插件
progress.js
//是否有指定class存在export function hasClass(el, className) {let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')return reg.test(el.className)}//如果存在什么都不做，否则就设置添加export function addClass(el, className) {if (hasClass(el, className)) {return}let newClass = el.className.split(' ')newClass.push(className)el.className = newClass.join(' ')}export function getData(el, name, val) {const prefix = 'data-'if (val) {return el.setAttribute(prefix + name, val)}return el.getAttribute(prefix + name)}let elementStyle = document.createElement('div').stylelet vendor = (() => {let transformNames = {webkit: 'webkitTransform',Moz: 'MozTransform',O: 'OTransform',ms: 'msTransform',standard: 'transform' //以上前缀都不满足，就用这个}for (let key in transformNames) {if (elementStyle[transformNames[key]] !== undefined) {return key}}return false})()export function prefixStyle(style) {if (vendor === false) {return false}if (vendor === 'standard') {return style}return vendor + style.charAt(0).toUpperCase() + style.substr(1)}
横向滑动子组件horizontalprogress.vue:
<template><div class="progress-bar" ref="progressBar" @click="progressClick"><div class="bar-inner"><!-- 背景 --><div class="progress" ref="progress"></div><!-- 小圆点 --><div class="progress-btn-wrapper" ref="progressBtn" @touchstart.prevent="progressTouchStart" @touchmove.prevent="progressTouchMove" @touchend.prevent="progressTouchEnd"><div class="progress-btn"></div></div></div></div></template><script>import { prefixStyle } from './progress'const progressBtnWidth = 16const transform = prefixStyle('transform')export default {props: {percent: {type: Number,default: 0}},created() {this.touch = {} //创建一个touch对象},methods: {progressTouchStart(e) {//创建一个标志，意思它已经初始化完this.touch.initiated = true//手指的位置this.touch.startX = e.touches[0].pageX//当前滚动，滚动条的位置this.touch.left = this.$refs.progress.clientWidth},progressTouchMove(e) {//如果初始化完则什么都不做if (!this.touch.initiated) {return}const deltaX = e.touches[0].pageX - this.touch.startX //计算差值 //max 的0 意思不能小于0 、、、、min，不能超过整个滚动条的宽度const offsetWidth = Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth, Math.max(0, this.touch.left + deltaX))this._offset(offsetWidth)},progressTouchEnd() {this.touch.initiated = false//滚动完后要给父组件派发一个事件this._triggerPercent()},//点击改变歌曲播放进度progressClick(e) {const rect = this.$refs.progressBar.getBoundingClientRect() //是一个获取距离的方法const offsetWidth = e.pageX - rect.leftthis._offset(offsetWidth)// 这里当我们点击 progressBtn 的时候，e.offsetX 获取不对this._triggerPercent()},_triggerPercent() {const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidthconst percent = this.$refs.progress.clientWidth / barWidththis.$emit('percentChange', percent)},//偏移方法_offset(offsetWidth) {this.$refs.progress.style.width = `${offsetWidth}px` //获取进度条的位置，距离左右的距离this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px,0,0)` //小球的偏移}},watch: {//它是不断改变的percent(newPercent) {//大于0 而且不是在拖动的状态下，拖动的时候不要改变if (newPercent >= 0 && !this.touch.initiated) {const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth //进度条的总宽度 内容-按钮的宽度const offsetWidth = newPercent * barWidth //应该偏移的宽度this._offset(offsetWidth)}}}}</script><style scoped lang="less">.progress-bar {height: 30px;.bar-inner {position: relative;top: 13px;height: 10px;background: rgba(0, 0, 0, 0.3);.progress {position: absolute;height: 100%;background: #ffcd32;}.progress-btn-wrapper {position: absolute;left: -8px;top: -10px;width: 30px;height: 30px;.progress-btn {position: relative;top: 7px;left: 7px;box-sizing: border-box;width: 16px;height: 16px;border: 3px solid #333;border-radius: 50%;background: #ffcd32;}}}}</style>
父级调用子组件代码:
<template><div><div class="my-progress"><my-progress @percentChange="percentChange" :percent="currentRate"></my-progress><div class="btn"><div id="startV" @click="playVideo()">{{isStart?'暂停播放':'开始播放'}}</div><div id="endV" @click="endVideo()">结束播放</div></div><audio :src="bgm" controls="controls" ref="myAudio" style="display:none;" @timeupdate="updateTime"> </audio></div></div></template><script>import MyProgress from "../components/progress/horizontalprogress";export default {data() {return {isStart: false,currentRate: 0,currentTime: 0,durationTime: 0, //总时长bgm: '/default/newimages/danpinye/zhejiushiai11.mp3'};},components: {MyProgress},destroyed() {this.$nextTick(() => {this.$refs.myAudio.pause();})},mounted() {var audio = this.$refs.myAudio;// 获取总时长audio.addEventListener("canplay", () => {this.durationTime = this.$refs.myAudio.duration;});},watch: {currentTime(val) {this.currentRate = this.currentTime / this.durationTime;}},methods: {percentChange(val) {var audio = this.$refs.myAudio;audio.currentTime = val * this.durationTime;this.isStart = true;audio.play();},updateTime(e) {this.currentTime = e.target.currentTime;this.currentRate = this.currentTime / this.$refs.myAudio.duration;},// 开始/暂停播放playVideo() {this.currentTime = this.$refs.myAudio.currentTime;var audio = this.$refs.myAudio;if (audio.paused) {audio.play();this.isStart = true;} else {audio.pause();this.isStart = false;}},// 结束播放endVideo() {this.isStart = false;this.currentTime = 0;this.currentRate = 0;this.$refs.myAudio.pause();this.$refs.myAudio.currentTime = 0;}},computed: {}}</script><style lang='less' scoped>.fl {float: left;}.fr {float: right;}.my-progress {height: 600px;margin: 3%;padding: 3%;box-sizing: border-box;.btn {width: 100%;overflow: hidden;text-align: center;margin: 8% auto 0;div {width: 45%;display: inline-block;text-align: center;background: rgb(166, 228, 161);color: #ffffff;border-radius: 4px;padding: 5px 0;}div:first-child {margin-right: 10px;}}}</style>
