基于vue

基于vue

最近在写一个基于 github-page 和 gist 的博客, 想加个音乐播放器, 做了一个早上, 发出来分享一下

演示地址 https://github-laziji.github.io

效果

使用到的组件

element组件

布局 Layout

按钮 Button

滑块 Slider

进度条 Progress

弹出框 Popover

html5组件

audio

实现代码

更详细的实现可以看 https://github.com/GitHub-Laziji/vblog

placement="top-start"

trigger="hover">

placement="top-start"

trigger="hover">

color="#67C23A"

type="circle"

:percentage="music.volume">

color="#67C23A"

type="circle"

:percentage="music.volume">

@click="changeVolume(-10)"

icon="el-icon-minus"

circle>

@click="changeVolume(-10)"

icon="el-icon-minus"

circle>

@click="changeVolume(10)"

icon="el-icon-plus"

circle>

@click="changeVolume(10)"

icon="el-icon-plus"

circle>

@click="play"

id="play"

slot="reference"

:icon="music.isPlay?'el-icon-refresh':'el-icon-caret-right'"

circle>

@click="play"

id="play"

slot="reference"

:icon="music.isPlay?'el-icon-refresh':'el-icon-caret-right'"

circle>

&lthttp://;/el-col>

@change="changeTime"

:format-tooltip="formatTime"

:max="music.maxTime"

v-model="music.currentTime"

style="width: 100%;">

@change="changeTime"

:format-tooltip="formatTime"

:max="music.maxTime"

v-model="music.currentTime"

style="width: 100%;">

{{formatTime(music.currentTime)}}/{{formatTime(music.maxTime)}}

总结

以上所述是给大家介绍的基于vue-element组件实现音乐播放器功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，会及时回复大家的！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。