项目汇总四

一、首页-频道编辑——弹出层

二、首页-频道编辑——弹出层内容组件

// 6.1. 创建弹出层内容组件：src/views/home/components/channel-edit.vue
// 6.2. 搭建基本样式

   

  

// 6.3.在src/views/home/index.vue中引入，并注册、使用

三、首页-频道编辑——展示弹出层的内容

    // 1.把父组件的UserChannels传给组件： src/views/home/index.vue
    
    

props: {
// 2.接收父组件传过来的数据 ：src/views/home/components/channel-edit.vue
    myChannel: {
      type: Array,
      required: true,
    }
  },

  
      
        {{
          channels.name  //3.渲染
        }}
      
    

// 4.高亮效果-添加类名：src/views/home/index.vue

  props: {
    ...
    // 5.接收父组件传过来的数据 ：src/views/home/components/channel-edit.vue
    active: {
      type: Number,
      required: true,
    },
  },

6.设置高亮效果
{{channels.name}}

四、首页-频道编辑——展示推荐频道列表内容

1.查看文档，创建api/channel.js文件，并进行封装

import request from '@/utils/request'

export const getAllChannels = () => {
  return request({
    method: 'GET',
    url: '/v1_0/channels',
  })
}

2.获取数据：rc/views/home/components/channel-edit.vue

import { getAllChannels} from "@/api/channel";

data() {
    return {
      allChannels: [], // 用一个变量去接收
    };
  },
  
 methods: {
    async loadAllChannels() {
      try {
        const { data } = await getAllChannels();
        console.log(data); // 要打印下，看看能不能拿到数据
        console.log(data.data.channels);
        this.allChannels = data.data.channels;
      } catch (err) {
        this.$toast("获取频道列表失败");
        console.log("获取频道列表失败");
      }
    },
 }

3.封装，利用计算属性获取数据

  computed: {
    // 思路
    // 遍历所有频道
    // 对每一个频道都判断：该频道是否属于我的频道
    // 如果不属于我的频道，则收集起来
    // 直到遍历结束，收集起来那些就是推荐频道
    recommentChannels() {
      return this.allChannels.filter((channels) => {
        return !this.myChannel.find((mychannels) => {
          return mychannels.id === channels.id;
        });
      });
    },
  },

methods: {
6.处理函数
 onAddChannels(channel) {
      // console.log(22);
      this.myChannel.push(channel);
    },
  },

  data() {
    return {
      ......
      isEdit: false, 7.控制编辑状态的显示 
      fixedChannels: [0], 8.固定频道，不允许删除
    };
  },

9.添加图标     
     

10.添加点击事件
      {{ isEdit ? "完成" : "编辑" }}

五、首页-频道编辑——切换、删除功能实现

    
      
        .....
      
    
    
    methods: {
   .....
   2.处理函数
    onMyChannelsClick(channels, index) {
      // console.log(22);
      if (this.isEdit) {
     5. 删除频道
        // console.log(111);
        // console.log(index);
        if (this.fixedChannels.includes(channels.id)) {
          return;
        }
        this.myChannel.splice(index, 1);
        if (index < this.active) {
          this.$emit("updateActive", this.active - 1);
        }
      } else {
        this.$emit("updateActive", index, false);
      }
    },
  },
 
 
 3.在src/views/home/index.vue中定义自定义定事件
  
  4.处理函数
    changeActive(index){
      this.active = index;
      this.isChannelEditShow = false
    }
      6.调整监听方法:将4改为6
        changeActive(index,isChannelEditShow = true){
      this.active = index;
      this.isChannelEditShow = isChannelEditShow
    }