這篇文章主要介紹了使用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的選項一樣類型 | 預設值 | 描述 | |
---|---|---|---|
#Boolean | false | 緊湊樣式 | |
null | 是否自動播放,為null表示不會自動播放 | showlrc | |
false | 是否顯示歌詞 | ||
Boolean | false | #當一首音樂正在播放時,暫停其他音樂 | |
String | '#b7daff'(淺藍色) | #主題顏色 | |
String | 'circulation' | 播放模式,random:隨機模式sigle:單曲循環circulation:清單循環order:順序播放(清單播放完即停止) | |
String | 'auto' | 音樂載入方式,none,metadata,auto | |
String | none | 播放清單的最大高度 | |
##String | Object or Array | 歌曲訊息,詳見下方「歌曲訊息」 |
屬性music既可以是包含歌曲資訊的物件類型,也可以是包含這些物件的陣列類型
描述 | ||
---|---|---|
歌曲名稱 | author | |
歌手 | #url | |
歌曲位址 | ||
#picnone
#lrc | none | 歌詞或是歌詞檔案的位址 |
---|---|---|
##參數 | 描述 | |
play | #none | 開始播放時觸發 |
pause | none | 暫停時觸發 |
#canplay | none | 當資料支援播放時觸發 |
playing | none | 播放時會定時觸發 |
刚刚接触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='isShow' :autoplay='true' :music="musicList"></a-player> </p> </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();
错误是这样的
正确的是酱紫的
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
利用nodejs爬虫使用superagent和cheerio的方法
以上是在使用vue-aplayer外掛時出現了一些問題如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中,提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單!您將能夠將搜索限制為Y

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

本文系列在2017年中期進行了最新信息和新示例。 在此JSON示例中,我們將研究如何使用JSON格式將簡單值存儲在文件中。 使用鍵值對符號,我們可以存儲任何類型的

利用輕鬆的網頁佈局:8 ESTISSEL插件jQuery大大簡化了網頁佈局。 本文重點介紹了簡化該過程的八個功能強大的JQuery插件,對於手動網站創建特別有用

核心要點 JavaScript 中的 this 通常指代“擁有”該方法的對象,但具體取決於函數的調用方式。 沒有當前對象時,this 指代全局對象。在 Web 瀏覽器中,它由 window 表示。 調用函數時,this 保持全局對象;但調用對象構造函數或其任何方法時,this 指代對象的實例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。這些方法使用給定的 this 值和參數調用函數。 JavaScript 是一門優秀的編程語言。幾年前,這句話可

jQuery是一個很棒的JavaScript框架。但是,與任何圖書館一樣,有時有必要在引擎蓋下發現發生了什麼。也許是因為您正在追踪一個錯誤,或者只是對jQuery如何實現特定UI感到好奇

該帖子編寫了有用的作弊表,參考指南,快速食譜以及用於Android,BlackBerry和iPhone應用程序開發的代碼片段。 沒有開發人員應該沒有他們! 觸摸手勢參考指南(PDF)是Desig的寶貴資源


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver Mac版
視覺化網頁開發工具

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

記事本++7.3.1
好用且免費的程式碼編輯器