Flexbox 组件使用教程
优质
小牛编辑
135浏览
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属性 | -- |
插槽
| 名字 | 说明 | 版本要求 |
| 默认插槽 | 内容插槽 | -- |