头条案例day04：

频道列表：

给导航栏上的标题图标绑定点击事件
使用vant组件--- Popup弹出层

 closeable   //是否显示关闭图标，显示
  close-icon-position="top-left"   //X按钮位置，在上边
  position="bottom"   //    X按钮退出弹出层
  :style="{ height: '100%' }"   //  内容高度铺满屏幕

铺设频道列表页面：我的频道/推荐频道

使用vant组件--- cell单元格：标题栏

<van-cell></van-cell>
内容title使用插槽插入，van-botton按钮。
<van-cell :border="false" center>  //  去除变框， 内容垂直居中
      <div slot="title" class="title-text">我的频道</div>
      <van-button type="danger" plain round size="mini">完成/编辑</van-button>
    //   内容红色，plain 属性将按钮设置为朴素按钮，round设置按钮边框圆角，size按钮的大小
    </van-cell>

使用vant组件--- Grid 宫格 ： 内容
<van-frid></van-frid>
内容text使用插槽插入，gutter设置间距

获取我的频道数据：

组件通信，父传子，父-->:自定义变量="数据数组"，子用props接收。给宫格里的内容v-for进行循环，渲染数据。

<van-grid-item>
<span class="text" slot="text" v-for="(channel,index) in myChannels" :key="index">{{channel.name}}</span>
</van-grid-item>

获取推荐频道数据：

公式：全部频道数据 - 我的频道数据 = 推荐频道数据
计算属性内进行封装：

recommentChannels(){
      return this.AllChannels.filter(channel => {   //  遍历全部频道列表,把符合条件的元素储存到新数组中并返回
            return !this.myChannels.find(myChannel => {   //  遍历我的频道列表，把符合条件的第一个元素返回，!代表非，拿到我的频道列表没有的数据，返回给新数组
      return myChannel.id === channel.id        //  
    })
         })
}

调用计算属性内的方法给推荐列表的内容，进行循环数据渲染。
给推荐列表内容绑定点击事件携带参数channel，添加到myChannels我的频道列表里，使用数组方法push()。

在data中添加数据用来控制编辑状态的显示
isEdit:false  //    控制编辑状态的显示
fiexdChannels:[0] //  固定频道，不允许删除

给按钮绑定点击事件，并让按钮内容切换完成和编辑两个内容
<van-button @click="isEdit = !isEdit">{{isEdit? '完成' , '编辑'}}</van-button>

按钮为完成状态：

点击我的频道宫格内容，是激活频道高亮属性，并退出弹出层，切换频道并跳转Tab：
父传子 -->  :active="active"  //  active用来标记父组件内频道的内容  --> 子组件用props接收，判断遍历项，如果遍历项的索引 === active，则给这个频道项设置高亮样式

<van-grid-item>
<span class="text" slot="text" v-for="(channel,index) in myChannels" :key="index" :class="{active: index === cative}">{{channel.name}}</span>
</van-grid-item>
//    class属性.active{color : red}

按钮为编辑状态：

思路：

- 给我的频道中的频道项注册点击事件
- 在事件处理函数中
  - 如果是编辑状态，则执行删除频道操作
  - 如果是非编辑状态，则执行切换频道操作

在我的频道中添加删除图标

<van-icon v-show="isEdit && !fiexdChannels.includes(index)" slot="icon" name="clear"></van-icon>

在编辑状态下删除频道：

// 实现频道的切换和删除
    onMyChannelClick(channel, index) {
      // 判断是否是编辑状态
      if (this.isEdit) {
        // 是编辑状态，实现在我的频道里删除，推荐频道里添加
        //判断是否是推荐频道，推荐频道不能删除 0
        if (this.fiexdChannels.includes(channel.id)) {
          return;
        }
        // 判断当前删除的频道是否在激活频道的前面，如果是，需要将激活的索引号 - 1
        if (index < this.active) {
          // this.active = this.active - 1      不允许在子组件内直接对父组件传过来的数据直接修改
          this.$emit("updateActive", this.active - 1,true);
        }
        // 删除索引号对应的频道

        this.myChannels.splice(index, 1);
      } else {
        //非编辑状态，实现频道的切换
        this.$emit("updateActive", index, false);
      }
    },

父组件`home/index.vue`里面的监听方法进行调整：

changeActive(index, isShowPopup = true) {
      this.active = index;    // 更新激活的频道项
      this.isShowPopup = isShowPopup;     //  动态关闭编辑器弹出层
    },