如何解决使用vue-aplayer插件时出现的问题-创新互联
这篇文章主要介绍如何解决使用vue-aplayer插件时出现的问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联公司是专业的德安网站建设公司，德安接单;提供
成都网站设计、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行德安网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
具体如下：
安装
$ npm install vue-aplayer --save
使用
// ES6
import Aplayer from 'vue-aplayer'
new Vue({
components: {
Aplayer
}
})
属性
这些属性大部分跟Aplayer的选项一样
| 属性名 | 类型 | 默认值 | 描述 |
|---|
| narrow | Boolean | false | 紧凑样式 |
| autoplay | String | null | 是否自动播放，为null表示不会自动播放 |
| showlrc | Boolean | false | 是否显示歌词 |
| mutex | Boolean | false | 当一首音乐正在播放时，暂停其他音乐 |
| theme | String | '#b7daff'（浅蓝色） | 主题颜色 |
| mode | String | 'circulation' | 播放模式，random:随机模式 sigle:单曲循环 circulation:列表循环 order:顺序播放（列表播放完即停止） |
| preload | String | 'auto' | 音乐加载方式，none,metadata,auto |
| listmaxheight | String | none | 播放列表的大高度 |
| music | String | Object or Array | 歌曲信息，详情见下方“歌曲信息” |
歌曲信息
属性music既可以是包含歌曲信息的对象类型，也可以是包含这些对象的数组类型
| 属性名 | 默认值 | 描述 |
|---|
| title | 'Untitled' | 歌曲名 |
| author | 'Unknown' | 歌手 |
| url | required | 歌曲地址 |
| pic | none | 歌曲海报 |
| lrc | none | 歌词或者歌词文件的地址 |
事件
| 事件名 | 参数 | 描述 |
|---|
| play | none | 开始播放时触发 |
| pause | none | 暂停时触发 |
| canplay | none | 当数据支持播放时触发 |
| playing | none | 播放时会定时触发 |
| ended | none | 停止播放时触发 |
| error | none | 错误出现时触发 |
| update:mode | none | 见上面的mode属性 |
刚刚接触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是空的，obj就是空的喽。
如果先给this.musicList赋值了，那么push之后就会酱紫，重复两遍
其实是很好想明白的哈。
补充的代码，看起来更直观
Axios.get('../static/data/musicdata.json').then(res=>{
// let List = res.data.musicData;
// console.log(res);
this.musicList.forEach(element => {
let obj = {
title:element.title,
pic:element.musicImgSrc,
url:element.src,
author:element.author,
lrc:"../static/"+element.lrc
}
this.musicList.push(obj);
console.log(this.musicList);
});
this.isShow=true;
console.log(this.musicList);
}).catch();错误是这样的
正确的是酱紫的
以上是“如何解决使用vue-aplayer插件时出现的问题”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前题目：如何解决使用vue-aplayer插件时出现的问题-创新互联
本文链接：
http://cdkjz.cn/article/hhicg.html
