Vue封装组件实现响应式布局

Vue封装组件实现响应式布局

主要思路：使用flex布局，左边主体内容区域根据页面宽度自适应，右边侧边栏固定宽度。使用媒体查询，当页面宽度小于768px时，侧边右边侧边栏隐藏。

1. 封装 Layout.vue组件

• HTML结构

<template>
  <div class="layout">
    
    <header>
      
      <slot name="header">slot>
    header>
    
    <div class="container" ref="containerRef">
      
      <section>
        <slot name="section">slot>
      section>
      
      <aside ref="asideRef">
        <slot name="aside">slot>
      aside>
    div>
  div>
template>

• JS代码

<script>
export default {
  // 接收父组件传递的参数
  props: {
    // 版心
    centerWidth: {
      type: String,
      default: "1440",
    },
    // 侧边栏宽度
    asideWidth: {
      type: String,
      default: "350",
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.$refs.containerRef.style.maxWidth = this.centerWidth + "px";
      this.$refs.asideRef.style.width = this.asideWidth + "px";
    },
  },
};
</script>

• css代码

2. Layout.vue组件使用

• 在App.vue中使用layout组件

<template>
  <div id="app">
    <my-layout asideWidth="300" centerWidth="1440">
      
      <template slot="header">
        <div class="header">div>
      template>

      <template slot="section">
        <div class="banner">div>
        <div class="card">div>
        <div class="title">div>
      template>

      <template slot="aside">
        <div class="aside">div>
      template>
    my-layout>
  div>
template>

<script>
// 导入Layout.vue组件
import Layout from "@/components/Layout.vue";

export default {
  name: "app",
  components: {
    // 组件注册
    myLayout: Layout,
  },
};
script>

<style lang="less" scope>
.header {
  height: 80px;
  background-color: pink;
}

.banner {
  width: 100%;
  padding-bottom: 40%;
  box-sizing: border-box;
  min-height: 300px;
  background-color: #000;
}
.card {
  width: 100%;
  padding-bottom: 40%;
  background-color: #ccc;
}
.title {
  width: 100%;
  height: 50px;
  background: blue;
}

.aside {
  width: 100%;
  height: 500px;
  background-color: skyblue;
}
style>