vue歌曲进度条示例代码

简介

Vue.js是一款流行的JavaScript框架，可以用于构建现代化的Web应用程序。在Vue.js中，可以使用组件来构建复杂的用户界面。本文将详细讲解如何使用Vue.js构建一个歌曲进度条组件。

歌曲进度条组件

歌曲进度条组件是一个常见的UI组件，用于显示歌曲的播放进度。在Vue.js中，可以使用组件来构建歌曲进度条。以下是歌曲进度条组件的示例代码：

<template>
  <div class="song-progress">
    <div class="song-progress-bar" :style="{ width: progress + '%' }"></div>
  </div>
</template>

<script>
export default {
  props: {
    duration: {
      type: Number,
      required: true
    },
    currentTime: {
      type: Number,
      required: true
    }
  },
  computed: {
    progress() {
      return (this.currentTime / this.duration) * 100;
    }
  }
};
</script>

<style>
.song-progress {
  width: 100%;
  height: 4px;
  background-color: #ddd;
}

.song-progress-bar {
  height: 100%;
  background-color: #f00;
}
</style>

在上面的代码中，我们定义了一个名为SongProgress的Vue.js组件。该组件包含一个名为song-progress的div元素和一个名为song-progress-bar的div元素。我们使用:style绑定了song-progress-bar的宽度，根据当前播放时间和歌曲总时长计算出进度条的宽度。

示例说明

以下是两个示例说明，演示如何使用Vue.js构建歌曲进度条组件：

示例1：使用歌曲进度条组件

以下是使用SongProgress组件的示例代码：

<template>
  <div>
    <audio ref="audio" src="song.mp3" @timeupdate="updateTime"></audio>
    <song-progress :duration="duration" :currentTime="currentTime"></song-progress>
  </div>
</template>

<script>
import SongProgress from "./SongProgress.vue";

export default {
  components: {
    SongProgress
  },
  data() {
    return {
      duration: 0,
      currentTime: 0
    };
  },
  mounted() {
    this.$refs.audio.addEventListener("loadedmetadata", () => {
      this.duration = this.$refs.audio.duration;
    });
  },
  methods: {
    updateTime() {
      this.currentTime = this.$refs.audio.currentTime;
    }
  }
};
</script>

在上面的代码中，我们使用了SongProgress组件来显示歌曲进度条。我们在mounted钩子函数中监听音频文件的loadedmetadata事件，以获取歌曲总时长。我们还定义了一个updateTime方法，用于更新当前播放时间。

示例2：自定义歌曲进度条样式

以下是自定义歌曲进度条样式的示例代码：

<template>
  <div class="song-progress">
    <div class="song-progress-bar" :style="{ width: progress + '%' }"></div>
  </div>
</template>

<script>
export default {
  props: {
    duration: {
      type: Number,
      required: true
    },
    currentTime: {
      type: Number,
      required: true
    },
    color: {
      type: String,
      default: "#f00"
    }
  },
  computed: {
    progress() {
      return (this.currentTime / this.duration) * 100;
    }
  }
};
</script>

<style>
.song-progress {
  width: 100%;
  height: 4px;
  background-color: #ddd;
}

.song-progress-bar {
  height: 100%;
  background-color: var(--song-progress-color, #f00);
}
</style>

在上面的代码中，我们在SongProgress组件中添加了一个color属性，用于自定义进度条的颜色。我们还使用CSS变量来设置进度条的背景颜色，以便在使用组件时可以通过设置CSS变量来自定义进度条的颜色。