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

 更新时间:2018年03月02日 09:38:47   作者:Sky786905664  
这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

安装

$ npm install vue-aplayer --save

使用

<aplayer autoplay :music="{
 title: 'Preparation',
 author: 'Hans Zimmer/Richard Harvey',
 url: 'http://devtest.qiniudn.com/Preparation.mp3',
 pic: 'http://devtest.qiniudn.com/Preparation.jpg',
 lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
}">
</aplayer>
// 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 ,现在的代码版本是这样的~

<template>
 <div class="music">
   <a-player v-if='isShow' :autoplay='true' :music="musicList"></a-player>
 </div>
</template>
<script>
import Axios from 'axios'
import VueAplayer from 'vue-aplayer'
export default{
  data(){
    return {
      musicList:[],
      isShow:false
    }
  },
  mounted(){
    Axios.get('../static/data/musicdata.json').then(res=>{
       let List = res.data.musicData;
      // console.log(res);
      List.forEach(element => {
        let obj = {
          title:element.title,
          pic:element.musicImgSrc,
          url:element.src,
          author:element.author,
          lrc:"../static/"+element.lrc
        }
        this.musicList.push(obj);
      });
        this.isShow=true; 
        console.log(this.musicList);
    }).catch(); 
  },
  components: {
    'a-player': VueAplayer
  }
}  
</script>
<style>
.music{
  margin:1rem 0;
}
</style>

还是有问题,网上查过之后,是因为在执行了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(); 

错误是这样的

正确的是酱紫的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue3组合式api创建单文件组件的写法

    vue3组合式api创建单文件组件的写法

    Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性,本文为大家介绍了vue3利用组合式api创建单文件组件的方法,感兴趣的可以了解下
    2023-08-08
  • vue.js实现照片放大功能

    vue.js实现照片放大功能

    这篇文章主要为大家详细介绍了vue.js实现照片放大功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue中消息横向滚动时setInterval清不掉的问题及解决方法

    Vue中消息横向滚动时setInterval清不掉的问题及解决方法

    最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,结果滚动的速度越来越快。接下来通过本文给大家分享Vue中消息横向滚动时setInterval清不掉的问题及解决方法,感兴趣的朋友一起看看吧
    2019-08-08
  • 在Vue中使用Select选择器拼接label的操作

    在Vue中使用Select选择器拼接label的操作

    这篇文章主要介绍了在Vue中使用Select选择器拼接label的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 使用Vue2实现简单的购物车功能(可直接使用)

    使用Vue2实现简单的购物车功能(可直接使用)

    这篇文章主要给大家介绍了如何使用Vue2实现简单的购物车功能,文中有相关的代码示例,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-08-08
  • 详解Vue3中侦听器watch的使用教程

    详解Vue3中侦听器watch的使用教程

    学过 vue2 的小伙伴们肯定学习过侦听器,主要是用来监听页面数据或者是路由的变化,来执行相应的操作,在 vue3里面呢,也有侦听器的用法,功能基本一样,本文就来为大家详细讲讲
    2022-07-07
  • Vue使用el-tree 懒加载进行增删改查功能的实现

    Vue使用el-tree 懒加载进行增删改查功能的实现

    这篇文章主要介绍了Vue使用el-tree 懒加载进行增删改查,以懒加载的形式展示,目录根据需求需要有新增 编辑 删除 操作以及操作后的刷新树结构,具体实现代码跟随小编一起看看吧
    2021-08-08
  • Vue中关于this指向的问题示例详解

    Vue中关于this指向的问题示例详解

    在Vue中,方法体里用this调用vue实例的数据,有时会指向window,导致调用失败报错,这篇文章主要介绍了Vue中关于this指向的问题 ,需要的朋友可以参考下
    2022-07-07
  • 如何搭建一个完整的Vue3.0+ts的项目步骤

    如何搭建一个完整的Vue3.0+ts的项目步骤

    这篇文章主要介绍了如何搭建一个完整的Vue3.0+ts的项目步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue3+vite项目H5配置适配步骤详解

    vue3+vite项目H5配置适配步骤详解

    这篇文章主要为大家介绍了vue3+vite项目H5配置适配步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10

最新评论