使用vue-aplayer插件时出现的问题的解决

前端之家收集整理的这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了使用vue-aplayer插件时出现的问题的解决分享给大家,具体如下:

安装

使用

// ES6 import Aplayer from 'vue-aplayer'

new Vue({
components: {
Aplayer
}
})

属性

这些属性大部分跟Aplayer的选项一样

属性自动播放,为null表示不会自动播放显示歌词主题颜色随机模式 sigle:单曲循环 circulation:列表循环 order:顺序播放(列表播放完即停止)Metadata,auto

歌曲信息

属性music既可以是包含歌曲信息的对象类型,也可以是包含这些对象的数组类型

类型 默认值 描述
属性required文件的地址

事件

默认值 描述
事件名 支持播放时触发错误出现时触发属性

刚刚接触vue-aplayer,从github上找到了用法,首先需要npm install vue-aplayer –save ,之后在组件中引入import VueAplayer from ‘vue-aplayer',别忘了注册components: { 'a-player': VueAplayer } 这里还有一个问题,用v-if,而不是v-show,因为是异步请求,所以一开始播放器中是没有歌曲的,所有给了个v-if不然会插件默认会先生成播放器,导致报错

–2017.12.2,现在的代码版本是这样的~

还是有问题,网上查过之后,是因为在执行了play()方法以后立即执行pause()方法,至于解决方法……还在寻找中

之前遇到的问题是

~~~~想明白了一些

如果先给this.musicList赋值了,那么push之后就会酱紫,重复两遍

其实是很好想明白的哈。

补充的代码,看起来更直观

{ // let List = res.data.musicData; // console.log(res); this.musicList.forEach(element => { let obj = { title:element.title,lrc:"../static/"+element.lrc } this.musicList.push(obj); console.log(this.musicList); }); this.isShow=true; console.log(this.musicList); }).catch();

错误是这样的

正确的是酱紫的

内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章

参数 描述