birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
51 lines (50 loc) • 1.8 kB
JavaScript
;
const vue = require("vue");
const util = require("../../utils/util.js");
const _sfc_main = vue.defineComponent({
name: "Col",
props: {
/** 栏位数量 1-24 Number of fields 1-24 */
span: { type: [String, Number], default: 24 },
/** 偏移量 Number of offset*/
offset: { type: [String, Number], default: "" },
// <768px 响应式栅格数或者栅格属性对象
xs: { type: [Object, Number] },
// ≥768px 响应式栅格数或者栅格属性对象
sm: { type: [Object, Number] },
// ≥992px 响应式栅格数或者栅格属性对象
md: { type: [Object, Number] },
// ≥1200px 响应式栅格数或者栅格属性对象
lg: { type: [Object, Number] },
// ≥1920px 响应式栅格数或者栅格属性对象
xl: { type: [Object, Number] }
},
setup(props) {
const name = "col";
const cls = vue.computed(() => {
let className = [`bp-${name}`];
Number(props.span) !== 0 ? className.push(`bp-${name}-${props.span}`) : "";
Number(props.offset) !== 0 ? className.push(`bp-${name}-offset-${props.offset}`) : "";
const responsive = ["xs", "sm", "md", "lg", "xl"];
for (let i = 0; i < responsive.length; i++) {
const item = responsive[i];
if (!props[item])
continue;
if (typeof props[item] === "number") {
className.push(`bp-${name}-${item}-${props[item]}`);
continue;
}
if (!util.isNull(props[item])) {
props[item].span && className.push(`bp-${name}-${item}-${props[item].span}`);
props[item].offset && className.push(`bp-${name}-${item}-offset-${props[item].offset}`);
}
}
return className;
});
return {
name,
cls
};
}
});
module.exports = _sfc_main;