欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用vue-aplayer插件時(shí)出現(xiàn)的問題的解決

 更新時(shí)間:2018年03月02日 09:38:47   作者:Sky786905664  
這篇文章主要介紹了使用vue-aplayer插件時(shí)出現(xiàn)的問題的解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了使用vue-aplayer插件時(shí)出現(xiàn)的問題的解決,分享給大家,具體如下:

安裝

$ 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的選項(xiàng)一樣

屬性名 類型 默認(rèn)值 描述
narrow Boolean false 緊湊樣式
autoplay String null 是否自動(dòng)播放,為null表示不會(huì)自動(dòng)播放
showlrc Boolean false 是否顯示歌詞
mutex Boolean false 當(dāng)一首音樂正在播放時(shí),暫停其他音樂
theme String '#b7daff'(淺藍(lán)色) 主題顏色
mode String 'circulation' 播放模式,random:隨機(jī)模式 sigle:單曲循環(huán) circulation:列表循環(huán) order:順序播放(列表播放完即停止)
preload String 'auto' 音樂加載方式,none,metadata,auto
listmaxheight String none 播放列表的最大高度
music String Object or Array 歌曲信息,詳情見下方“歌曲信息”

歌曲信息

屬性music既可以是包含歌曲信息的對(duì)象類型,也可以是包含這些對(duì)象的數(shù)組類型

屬性名 默認(rèn)值 描述
title 'Untitled' 歌曲名
author 'Unknown' 歌手
url required 歌曲地址
pic none 歌曲海報(bào)
lrc none 歌詞或者歌詞文件的地址

事件

事件名 參數(shù) 描述
play none 開始播放時(shí)觸發(fā)
pause none 暫停時(shí)觸發(fā)
canplay none 當(dāng)數(shù)據(jù)支持播放時(shí)觸發(fā)
playing none 播放時(shí)會(huì)定時(shí)觸發(fā)
ended none 停止播放時(shí)觸發(fā)
error none 錯(cuò)誤出現(xiàn)時(shí)觸發(fā)
update:mode none 見上面的mode屬性

剛剛接觸vue-aplayer,從github上找到了用法,首先需要npm install vue-aplayer –save ,之后在組件中引入import VueAplayer from ‘vue-aplayer',別忘了注冊components: {
'a-player': VueAplayer
}
這里還有一個(gè)問題,用v-if,而不是v-show,因?yàn)槭钱惒秸埱螅砸婚_始播放器中是沒有歌曲的,所有給了個(gè)v-if不然會(huì)插件默認(rèn)會(huì)先生成播放器,導(dǎo)致報(bào)錯(cuò)

–2017.12.2 ,現(xiàn)在的代碼版本是這樣的~

<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>

還是有問題,網(wǎng)上查過之后,是因?yàn)樵趫?zhí)行了play()方法以后立即執(zhí)行pause()方法,至于解決方法……還在尋找中

之前遇到的問題是

~~~~想明白了一些


醬紫,this.musicList是空的,obj就是空的嘍。

如果先給this.musicList賦值了,那么push之后就會(huì)醬紫,重復(fù)兩遍

其實(shí)是很好想明白的哈。

補(bǔ)充的代碼,看起來更直觀

 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(); 

錯(cuò)誤是這樣的

正確的是醬紫的

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航

    vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航

    這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 對(duì)vue中methods互相調(diào)用的方法詳解

    對(duì)vue中methods互相調(diào)用的方法詳解

    今天小編就為大家分享一篇對(duì)vue中methods互相調(diào)用的方法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 10分鐘上手vue-cli 3.0 入門介紹

    10分鐘上手vue-cli 3.0 入門介紹

    這篇文章主要介紹了10分鐘上手vue-cli 3.0 入門介紹,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue3中keep-alive和vue-router的結(jié)合使用方式

    vue3中keep-alive和vue-router的結(jié)合使用方式

    這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式,?具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue項(xiàng)目在IE瀏覽器下運(yùn)行空白問題及解決

    vue項(xiàng)目在IE瀏覽器下運(yùn)行空白問題及解決

    IE11瀏覽器無法解析ES6語法導(dǎo)致Vue項(xiàng)目在IE11下顯示空白,解決方法包括安裝babel-polyfill,并在項(xiàng)目的main.js文件中引入babel-polyfill,此外,js-base64版本3及以上不兼容IE11,解決辦法是使用版本3以下的js-base64,這些措施可以幫助兼容IE11,確保項(xiàng)目正常運(yùn)行
    2024-09-09
  • vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐教程

    vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐教程

    這篇文章主要給大家介紹了關(guān)于vue.js中Vue-router 2.0基礎(chǔ)實(shí)踐的相關(guān)資料,其中包括vue-router 2.0的基礎(chǔ)用法、動(dòng)態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關(guān)知識(shí),需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-05-05
  • 詳解vue2.0模擬后臺(tái)json數(shù)據(jù)

    詳解vue2.0模擬后臺(tái)json數(shù)據(jù)

    這篇文章主要介紹了vue2.0模擬后臺(tái)json數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • 解決Vue數(shù)據(jù)更新了但頁面沒有更新的問題

    解決Vue數(shù)據(jù)更新了但頁面沒有更新的問題

    在vue項(xiàng)目中,有些我們會(huì)遇到修改完數(shù)據(jù),但是視圖卻沒有更新的情況,具體的場景不一樣,解決問題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下
    2023-08-08
  • 詳解VUE前端按鈕權(quán)限控制

    詳解VUE前端按鈕權(quán)限控制

    這篇文章主要介紹了VUE前端按鈕權(quán)限控制,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Vue?warn:Property?"state"?was?accessed?during?render解決

    Vue?warn:Property?"state"?was?accessed?during

    這篇文章主要為大家介紹了Vue?warn:Property?"state"?was?accessed?during?render的報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06

最新評(píng)論