一、首页-频道编辑——弹出层
.....
.........> ..... 二、首页-频道编辑——弹出层内容组件
// 6.1. 创建弹出层内容组件：src/views/home/components/channel-edit.vue
// 6.2. 搭建基本样式
// 6.4搭建样式
我的频道
完成/编辑
频道推荐
//6.3.3将原先的弹出层单标签，手动改为双标签//因为关闭小图标是定位过去了，所以内容和图标会重叠，要给整个页面设置个内边距，把内容给挤下去
.channel-edit {
padding-top: 87px;
}
三、首页-频道编辑——展示弹出层的内容
// 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.vueimport { 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中定义自定义定事件
推荐阅读
- HTML+CSS学习|前端HTML5/HTML+CSS3/CSS学习笔记(七)
- 前端|前端学习分享
- 前端|vue3前端项目引入iconfont阿里图标
- 学习笔记|基础JavaScript
- jquery|jQuery_04(事件&动画)
- 前端|jQuery04——jquery插件
- demo|基于spring、mvc和easy UI的驾校后台管理系统
- 前端|HTTP的特点以及状态码
- 9.后台管理系统主页面布局以及左侧导航栏设计