网站建设原则应考虑哪些方面,免费模板建站,兰州优化网站推广,建设银行网站源码组件之 GfSpace 多个同类型的内容比如 div/span/button/li 等#xff0c;实现水平、垂直方向的均匀布局的功能 效果预览 属性
参数类型说明可选值默认值flexBoolean是否 flex 布局true/falsefalsegapNumber内容间距-10directionString内容排列方向row/columnrow
代码实现
这…组件之 GfSpace 多个同类型的内容比如 div/span/button/li 等实现水平、垂直方向的均匀布局的功能 效果预览 属性
参数类型说明可选值默认值flexBoolean是否 flex 布局true/falsefalsegapNumber内容间距-10directionString内容排列方向row/columnrow
代码实现
这里我们使用了 function 组件来实现 space 组件比较简洁灵活
script
export default {name: GfSpace,props: {flex: Boolean,gap: {type: Number,default: 10,},direction: {type: String,default: row,},},computed: {style() {return {display: this.flex ? flex : block,flexDirection: this.direction,gap: ${this.gap}px,};},},render(h) {return div style{this.style}{this.$slots.default}/div;},
};
/script样式文件可以参考elementui的实现后面会写一篇文章详细分析组件库的样式怎么去写的文章敬请关注
使用 借用上篇文章 tag 标签来测试下平均布局的效果 Gf-space flex gap10gf-tagclosableclosehandleTagClosev-foritem in tags:keyitem.name:typeitem.type{{ item.name }}/gf-tag
/Gf-space
Gf-space flex gap10 directioncolumngf-tagclosableeffectdarkclosehandleTagClosev-foritem in tags:keyitem.name:typeitem.type{{ item.name }}/gf-tag
/Gf-space这样我们就实现了自己的 space 组件
