111 lines
3.2 KiB
Vue
111 lines
3.2 KiB
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>
|