<template>
|
<div v-show="isShow" :style="style">
|
<slot></slot>
|
</div>
|
</template>
|
<script setup lang="ts" name="GridItem">
|
import { computed, inject, Ref, ref, useAttrs, watch } from "vue";
|
import { BreakPoint, Responsive } from "../interface/index";
|
|
type Props = {
|
offset?: number;
|
span?: number;
|
suffix?: boolean;
|
xs?: Responsive;
|
sm?: Responsive;
|
md?: Responsive;
|
lg?: Responsive;
|
xl?: Responsive;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
offset: 0,
|
span: 1,
|
suffix: false,
|
xs: undefined,
|
sm: undefined,
|
md: undefined,
|
lg: undefined,
|
xl: undefined
|
});
|
|
const attrs = useAttrs() as { index: string };
|
const isShow = ref(true);
|
|
// 注入断点
|
const breakPoint = inject<Ref<BreakPoint>>("breakPoint", ref("xl"));
|
const shouldHiddenIndex = inject<Ref<number>>("shouldHiddenIndex", ref(-1));
|
watch(
|
() => [shouldHiddenIndex.value, breakPoint.value],
|
n => {
|
if (!!attrs.index) {
|
isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]));
|
}
|
},
|
{ immediate: true }
|
);
|
|
const gap = inject("gap", 0);
|
const cols = inject("cols", ref(4));
|
const style = computed(() => {
|
let span = props[breakPoint.value]?.span ?? props.span;
|
let offset = props[breakPoint.value]?.offset ?? props.offset;
|
if (props.suffix) {
|
return {
|
gridColumnStart: cols.value - span - offset + 1,
|
gridColumnEnd: `span ${span + offset}`,
|
marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
|
};
|
} else {
|
return {
|
gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
|
span + offset > cols.value ? cols.value : span + offset
|
}`,
|
marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
|
};
|
}
|
});
|
</script>
|
