【Vue2】音乐播放器

需求：

1、输入关键词发起axios请求，获取播放列表

2、点击播放按钮，根据点击的数据id值，发起axios请求获取音频播放路径，并在标签下的src属性使用该路径，并使黑胶唱片区域开始动画

3、根据播放时的音频id值，发起axios请求获取热门留言区域

4、当点击MV图标时,根据选择视频的id值发起axios请求，播放对应视频，点击空白区域暂停并退出视频

遇到的问题：

问题一：

多次重复写了axios根路径

代码不足够简洁，利用率不高，没有复用性

应当使代码工程化些，可以设定一个axios默认的基地址

axios.defaults.baseURL = 'https://autumnfish.cn'

问题二：

对音频标签和视频标签掌握不熟练，两个标签都自带play()播放和pause()暂停属性

问题三：

对$refs掌握不好

在标签中可以给可以添加ref属性，当用this.$refs.(ref值)时，就可以获取该标签的DOM元素

也可以调用该标签的属性

<video ref='video' :src="mvUrl" controls="controls">video>

this.$refs.video.pause()

调用时可以将播放中的视频暂停

问题四：

之前没有遇到过

:class="{playing:isPlay}"

对类进行动态绑定，内容用{}包括，当isPlay为true时返回playing，否则不返回值

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！