菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端基础-付盼盼-20230705 [打印本页]

作者: 下潜 时间: 2023-7-6 18:23
标题: 前端基础-付盼盼-20230705
一、学习内容

模板

页面级（路由级）组件views/Player.vue

新建components/player文件夹存放播放页面的组件

|----PlayerHeader.vue：(复制修改之前的歌单详情页头部组件，修改图片，title等)

|----PlayerMiddle.vue：中间图片/歌词，可以切换，使用swiper

|----PlayerBottom.vue：底部进度条

|-----NormalPlayer.vue: 普通播放页面

在App.vue中导入--注册--使用（测试用）将这三个组件放入NormalPlayer中，NormalPlayer放入Player中，Playe放在App.vue中

NormalPlayer.vue
显示和隐藏

很多地方都会用到默认播放页面的显示和隐藏，全局变量Vuex

找到store/index.js,加入变量记录默认播放页面是否展示，默认关闭。
在播放页面使用全局变量

Player.vue中v-show使用全局变量控制显示/隐藏
在DetailBottom.vue中，为每首音乐加入点击事件，修改全局变量isFullScreen。显示播放页面。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)