Flexbox 组件使用教程
优质
小牛编辑
130浏览
2023-12-01
安装
import { Flexbox, FlexboxItem } from 'vux'
export default {
components: {
Flexbox,
FlexboxItem
}
}
// 在入口文件全局引入
import Vue from 'vue'
import { Flexbox, FlexboxItem } from 'vux'
Vue.component('flexbox', Flexbox)
Vue.component('flexbox-item', FlexboxItem)
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
gutter | number | 8 | 间隙像素大小(px) | -- |
orient | string | horizontal | 排布方向,可选['horizontal', 'vertical'] | -- |
justify | string | flex 的justify-content 属性 | -- | |
align | string | flex 的align-items 属性 | -- | |
wrap | string | flex 的flex-wrap 属性 | -- | |
direction | string | flex 的flex-direction 属性 | -- |
插槽
名字 | 说明 | 版本要求 |
默认插槽 | flexbox-item 的内容插槽 | -- |
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
span | number | 占用宽度,如果不设置,所有flexbox-item将平分 | -- | |
order | string | flex 的order 属性 | -- |
插槽
名字 | 说明 | 版本要求 |
默认插槽 | 内容插槽 | -- |