Question

我正在按照Atomic Design的方法研究nuxt.js / vue.js项目，因此我需要隔离的和可重用的组件。

bosons层中的

组件可以具有调色板，字体，占位符，mixin，动画以及诸如Grid Layout之类的界面的更不可见的方面。

我在安装使用CSS Grid Layout itself的GridLayout.vue组件时遇到麻烦。

我的主要困难是使他反应灵敏，我想知道最好的方法，一个指南针来指导我。

到目前为止我有什么

GridLayout.vue

<template>
  <div
    class="grid"
    :style="{
      'grid-template-columns': columns,
      'grid-template-rows': rows,
      'grid-template-areas': areas,
      'grid-gap': gap
      }"
  >
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: String,
      default: 'auto'
    },
    rows: {
      type: String,
      default: '100%'
    },
    gap: {
      type: String,
      default: '0px'
    },
    areas: {
      type: String
    }
  }
}
</script>

<style lang="scss" scoped>
.grid {
  display: grid;
}
</style>

它的用途。

dashboard.vue

<template>
  <GridLayout
    columns="300px auto"
    rows="100%"
    areas="nav content"
    gap="20px"
  >

    <div class="nav">
      Side Nav
    </div>

    <div class="content">
      Content
    </div>

  </GridLayout>
</template>

<script>
import { GridLayout } from '@/components/bosons'

export default {
  components: {
    GridLayout
  },
}
</script>

so I would have something like this

但是问题是，当页面需要响应时，例如，在移动设备中，nav消失了，则可能是

<template>
  <GridLayout
    columns="300px auto"
    rows="100%"
    areas="nav content"
    gap="20px"
    :small="{
      columns: 'auto',
      rows: '100%',
      areas: 'content'
      }"
    :medium="{
      // .....
      }"
    :large="{
      // .....
      }"
  >

    <div class="nav">
      Side Nav
    </div>

    <div class="content">
      Content
    </div>

  </GridLayout>
</template>

我已经想象过需要将small，edium和large对象作为道具，并需要修补media queires

<template>
  <div
    class="grid"
    :style="{
      'grid-template-columns': columns,
      'grid-template-rows': rows,
      'grid-template-areas': areas,
      'grid-gap': gap
      }"
  >
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: String,
      default: 'auto'
    },
    rows: {
      type: String,
      default: '100%'
    },
    gap: {
      type: String,
      default: '0px'
    },
    areas: {
      type: String
    },
    small: Object,
    medium: Object,
    large: Object
  }
}
</script>

<style lang="scss" scoped>
.grid {
  display: grid;
  &.small {
    @media (max-width: 600px) {
    }
  }
  &.medium {
    @media (min-width: 600px) and (max-width: 992px) {
    }
  }
  &.large {
    @media (min-width: 992px) {
    }
  }
}
</style>

老实说，我迷路了，我不知道该如何使它响应，任何人？

将CSS网格布局转换为Vue组件

0 个答案: