vue-aplayer プラグイン使用時のいくつかの問題を解決する方法-jsチュートリアル-php.cn

vue-aplayer プラグイン使用時のいくつかの問題を解決する方法

亚连

リリース： 2018-06-02 09:43:37

オリジナル

4391 人が閲覧しました

この記事では、vue-aplayer プラグインを使用する際に発生する問題の解決策を主に紹介しますので、参考にしてください。

この記事では、vue-aplayer プラグインを使用するときに発生する問題の解決策を紹介したいと思います。詳細は次のとおりです。

属性

これらの属性のほとんどはAplayerの属性と同じです

属性名タイプ

デフォルト値

説明狭いブールfalseコンパクトスタイルautoplayStringnullはい自動的に再生します。nullは自動的に再生されないことを意味しますshowlrcブールfalse歌詞を表示するかどうかミューテックスブールfalse音楽の再生中に他の音楽を一時停止テーマ文字列'#b7daff' (水色)テーマカラーモード文字列'circulation'再生モード、ランダム: ランダムモード単一: シングルループ循環: リストサイクル順序: 順次再生 (リストが再生された後に停止)プリロード文字列'auto'音楽読み込みメソッド、なし、メタデータ、自動listmaxheightStringnone プレイリストの最大高さmusicStringObject or Array曲情報、「曲情報」を参照詳細は以下をご覧ください曲情報










			属性音楽には曲を含めることができます情報のオブジェクトタイプ、またはこれらのオブジェクトを含む配列タイプ

属性名デフォルト値

説明

タイトル「無題」曲名作者「Unknown」歌手url必須曲アドレス写真なし歌ポスターlrcなし歌詞または歌詞ファイルのアドレスイベントイベント名

パラメータ説明

プレイなしトリガー再生開始時使用中なし一時停止時にトリガー再生可能なしデータが再生をサポートしている場合にトリガー再生中なしプレイ中に定期的にトリガーされます終了なしプレイを停止するとトリガーされますエラーなしエラーが発生したときにトリガーされますupdate:modeなし上記の 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>
 <p class="music">
   <a-player v-if=&#39;isShow&#39; :autoplay=&#39;true&#39; :music="musicList"></a-player>
 </p>
</template>
<script>
import Axios from &#39;axios&#39;
import VueAplayer from &#39;vue-aplayer&#39;
export default{
  data(){
    return {
      musicList:[],
      isShow:false
    }
  },
  mounted(){
    Axios.get(&#39;../static/data/musicdata.json&#39;).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: {
    &#39;a-player&#39;: VueAplayer
  }
}  
</script>
<style>
.music{
  margin:1rem 0;
}
</style>

ログイン後にコピー

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

之前遇到的问题是

~~~~想明白了一些

酱紫，this.musicList是空的，obj就是空的喽。

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

其实是很好想明白的哈。

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

 Axios.get(&#39;../static/data/musicdata.json&#39;).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();

ログイン後にコピー

错误是这样的