1 搜索栏 和 侧边栏组件做一个整合
1.新建Aside.vue
把之前零散的组件封装起来
<template>
<div class="aside">
<ChannelSearch />
<TitleMenu :isActive="activeId === 100" @active="activeId = 100">
<template v-slot:title>
<!-- 这里面写的是插槽名字为title的内容 -->
发现频道
</template>
<template v-slot:icon> > </template>
</TitleMenu>
<ChannelList
:columns="2"
:activeId="activeId"
@active="activeId = $event"
/>
</div>
</template>
<script>
// 导入 item.vue
import TitleMenu from "./TitleMenu";
import ChannelList from "./ChannelList";
import ChannelSearch from "./ChannelSearch";
export default {
// 注册
components: {
TitleMenu,
ChannelList,
ChannelSearch,
},
methods: {
handleSearch(e) {
console.log("搜索", e);
},
},
data() {
return {
activeId: 100, //默认选中的是热门
};
},
};
</script>
<style scoped>
.aside {
width: 100%;
height: 100%;
}
</style>
需要注意 在Aside.vue 里面相对路径的问题
简化 App.vue
<template>
<div>
<Aside />
</div>
</template>
<script>
import Aside from "./components/Aside";
export default {
// 注册
components: {
Aside,
},
};
</script>
- 可以在父组件 设置样式 App.vue 比如说
4 超出的部分 自动加滚动条
overflow : auto;
5 当前目的达到
2 页面全局组件怎么设置 ?
新建pages 文件夹下面的 Channel.vue
<template>
<Layout>
<template v-slot:head>
<Menu />
</template>
<template v-slot:left>
<Aside />
</template>
<template v-slot:main>
<Main />
</template>
</Layout>
</template>
<script>
import Layout from "./components/Layout";
import Aside from "./components/Aside";
export default {
components: {
Layout,
Aside,
},
};
</script>
<style>
</style>
Layout.vue 怎么写
<template>
<div class="container">
<head class="head">
<slot name="head"></slot>
</head>
<div class="mid">
<div class="left">
<slot name="left"></slot>
</div>
<div class="right">
<slot name="right"></slot>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
设置一下样式和位置
我们加一点内容 如何设置边框阴影?
Layout.vue
<template>
<div class="container">
<header class="head">
<slot name="head"></slot>
</header>
<div class="mid">
<div class="left">
<slot name="left"></slot>
</div>
<div class="right">
<slot name="main"></slot>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.container {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.head {
height: 50px;
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
}
.mid {
position: absolute;
top: 50px;
bottom: 0;
left: 0;
right: 0;
}
.left {
float: left;
width: 250px;
height: 100%;
}
.right {
overflow: hidden;
height: 100%;
background: #f4f4f4;
}
</style>