面板可以使用 vant 中的组件:弹出层popup
属性: v-model 控制面板的显示和隐藏的
特点:
v-model:设置为 true,面板就开启
点击黑色遮罩层区域,面板就关闭
步骤:
1.0 由于频道操作是在 home 中完成了,home 中的逻辑已经足够多了,如果我们再将频道操作的逻辑也放到 home 中。将 来 home 页面的维护和更新会非常的麻烦。
2.0 在后面操作的过程中我们应该将频道操作面板单独封装为一个组件
步骤:
这里会通过父子组件的传值来控制频道面板的显示与隐藏,会涉及到一个单向数据流的问题,其实这个问题就是说,如果你在父组件把值传给子组件,这个值只能在父组件修改,不能在子组件修改的,如果在子组件中修改的话会报错
这个概念叫做单向数据流, 如果遇到这个问题可以用其他的方式比如v-model的原理或者this.$parent这种方式
利用vant中Grid 宫格组件grid
在黑马头条中所有的频道数据是固定的: 例如:有 56 个我的频道:就是用户会从这 56 个频道中选择一些自己喜欢的频道成为我的频道:
选择 5 个: css, javascript, 前端, C++, python
频道推荐:就是 56 个频道中除去已经被选择成为我的频道的 5 条数据后剩下的数据
总共有: 51 个
前提:
什么是我的频道:
就是首页中频道区域中显示的内容
步骤:
a. 得到我的频道数据
打开频道面板时,应该从 index/index.vue 中将当前页面上的频道数据传给 channel 组件
index.vue 与 channel 组件是父子关系
数据要从 index.vue 传入到 channel 中
可以使用 props:
父传: 给子组件添加一个自定义属性:
子接:在子组件中通过 props 来接收:
export default {
props: [‘data’]
}
在 channel 组件中接收数据
b. 将频道数据进行渲染就可以 了
强调:什么是频道推荐
在黑马头条中有固定的频道数据,所谓的频道推荐指的就是所有频道数据中,除掉 我的频道数据的这部分数据
步骤:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="app">
<div>
姓:<input type="text" v-model="firname"> 名:
<input type="text" v-model="lastname">
div>
<div>
姓名: {{ fullname }}
div>
<div>
姓名: {{ fullname }}
div>
<div>
姓名: {{ fullname }}
div>
<div>
姓名: {{ fullname }}
div>
<div>
姓名: {{ fullname }}
div>
div>
body>
<script src="./node_modules/vue/dist/vue.min.js">script>
<script>
var vm = new Vue({
el: '#app',
data: {
firname: '张', // 姓
lastname: '三' // 名
},
computed: {
// fullname 后面对应的这个函数:
// 1.0 只会在第一次使用 fullname 时执行一次
// 2.0 执行之后会将得到的结果进行缓存,下一次再用到 fullname,直接从缓存中取(不会再执行函数)
// 3.0 当计算属性的依赖项发生改变时,会再次执行一次函数,并且会将得到的结果再次进行缓存
fullname: function () {
console.log('fullname')
// 姓 + 名
return this.firname + this.lastname
}
}
})
script>
html>
注意点:
会将函数执行的结果进行缓存,再使用这个计算属性直接从缓存中取
一旦计算属性中的依赖项发生改变,函数需要再次执行一次,会再将执行的结果再次进行缓存
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
body>
<script>
// 数组1:所有的频道数组
var allChannel = [
{ id: 0, name: 'C++' },
{ id: 1, name: 'java' },
{ id: 2, name: 'javascript' },
{ id: 3, name: 'go' },
{ id: 4, name: 'css' },
{ id: 5, name: 'vue' },
{ id: 6, name: 'jquery' },
]
// 数组2:我的频道数据
var myChannel = [
{ id: 0, name: 'C++' },
{ id: 1, name: 'java' },
{ id: 3, name: 'go' }
]
// 任务:从数组1中删除所有数组2中的元素
// 快速删除的方式:涉及到两个方法: map filter
// 1.0 得到我的频道数据中所有元素的 id 集合
var ids = myChannel.map(item => {
return item.id
})
console.log(ids) // [0, 1, 3]
// 2.0 遍历所遥频道数数组:判断当前频道数据在 id 集合中是否存在,
// 如果不存在,就直接返回,如果存在就不理会
var channel = allChannel.filter(item => {
return !ids.includes(item.id)
})
console.log(channel)
script>
html>
注意点:
map & filter & includes
步骤:
a. 给频道推荐下的每个频道数据添加一个点击事件
b. 得到被点击的元素,直接将元素添加到我的频道数据中
c. 将修改后的频道数据进行保存
只要修改了我的频道,推荐会自动修改:
提交到服务器接口的数据格式为
{
channels: [
{ id: 0, seq: 1 }, // id 频道的 id, seq 频道的顺序(seq 是从 1 开始的)
{ id: 1, seq: 2 } // 注意点:seq = 1 的位置永远是给推荐留着的
]
}
步骤:
注意点:
步骤:
这里有衍生出一个知识点.sync:
v-model原理:传入的键:value , 修改的事件名 input -->
为了能够让数据与组件进行双向绑定:不使用 v-model 的情况下进行双向绑定,可以使用一个关键字 .sync
.sync 与 v-model 的作用是一样的,也可以用来进行双向绑定
.sync 在传入时 键:为 任意的(xxx) 修改的事件名 update:xxx
bug1:
bug2:
bug3:
<template>
<div>
<van-popup :value="show" @input="myinput" position="bottom" :style="{ height: '80%' }">
<van-cell title="我的频道">
<template #default>
<van-button plain v-if="isShow===false" @click="isShow=true" round size="mini" type="danger">编辑van-button>
<van-button plain v-else @click="isShow=false" round size="mini" type="danger">完成van-button>
template>
van-cell>
<van-grid>
<van-grid-item class="itemF" @click="changeChannel(index)" v-for="(item, index) in channelList" :key="index">
<template #text>
<span class="word" :class="{active:active===index}">{{item.name}}<van-icon @click.stop="delChannel(item,index)" v-show="isShow && index!==0" class="iconx" name="clear" />span>
template>
van-grid-item>
van-grid>
<van-cell title="频道推荐" />
<van-grid>
<van-grid-item @click="addChannel(item)" v-for="(item, index) in newChannel" :key="index" :text="item.name" />
van-grid>
van-popup>
div>
template>
<script>
// 导入发送得到全部频道列表,添加用户频道的网络请求
import { apiGetAllChannel, apiUpdateChannel } from '@/api/channel'
import { setLocal } from '@/utils/mylocal'
export default {
// show:控制面板的显示与隐藏
// channelList: 频道列表
// active : 当前所在频道的下标
props: ['show', 'channelList', 'active'],
data () {
return {
// 控制叉叉显示隐藏
isShow: false,
// 全部频道
allChannel: []
}
},
mounted () {
this.getAllChannel()
},
computed: {
newChannel () {
// 第一步得到我的频道数据中所有元素id的集合
const ids = this.channelList.map((item) => {
return item.id
})
// 第二步得到我的频道不在全部频道中的那些频道
const newArr = this.allChannel.filter((item) => {
return !ids.includes(item.id)
})
return newArr
}
},
methods: {
// 将来点击遮罩尘会触发这个方法:有一个参数
myinput (v) {
this.$parent.show = v
},
// 发送请求得到全部频道列表数据
async getAllChannel () {
const res = await apiGetAllChannel()
// console.log(res)
this.allChannel = res.data.data.channels
},
// 点击频道推荐里面的频道然后添加到我的频道中,并且在频道推荐点击中的自己要变没
// 这里只用操作一步主要是用的计算属性的特性:缓存计算结果 并且 当计算属性依懒性发生改变时会重新执行计算属性
addChannel (item) {
this.channelList.push(item)
this.saveChannel(item)
this.$set(item, 'isLoading', false)
this.$set(item, 'loading', false)
this.$set(item, 'finished', false)
this.$set(item, 'articleList', [])
},
// 删除频道
delChannel (item, index) {
this.channelList.splice(index, 1)
this.saveChannel(item, index)
if (this.active > index) {
this.$parent.active = this.active - 1
}
},
// 封装保存频道列表(修改删除channelList后,要么从本地修改要么发请求)的方法
async saveChannel (item, index) {
// 判断有没有登录,没有登录的话给localStorage中设置添加,删除后的用户频道
// 下次没有登录的人直接从localStorage中取出来已经添加,删除过的用户频道
const token = this.$store.state.userInfo.token
if (!token) {
setLocal('channelList', this.channelList)
} else {
// 如果有登录的话,就发送请求添加,删除用户频道
// 这里发送请求的参数是一个数组里面是 :新的频道的id与序号
// seq:序号默认是从1开始的
// 由于id=0对应的是推荐,所以这个数据不应该被操作,我们应该把id=0的数据从这个用户频道删掉
const channels = this.channelList.slice(1).map((item, index) => {
return {
id: item.id,
seq: index + 2
}
})// [{id:'频道的id',seq:'频道的序号'},{}]
// console.log(channels)
await apiUpdateChannel(channels)
}
},
changeChannel (index) {
// this.$parent.active = index
this.$emit('update:active', index)
}
}
}
script>