Vue3栅格（Grid）

置顶 已于 2024-11-06 16:10:46 修改
阅读量3.1k 收藏 4
点赞数 1
分类专栏： Less TypeScript Vue3 文章标签： vue3 typescript 1024程序员节
于 2023-07-18 10:00:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dandrose/article/details/131780195
版权
Vue3 同时被 3 个专栏收录
81 篇文章 13 订阅
订阅专栏
TypeScript
80 篇文章 4 订阅
订阅专栏
Less
74 篇文章 3 订阅
订阅专栏
该文章介绍了如何使用Vue组件创建一个24栅格系统，支持Flex布局和响应式设计。Row.vue和Col.vue组件详细定义了行和列的属性，如栅格间隔、宽度、对齐方式和响应式规则，可以灵活调整以适应不同屏幕尺寸。
摘要由CSDN通过智能技术生成

24 栅格系统

概述

布局的栅格化系统，我们是基于行（Row）和列（Col）两个组件相互配合来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。
下面简单介绍一下它的工作原理：

  • 通过Row在水平方向建立一组Col
  • 你的内容应当放置于Col内，并且，只有Col可以作为Row的直接元素
  • 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的- 列可以使用 :span="8" 来创建
  • 如果一个Row中的Col总和超过 24，那么多余的Col会作为一个整体另起一行排列

Flex 布局

我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。 Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格

效果如下图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在线预览

APIs

Row

参数说明类型默认值
width行宽度，单位 pxstring | number‘auto’
gutter栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]number | [number | Responsive, number | Responsive] | Responsive0
wrap是否自动换行booleanfalse
align垂直对齐方式‘top’ | ‘middle’ | ‘bottom’ | ‘stretch’‘top’
justify水平排列方式‘start’ | ‘end’ | ‘center’ | ‘space-around’ | ‘space-between’ | ‘space-evenly’‘start’

Responsive Type

名称说明类型默认值
xs<576px 响应式栅格numberundefined
sm≥576px 响应式栅格numberundefined
md≥768px 响应式栅格numberundefined
lg≥992px 响应式栅格numberundefined
xl≥1200px 响应式栅格numberundefined
xxl≥1600px 响应式栅格numberundefined

Col

参数说明类型默认值
span栅格占位格数，取 0,1,2...24，为 0 时相当于 display: none，优先级低于 xs, sm, md, lg, xl, xxlnumberundefined
offset栅格左侧的间隔格数，取 0,1,2...24number0
flexflex 布局填充string | numberundefined
order栅格顺序，取 0,1,2...number0
xs<576px 响应式栅格number | {span?: number, offset?: number}undefined
sm≥576px 响应式栅格number | {span?: number, offset?: number}undefined
md≥768px 响应式栅格number | {span?: number, offset?: number}undefined
lg≥992px 响应式栅格number | {span?: number, offset?: number}undefined
xl≥1200px 响应式栅格number | {span?: number, offset?: number}undefined
xxl≥1600px 响应式栅格number | {span?: number, offset?: number}undefined

创建行组件Row.vue

其中引入使用了以下工具函数：

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useEventListener } from '../utils'
interface Responsive {
  xs?: number // <576px 响应式栅格
  sm?: number // ≥576px 响应式栅格
  md?: number // ≥768px 响应式栅格
  lg?: number // ≥992px 响应式栅格
  xl?: number // ≥1200px 响应式栅格
  xxl?: number // ≥1600px 响应式栅格
}
interface Props {
  width?: string | number // 行宽度，单位 px
  // 推荐使用 (16+8n)px 作为栅格间隔(n 是自然数：0,1,2,3...)
  gutter?: number | [number | Responsive, number | Responsive] | Responsive // 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]
  wrap?: boolean // 是否自动换行
  align?: 'top' | 'middle' | 'bottom' | 'stretch' // 垂直对齐方式
  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' // 水平排列方式
}
const props = withDefaults(defineProps<Props>(), {
  width: 'auto',
  gutter: 0,
  wrap: false,
  align: 'top',
  justify: 'start'
})
const alignProperties = {
  top: 'flex-start',
  middle: 'center',
  bottom: 'flex-end',
  stretch: 'stretch'
}
const viewportWidth = ref(window.innerWidth)
function getViewportWidth() {
  viewportWidth.value = window.innerWidth
}
useEventListener(window, 'resize', getViewportWidth)
const xGap = computed(() => {
  if (typeof props.gutter === 'number') {
    return props.gutter
  }
  if (Array.isArray(props.gutter)) {
    if (typeof props.gutter[0] === 'object') {
      return getResponsiveGap(props.gutter[0])
    }
    return props.gutter[0]
  }
  if (typeof props.gutter === 'object') {
    return getResponsiveGap(props.gutter)
  }
  return 0
})
const yGap = computed(() => {
  if (Array.isArray(props.gutter)) {
    if (typeof props.gutter[1] === 'object') {
      return getResponsiveGap(props.gutter[1])
    }
    return props.gutter[1]
  }
  return 0
})
const rowWidth = computed(() => {
  if (typeof props.width === 'number') {
    return `${props.width}px`
  }
  return props.width
})
function getResponsiveGap(gutter: any) {
  if (viewportWidth.value >= 1600 && gutter.xxl) {
    return gutter.xxl
  }
  if (viewportWidth.value >= 1200 && gutter.xl) {
    return gutter.xl
  }
  if (viewportWidth.value >= 992 && gutter.lg) {
    return gutter.lg
  }
  if (viewportWidth.value >= 768 && gutter.md) {
    return gutter.md
  }
  if (viewportWidth.value >= 576 && gutter.sm) {
    return gutter.sm
  }
  if (viewportWidth.value < 576 && gutter.xs) {
    return gutter.xs
  }
  return 0
}
</script>
<template>
  <div
    class="m-grid-row"
    :class="{ 'gutter-row': gutter }"
    :style="`--xGap: ${(xGap as number) / 2}px; --justify: ${justify}; --align: ${alignProperties[align]}; width: ${rowWidth}; margin-left: -${(xGap as number) / 2}px; margin-right: -${(xGap as number) / 2}px; row-gap: ${yGap}px;`"
  >
    <slot></slot>
  </div>
</template>
<style lang="less" scoped>
.m-grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: var(--justify);
  align-items: var(--align);
  min-width: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  transition: all 0.3s;
}
</style>

创建列组件Col.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useEventListener } from '../utils'
interface Props {
  span?: number // 栅格占位格数，取 0,1,2...24，为 0 时相当于 display: none，优先级低于 xs, sm, md, lg, xl, xxl
  offset?: number // 栅格左侧的间隔格数，取 0,1,2...24
  flex?: string | number //	flex 布局填充
  order?: number // 栅格顺序，取 0,1,2...
  xs?: number | { span?: number; offset?: number } // <576px 响应式栅格
  sm?: number | { span?: number; offset?: number } // ≥576px 响应式栅格
  md?: number | { span?: number; offset?: number } // ≥768px 响应式栅格
  lg?: number | { span?: number; offset?: number } // ≥992px 响应式栅格
  xl?: number | { span?: number; offset?: number } // ≥1200px 响应式栅格
  xxl?: number | { span?: number; offset?: number } // ≥1600px 响应式栅格
}
const props = withDefaults(defineProps<Props>(), {
  span: undefined,
  offset: 0,
  flex: undefined,
  order: 0,
  xs: undefined,
  sm: undefined,
  md: undefined,
  lg: undefined,
  xl: undefined,
  xxl: undefined
})
const flexValue = computed(() => {
  if (typeof props.flex === 'number') {
    return `${props.flex} ${props.flex} auto`
  }
  return props.flex
})
const responsiveProperties = computed(() => {
  return [
    {
      width: 1600,
      value: props.xxl
    },
    {
      width: 1200,
      value: props.xl
    },
    {
      width: 992,
      value: props.lg
    },
    {
      width: 768,
      value: props.md
    },
    {
      width: 576,
      value: props.sm
    },
    {
      width: 0,
      value: props.xs
    }
  ]
})
const viewportWidth = ref(window.innerWidth)
function getViewportWidth() {
  viewportWidth.value = window.innerWidth
}
useEventListener(window, 'resize', getViewportWidth)
const responsiveValue = computed(() => {
  for (const responsive of responsiveProperties.value) {
    if (responsive.value && viewportWidth.value >= responsive.width) {
      if (typeof responsive.value === 'object') {
        return {
          span: responsive.value.span || props.span,
          offset: responsive.value.offset || props.offset
        }
      } else {
        return {
          span: responsive.value,
          offset: props.offset
        }
      }
    }
  }
  return {
    span: props.span,
    offset: props.offset
  }
})
</script>
<template>
  <div
    :class="`grid-col col-${responsiveValue.span} offset-${responsiveValue.offset}`"
    style="padding-left: var(--xGap); padding-right: var(--xGap)"
    :style="`flex: ${flexValue}; order: ${order};`"
  >
    <slot></slot>
  </div>
</template>
<style lang="less" scoped>
.grid-col {
  position: relative;
  max-width: 100%;
  min-height: 1px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  line-height: 1.5714285714285714;
  transition: all 0.3s;
}
.col-0 {
  display: none;
}
.col-1 {
  display: block;
  flex: 0 0 4.16666666666666%;
  max-width: 4.16666666666666%;
}
.offset-1 {
  margin-left: 4.16666666666666%;
}
.col-2 {
  display: block;
  flex: 0 0 8.33333333333333%;
  max-width: 8.33333333333333%;
}
.offset-2 {
  margin-left: 8.33333333333333%;
}
.col-3 {
  display: block;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}
.offset-3 {
  margin-left: 12.5%;
}
.col-4 {
  display: block;
  flex: 0 0 16.66666666666666%;
  max-width: 16.66666666666666%;
}
.offset-4 {
  margin-left: 16.66666666666666%;
}
.col-5 {
  display: block;
  flex: 0 0 20.83333333333333%;
  max-width: 20.83333333333333%;
}
.offset-5 {
  margin-left: 20.83333333333333%;
}
.col-6 {
  display: block;
  flex: 0 0 25%;
  max-width: 25%;
}
.offset-6 {
  margin-left: 25%;
}
.col-7 {
  display: block;
  flex: 0 0 29.16666666666666%;
  max-width: 29.16666666666666%;
}
.offset-7 {
  margin-left: 29.16666666666666%;
}
.col-8 {
  display: block;
  flex: 0 0 33.33333333333333%;
  max-width: 33.33333333333333%;
}
.offset-8 {
  margin-left: 33.33333333333333%;
}
.col-9 {
  display: block;
  flex: 0 0 37.5%;
  max-width: 37.5%;
}
.offset-9 {
  margin-left: 37.5%;
}
.col-10 {
  display: block;
  flex: 0 0 41.66666666666666%;
  max-width: 41.66666666666666%;
}
.offset-10 {
  margin-left: 41.66666666666666%;
}
.col-11 {
  display: block;
  flex: 0 0 45.83333333333333%;
  max-width: 45.83333333333333%;
}
.offset-11 {
  margin-left: 45.83333333333333%;
}
.col-12 {
  display: block;
  flex: 0 0 50%;
  max-width: 50%;
}
.offset-12 {
  margin-left: 50%;
}
.col-13 {
  display: block;
  flex: 0 0 54.16666666666666%;
  max-width: 54.16666666666666%;
}
.offset-13 {
  margin-left: 54.16666666666666%;
}
.col-14 {
  display: block;
  flex: 0 0 58.33333333333333%;
  max-width: 58.33333333333333%;
}
.offset-14 {
  margin-left: 58.33333333333333%;
}
.col-15 {
  display: block;
  flex: 0 0 62.5%;
  max-width: 62.5%;
}
.offset-15 {
  margin-left: 62.5%;
}
.col-16 {
  display: block;
  flex: 0 0 66.66666666666666%;
  max-width: 66.66666666666666%;
}
.offset-16 {
  margin-left: 66.6666666666666%;
}
.col-17 {
  display: block;
  flex: 0 0 70.83333333333333%;
  max-width: 70.83333333333333%;
}
.offset-17 {
  margin-left: 70.83333333333333%;
}
.col-18 {
  display: block;
  flex: 0 0 75%;
  max-width: 75%;
}
.offset-18 {
  margin-left: 75%;
}
.col-19 {
  display: block;
  flex: 0 0 79.16666666666666%;
  max-width: 79.16666666666666%;
}
.offset-19 {
  margin-left: 79.16666666666666%;
}
.col-20 {
  display: block;
  flex: 0 0 83.33333333333333%;
  max-width: 83.33333333333333%;
}
.offset-20 {
  margin-left: 83.33333333333333%;
}
.col-21 {
  display: block;
  flex: 0 0 87.5%;
  max-width: 87.5%;
}
.offset-21 {
  margin-left: 87.5%;
}
.col-22 {
  display: block;
  flex: 0 0 91.66666666666666%;
  max-width: 91.66666666666666%;
}
.offset-22 {
  margin-left: 91.66666666666666%;
}
.col-23 {
  display: block;
  flex: 0 0 95.83333333333333%;
  max-width: 95.83333333333333%;
}
.offset-23 {
  margin-left: 95.83333333333333%;
}
.col-24 {
  display: block;
  flex: 0 0 100%;
  max-width: 100%;
}
.offset-24 {
  margin-left: 100%;
}
</style>

在要使用的页面引入

其中引入使用了以下组件：

<script setup lang="ts">
import Row from './Row.vue'
import Col from './Col.vue'
import { reactive } from 'vue'
const colCountOptions = [
  {
    label: 2,
    value: 2
  },
  {
    label: 3,
    value: 3
  },
  {
    label: 4,
    value: 4
  },
  {
    label: 6,
    value: 6
  },
  {
    label: 8,
    value: 8
  },
  {
    label: 12,
    value: 12
  },
  {
    label: 24,
    value: 24
  }
]
const state = reactive({
  horizontalGutter: 16,
  verticalGutter: 16,
  colCount: 4
})
</script>
<template>
  <div>
    <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Row class="row">
      <Col :span="24">col</Col>
    </Row>
    <Row class="row">
      <Col :span="12">col-12</Col>
      <Col :span="12">col-12</Col>
    </Row>
    <Row class="row">
      <Col :span="8">col-8</Col>
      <Col :span="8">col-8</Col>
      <Col :span="8">col-8</Col>
    </Row>
    <Row class="row">
      <Col :span="6">col-6</Col>
      <Col :span="6">col-6</Col>
      <Col :span="6">col-6</Col>
      <Col :span="6">col-6</Col>
    </Row>
    <h2 class="mt30 mb10">水平区块间隔</h2>
    <Row :gutter="16">
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
    </Row>
    <h2 class="mt30 mb10">响应式区块间隔</h2>
    <Row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
    </Row>
    <h2 class="mt30 mb10">垂直区块间隔</h2>
    <Row :gutter="[16, 24]">
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
    </Row>
    <h2 class="mt30 mb10">响应式垂直区块间隔</h2>
    <Row :gutter="[16, { xs: 8, sm: 16, md: 24, lg: 32 }]">
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
      <Col class="gutter-row" :span="6">
        <div class="gutter-box">col-6</div>
      </Col>
    </Row>
    <h2 class="mt30 mb10">左右偏移</h2>
    <Row class="row">
      <Col :span="8">col-8</Col>
      <Col :span="8" :offset="8">col-8</Col>
    </Row>
    <Row class="row">
      <Col :span="6" :offset="6">col-6 col-offset-6</Col>
      <Col :span="6" :offset="6">col-6 col-offset-6</Col>
    </Row>
    <Row class="row">
      <Col :span="12" :offset="6">col-12 col-offset-6</Col>
    </Row>
    <Row class="row">
      <Col :span="6" :md="{ offset: 4 }" :xl="{ offset: 6 }">col-6 col-md-offset-4 col-xl-offset-6</Col>
      <Col :span="6" :md="{ offset: 4 }" :xl="{ offset: 6 }">col-6 col-md-offset-4 col-xl-offset-6</Col>
    </Row>
    <h2 class="mt30 mb10">排版方式</h2>
    <Divider orientation="left">sub-element align left</Divider>
    <Row class="row" justify="start">
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
    </Row>
    <Divider orientation="left">sub-element align center</Divider>
    <Row class="row" justify="center">
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
    </Row>
    <Divider orientation="left">sub-element align right</Divider>
    <Row class="row" justify="end">
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
    </Row>
    <Divider orientation="left">sub-element align space-between</Divider>
    <Row class="row" justify="space-between">
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
    </Row>
    <Divider orientation="left">sub-element align space-around</Divider>
    <Row class="row" justify="space-around">
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
    </Row>
    <Divider orientation="left">sub-element align space-evenly</Divider>
    <Row class="row" justify="space-evenly">
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
      <Col :span="4">col-4</Col>
    </Row>
    <h2 class="mt30 mb10">对齐方式</h2>
    <Divider orientation="left">Align Top</Divider>
    <Row class="row" style="background: rgba(128, 128, 128, 0.08)" justify="center" align="top">
      <Col :span="4">
        <p class="height-100">col-4</p>
      </Col>
      <Col :span="4">
        <p class="height-50">col-4</p>
      </Col>
      <Col :span="4">
        <p class="height-120">col-4</p>
      </Col>
      <Col :span="4">
        <p class="height-80">col-4</p>
      </Col>
    </Row>
    <Divider orientation="left">Align Middle</Divider>
    <Row class="row" style="background: rgba(128, 128, 128, 0.08)" justify="space-around" align="middle">
      <Col :span="4">
        <p class="height-100">col-4</p>
      </Col>
      <Col :span="4">
        <p class="height-50">col-4</p>
      </Col>
      <Col :span="4">
        <p class="height-120">col-4</p>
      </Col>
      <Col :span="4">
        <p class="height-80">col-4</p>
      </Col>
    </Row>
    <Divider orientation="left">Align Bottom</Divider>
    <Row class="row" style="background: rgba(128, 128, 128, 0.08)" justify="space-between" align="bottom">
      <Col :span="4">
        <p class="height-100">col-4</p>
      </Col>
      <Col :span="4">
        <p class="height-50">col-4</p>
      </Col>
      <Col :span="4">
        <p class="height-120">col-4</p>
      </Col>
      <Col :span="4">
        <p class="height-80">col-4</p>
      </Col>
    </Row>
    <h2 class="mt30 mb10">flex 填充</h2>
    <Divider orientation="left">Percentage columns</Divider>
    <Row class="row">
      <Col :flex="2">2 / 5</Col>
      <Col :flex="3">3 / 5</Col>
    </Row>
    <Divider orientation="left">Fill rest</Divider>
    <Row class="row">
      <Col flex="0 0 100px">100px</Col>
      <Col flex="auto">auto</Col>
    </Row>
    <Divider orientation="left">Raw flex style</Divider>
    <Row class="row">
      <Col flex="1 1 200px">1 1 200px</Col>
      <Col flex="0 1 300px">0 1 300px</Col>
    </Row>
    <Row class="row">
      <Col flex="none">
        <div style="padding: 0 16px">none</div>
      </Col>
      <Col flex="auto">auto with no-wrap</Col>
    </Row>
    <h2 class="mt30 mb10">响应式布局</h2>
    <Row class="row">
      <Col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</Col>
      <Col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</Col>
      <Col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</Col>
    </Row>
    <h2 class="mt30 mb10">span 和 offset 属性的响应式</h2>
    <Row class="row">
      <Col :xs="{ span: 5, offset: 1 }" :sm="{ span: 6, offset: 2 }">Col</Col>
      <Col :xs="{ span: 11, offset: 1 }" :sm="{ span: 6, offset: 2 }">Col</Col>
      <Col :xs="{ span: 5, offset: 1 }" :sm="{ span: 6, offset: 2 }">Col</Col>
    </Row>
    <h2 class="mt30 mb10">栅格配置器</h2>
    <Row :gutter="24">
      <Col :span="8">
        <Flex vertical align="flex-start">
          Horizontal Column Gutter:
          <Slider :step="8" :max="48" v-model:value="state.horizontalGutter" />
        </Flex>
      </Col>
      <Col :span="8">
        <Flex vertical align="flex-start">
          Vertical Row Gutter:
          <Slider :step="8" :max="48" v-model:value="state.verticalGutter" />
        </Flex>
      </Col>
      <Col :span="8">
        <Flex vertical align="flex-start">
          Col Count:
          <Radio :options="colCountOptions" v-model:value="state.colCount" button />
        </Flex>
      </Col>
    </Row>
    <Row class="mt30" :gutter="[state.horizontalGutter, state.verticalGutter]">
      <Col class="gutter-row" v-for="n in state.colCount" :key="n" :span="24 / state.colCount">
        <div class="gutter-box">Col-{{ 24 / state.colCount }}</div>
      </Col>
      <Col class="gutter-row" v-for="n in state.colCount" :key="n" :span="24 / state.colCount">
        <div class="gutter-box">Col-{{ 24 / state.colCount }}</div>
      </Col>
      <Col class="gutter-row" v-for="n in state.colCount" :key="n" :span="24 / state.colCount">
        <div class="gutter-box">Col-{{ 24 / state.colCount }}</div>
      </Col>
    </Row>
  </div>
</template>
<style lang="less" scoped>
.row {
  .grid-col {
    min-height: 30px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #fff;
    text-align: center;
    border-radius: 0;
    padding: 16px 0;
    background: #1677ff;
  }
  :deep(> :nth-child(2n + 1)) {
    background: #1677ffbf;
  }
}
.gutter-row {
  .grid-col {
    min-height: 30px;
    color: #fff;
    text-align: center;
    border-radius: 0;
  }
  .gutter-box {
    background: #0092ff;
    padding: 8px 0;
  }
}
.height-50 {
  height: 50px;
  line-height: 50px;
}
.height-80 {
  height: 80px;
  line-height: 80px;
}
.height-100 {
  height: 100px;
  line-height: 100px;
}
.height-120 {
  height: 120px;
  line-height: 120px;
}
</style>
vuegrid是一个灵活的Vuejs表格组件
08-07
vue-grid是一个可以快速简直，并且通过表格来渲染数据的vue.js组件。
使用Vue-Grid-Layout实现自定义工作台
02-01
Vue-Grid-Layout 是一个基于 Vue.js 的响应式栅格布局系统，它允许开发者创建自定义的工作台，用户可以根据需要自由调整各个组件的位置和大小。在本教程中，我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作...
记录--Vue3基于Grid布局简单实现一个瀑布流组件
林恒的博客
11-06 1127
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 在学习Grid布局之时，我发现其是CSS中的一种强大的布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，在刷某书和某宝首页时，我们发现其展示方式就是一种瀑布流，是一种流行的网站页面布局，视觉表现为参差不齐的多栏布局，随着页面向下滚动，这种布局会不断加载数据块并附加到当前尾部。采用瀑布流布局的方式...
vue-:gutter
最新发布
a18861856219的博客
09-20 365
它的含义取决于它被用在哪个组件或元素上。在Vue的生态系统中，特别是在使用UI框架（如Element UI、Vuetify、Ant Design Vue等）时，在Vue中的具体含义取决于它被用在哪个组件或元素上，以及该组件或元素是否接受一个名为。的值是动态计算的，你可以通过Vue的响应式数据或计算属性来提供这个值。经常被用作一个prop（属性），用于控制组件内部元素之间的间距。在大多数情况下，它用于控制组件内部元素之间的间距。，那么你可以根据组件的数据或计算属性来动态地设置这个间距值。
Vue Grid Layout -️ 适用Vue.js的栅格布局系统，在vue3+上使用
wang13679201813的博客
09-18 5281
官网地址：https://madewithvuejs.com/vue-grid-layout中文文档：https://github.com/jbaysolutions/vue-grid-layout/blob/master/README-zh_CN.md可拖拽可调整大小静态部件（不可拖拽、调整大小）拖拽和调整大小时进行边界检查增减部件时避免重建栅格可序列化和还原的布局自动化RTL支持响应式。
瀑布流 - Vue3基于Grid布局简单实现一个瀑布流组件
qq_34185872的博客
09-20 2171
在学习Grid布局之时，我发现其是CSS中的一种强大的布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，在刷某书和某宝首页时，我们发现其展示方式就是一种瀑布流，是一种流行的网站页面布局，视觉表现为参差不齐的多栏布局，随着页面向下滚动，这种布局会不断加载数据块并附加到当前尾部。采用瀑布流布局的方式可以打破常规网站布局排版，给用户眼前一亮的新鲜感，更好的适应移动端。
vue3项目使用grid布局和sortablejs实现拖拽效果
weixin_62733705的博客
12-06 1213
vue3 sortable sortablejs 可拖拽 grid grid布局 vue3+grid布局 grid+sortablejs
探索 Vue 3 的动态布局解决方案：Grid Layout Plus
訾博（ZiBo）的博客
05-18 1483
Grid Layout Plus 以其丰富的特性和灵活的配置，为 Vue 3 开发者提供了一个强大的栅格布局解决方案。无论是构建复杂的仪表板、动态的网页布局还是响应式的移动应用，Grid Layout Plus 都能够提供必要的支持。通过其直观的拖拽和缩放功能，开发者可以快速构建出既美观又实用的用户界面。
Vue项目中grid布局的应用
trabecula_hj的博客
08-09 2311
grid-template-areas用于定义区域，一个区域由单个或多个单元格组成,名字相同则表示在一个区域网格元素需要指定放置于哪一个grea-area区域中，不然会不生效。
使用vue实现grid-layout功能实例代码
08-28
使用 Vue 实现 Grid Layout 功能实例代码 本文主要介绍了使用 Vue 实现 Grid Layout 功能的代码讲解，涵盖了基本布局、节点排版、拖拽事件等多个方面的知识点。 基本布局 在实现 Grid Layout 功能之前，首先需要 ...
vue3 栅格地图实现
04-16
在 Vue3 中，可以使用 CSS Grid 或者 Flexbox 来实现栅格地图。 1. 使用 CSS Grid 实现栅格地图： - 在父容器上设置 `display: grid;`，并通过 `grid-template-columns` 属性设置列的宽度。 - 在子元素上使用 `...
vue-grid-用于Vue.js 2.x的功能强大的flexbox网格系统，使用内联样式构建-Vue.js开发
05-27
vue-grid用于Vue.js 2.x的功能强大的flexbox网格系统，以内联样式构建。安装npm install @ liqueflies / vue-grid --save＃或yarn vue-grid一个用于Vue.js 2的功能强大的flexbox网格系统。 x，使用内联样式构建安装npm install @ liqueflies / vue-grid --save＃或yarn add @ liqueflies / vue-grid简介vue-grid使用引导布局的原理提供了由组件，道具和内联构成的响应式网格。样式。 用法示例示例从'@ liqueflies / vue-grid'导入{VueGrid} Vue.use（VueGrid，{/ *您的配置* /}）此对象是表示属性的默认配置。
vue 封装grid 布局-表单.zip
01-21
这个压缩包"vue 封装grid 布局-表单.zip"显然包含了利用Vue.js进行组件封装的实践，特别是针对表格（grid）布局和表单设计。Vue与Element-UI或Iview-UI的结合是常见的做法，这两个都是基于Vue的UI组件库，提供了丰富...
vue前端表单插件支持栅格和tab 嵌套布局，支持表格定义，适应于做动态数据模型管理
06-24
在Vue表单插件中，栅格系统通常基于Flexbox或Grid布局，使得表单元素能够根据屏幕尺寸自动调整，确保在不同设备上都有良好的显示效果。这种布局方式让开发者能轻松创建复杂的、响应式的表单界面，提升用户体验。 接...
vue grid表格
kwame211的博客
07-14 3036
grid.js //registerthegridcomponent Vue.component('demo-grid',{ template:'#grid-template', replace:true, props:{ data:Array, columns:Array, filterKey:String }, data:function(){ varsortOrders={} ...
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
热门推荐
~朴：shu的博客
11-22 4万+
在具有拖拽组成页面、组件动态调整大小、边缘碰撞监测的系统中，使用该布局无疑是最合适的。该栅格系统目前对 vue2 的支持是最好的，vue3 是需要用插件支持的，会在小节详细讲解。栅格布局难度不大，但是要理解里面的原理，并实际应用到自己的项目开发，还要结合自己项目的实际情况。
Vue （grid）网格组件
Anonymous996的博客
07-05 2813
Grid API: grid Grid， Vant Grid-Item mixins 此部分代码未进行优化 严谨转载
Vue Grid Layout ( 栅格布局 )
i_Satan的博客
01-11 2165
Vue Grid Layout -️ 适用 Vue.js 的栅格布局系统 (相关使用记录) 参考文章@~朴：shu 参考文章@我说爱你啊 中文文档 安装 npm install vue-grid-layout --save 或 yarn add vue-grid-layout 导入组件 import VueGridLayout from 'vue-grid-layout'; 注册组件 export default { components: { GridL
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值