框架学习之VUE（九）搜索框组件侧边栏和页面组件将组件整合起来

最新推荐文章于 2024-03-19 19:30:43 发布

小白追梦

最新推荐文章于 2024-03-19 19:30:43 发布

阅读量592

点赞数 1

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/108993742

版权

vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

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>

小白追梦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
框架学习之VUE（九）搜索框组件侧边栏和页面组件将组件整合起来

1 搜索栏和侧边栏组件做一个整合1.新建Aside.vue把之前零散的组件封装起来<template> <div class="aside"> <ChannelSearch /> <TitleMenu :isActive="activeId === 100" @active="activeId = 100"> <template v-slot:title> <!-- 这里面写的是插槽
复制链接

扫一扫