Vue3弹性布局(Flex)

简介: 这是一个基于 Vue 的弹性布局组件库,提供了丰富的参数配置,如宽度、方向、换行等,支持自定义对齐方式和间隙设置。在线预览展示了不同布局效果,包括单选、按钮和滑动输入条等组件的使用示例。

效果如下图:在线预览

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

APIs

Flex

参数 说明 类型 默认值
width 弹性区域总宽度,单位 px string | number ‘auto’
vertical flex 主轴的方向是否垂直,vertical 使用 flex-direction: column boolean false
wrap 设置元素单行显示还是多行显示;参考 flex-wrap ‘nowrap’ | ‘wrap’ | ‘wrap-reverse’ ‘nowrap’
justify 设置元素在主轴方向上的对齐方式;参考 justify-content string ‘normal’
align 设置元素在交叉轴方向上的对齐方式;参考 align-items string ‘normal’
gap 设置网格之间的间隙,数组时表示: [水平间距, 垂直间距] number | number[] | ‘small’ | ‘middle’ | ‘large’ ‘middle’

创建弹性布局组件Flex.vue

<script setup lang="ts">
import { computed } from 'vue'
interface Props {
  width?: string | number // 弹性区域总宽度,单位 px
  vertical?: boolean // flex 主轴的方向是否垂直,vertical 使用 flex-direction: column
  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse' // 设置元素单行显示还是多行显示;参考 flex-wrap
  justify?: string // 设置元素在主轴方向上的对齐方式;参考 justify-content
  align?: string // 设置元素在交叉轴方向上的对齐方式;参考 align-items
  gap?: number | number[] | 'small' | 'middle' | 'large' // 设置网格之间的间隙,数组时表示: [水平间距, 垂直间距]
}
const props = withDefaults(defineProps<Props>(), {
  width: 'auto',
  vertical: false,
  wrap: 'nowrap',
  justify: 'normal',
  align: 'normal',
  gap: 'middle'
})
const flexWidth = computed(() => {
  if (typeof props.width === 'number') {
    return props.width + 'px'
  }
  return props.width
})
const gapValue = computed(() => {
  if (props.gap === undefined) {
    return 0
  }
  if (typeof props.gap === 'number') {
    return props.gap + 'px'
  }
  if (Array.isArray(props.gap)) {
    return props.gap[1] + 'px ' + props.gap[0] + 'px '
  }
  if (['small', 'middle', 'large'].includes(props.gap)) {
    const gapMap = {
      small: '8px',
      middle: '16px',
      large: '24px'
    }
    return gapMap[props.gap]
  }
})
</script>
<template>
  <div
    class="m-flex"
    :class="{ 'flex-vertical': vertical }"
    :style="`
      width: ${flexWidth};
      gap: ${gapValue};
      margin-bottom: -${Array.isArray(props.gap) && wrap ? props.gap[1] : 0}px;
      --wrap: ${wrap};
      --justify: ${justify};
      --align: ${align};
    `"
  >
    <slot></slot>
  </div>
</template>
<style lang="less" scoped>
.m-flex {
  display: flex;
  flex-wrap: var(--wrap);
  justify-content: var(--justify);
  align-items: var(--align);
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
  transition: all 0.3s;
}
.flex-vertical {
  flex-direction: column;
}
</style>

在要使用的页面引入

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

<script setup lang="ts">
import Flex from 'Flex.vue'
import { ref } from 'vue'
const directionOptions = ref([
  {
    label: 'horizontal',
    value: 'horizontal'
  },
  {
    label: 'vertical',
    value: 'vertical'
  }
])
const direction = ref('horizontal')
const baseStyle = {
  width: '25%',
  height: '54px'
}
const justifyOptions = ref([
  {
    label: 'flex-start',
    value: 'flex-start'
  },
  {
    label: 'center',
    value: 'center'
  },
  {
    label: 'flex-end',
    value: 'flex-end'
  },
  {
    label: 'space-between',
    value: 'space-between'
  },
  {
    label: 'space-around',
    value: 'space-around'
  },
  {
    label: 'space-evenly',
    value: 'space-evenly'
  }
])
const alignOptions = ref([
  {
    label: 'flex-start',
    value: 'flex-start'
  },
  {
    label: 'center',
    value: 'center'
  },
  {
    label: 'flex-end',
    value: 'flex-end'
  }
])
const justify = ref(justifyOptions.value[0].value)
const alignItems = ref(alignOptions.value[0].value)
const boxStyle = {
  width: '100%',
  height: '120px',
  borderRadius: '6px',
  border: '1px solid #40a9ff'
}
const gapOptions = ref([
  {
    label: 'small',
    value: 'small'
  },
  {
    label: 'middle',
    value: 'middle'
  },
  {
    label: 'large',
    value: 'large'
  },
  {
    label: 'customize',
    value: 'customize'
  }
])
const gapSize = ref('middle')
const customGapSize = ref(16)
</script>
<template>
  <div>
    <h1>{
  { $route.name }} {
  { $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Flex vertical>
      <Radio :options="directionOptions" v-model:value="direction" />
      <Flex :vertical="direction === 'vertical'">
        <div v-for="n in 4" :key="n" :style="{ ...baseStyle, background: `${n % 2 ? '#1677ffbf' : '#1677ff'}` }" />
      </Flex>
    </Flex>
    <h2 class="mt30 mb10">对齐方式</h2>
    <Flex align="start" vertical>
      <p>Select justify :</p>
      <Radio v-model:value="justify" button :options="justifyOptions" />
      <p>Select align :</p>
      <Radio v-model:value="alignItems" button :options="alignOptions" />
      <Flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems">
        <Button type="primary">Primary</Button>
        <Button type="primary">Primary</Button>
        <Button type="primary">Primary</Button>
        <Button type="primary">Primary</Button>
      </Flex>
    </Flex>
    <h2 class="mt30 mb10">设置间隙</h2>
    <Flex vertical>
      <Radio :options="gapOptions" v-model:value="gapSize" />
      <Slider v-if="gapSize === 'customize'" v-model:value="customGapSize" />
      <Flex :gap="gapSize !== 'customize' ? gapSize : customGapSize">
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="link">Link</Button>
      </Flex>
    </Flex>
    <h2 class="mt30 mb10">自动换行</h2>
    <Flex wrap="wrap" :width="600" :gap="[8, 16]">
      <Button v-for="n in 16" :key="n" type="primary">Button</Button>
    </Flex>
  </div>
</template>
相关文章
|
3月前
|
开发者 容器
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
|
12天前
|
容器
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
|
11天前
|
容器
Bootstrap5 Flex(弹性)布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式,包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类,以实现不同设备上的响应式设计。
|
11天前
Bootstrap5 Flex(弹性)布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式,如 .align-content-start、.align-content-center 等。对于单行子元素,使用 .align-items-* 控制对齐,例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。
|
12天前
Bootstrap5 Flex(弹性)布局2
介绍Flex布局的水平和垂直方向控制。`.flex-row`使子元素水平排列,默认左对齐;`.flex-row-reverse`则右对齐。`.flex-column`让子元素垂直排列;`.flex-column-reverse`则反向排列。示例展示了不同类的效果,通过改变类名实现布局调整。
|
2月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
186 57
|
12天前
Bootstrap5 Flex(弹性)布局3
`.justify-content-*` 类用于调整弹性子元素的对齐方式,支持 start、end、center、between、around 等值。`.flex-fill` 类使所有子元素等宽,而 `.flex-grow-1` 则让指定子元素占据剩余空间。这些类在布局设计中非常实用。
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
28天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。
39 10
|
1月前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
66 10