birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
47 lines (46 loc) • 1.38 kB
JavaScript
import { defineComponent, ref, computed, onMounted, nextTick } from "vue";
import _col from "./col.vue.js";
const _sfc_main = defineComponent({
name: "Row",
props: {
/** 栏位间隔 Field spacing */
gutter: { type: [String, Number], default: "" },
/** 水平对齐方式 Horizontal alignment */
justify: { type: String, default: "start" },
/** 垂直对齐方式 Vertical alignment */
align: { type: String, default: "start" }
},
setup(props, { slots }) {
const rowRef = ref();
const name = "row";
const cls = computed(() => {
return [`bp-${name}`, `bp-justify-${props.justify}`, `bp-align-${props.align}`];
});
const setGutter = (els) => {
const childrenEls = rowRef.value.children;
els.forEach((item, index) => {
const isCol = item.type === _col;
if (isCol) {
const el = childrenEls[index];
index !== 0 && (el.style.paddingLeft = `${props.gutter}px`);
index !== childrenEls.length - 1 && (el.style.paddingRight = `${props.gutter}px`);
return;
}
if (item.type.toString() === "Symbol(Fragment)") {
setGutter(item.children);
}
});
};
onMounted(() => {
nextTick(() => setGutter(slots.default()));
});
return {
rowRef,
name,
cls
};
}
});
export {
_sfc_main as default
};