birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
46 lines (45 loc) • 1.37 kB
JavaScript
;
const vue = require("vue");
const col = require("./col.vue.js");
const _sfc_main = vue.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 = vue.ref();
const name = "row";
const cls = vue.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);
}
});
};
vue.onMounted(() => {
vue.nextTick(() => setGutter(slots.default()));
});
return {
rowRef,
name,
cls
};
}
});
module.exports = _sfc_main;