请选择 进入手机版 | 继续访问电脑版

vant的基本组件-Layout 布局

[复制链接]
暖男先生 发表于 2021-1-2 19:00:58 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

文章从vant官网搜录-仅用于个人学习而使用!
目次
先容
1.引入
代码演示
2.底子用法
 
3.设置列元素间距
4.Flex 结构
Row Props
先容

Layout 提供了 van-row 和 van-col 两个组件来举行行列结构。
1.引入

  1. import Vue from 'vue';import { Col, Row } from 'vant';Vue.use(Col);Vue.use(Row);
复制代码
代码演示

2.底子用法

Layout 组件提供了 24列栅格,通过在 Col 上添加 span 属性设置列所占的宽度百分比。别的,添加 offset 属性可以设置列的偏移宽度,盘算方式与 span 相同。

  1.   span: 8  span: 8  span: 8  span: 4  offset: 4, span: 10  offset: 12, span: 12
复制代码
 

3.设置列元素间距

通过 gutter 属性可以设置列元素之间的间距,默认间距为 0。
 

  1.   span: 8  span: 8  span: 8
复制代码
4.Flex 结构

将 type 属性设置为 flex 可以启用 flex 结构,便于举行机动的对齐。

  1.   span: 6  span: 6  span: 6  span: 6  span: 6  span: 6  span: 6  span: 6  span: 6  span: 6  span: 6  span: 6  span: 6  span: 6  span: 6
复制代码
Row Props

|参数 |说明 范例 默认值 type 结构方式,可选值为flex string -
gutter 列元素之间的间距(单位为 px) number | string -
tag 自界说元素标签 string div justify Flex 主轴对齐方式,可选值为 end center
space-around space-between string start  
align Flex 交错轴对齐方式,可选值为 center bottom string top        
 
Col Props 参数说明范例默认值span列元素宽度number | string-offset列元素偏移间隔number | string-tag自界说元素标签stringdiv 
Row Events 事件名说明回调参数click点击时触发event: Event    
Col Events 事件名说明回调参数click点击时触发event: Event 
 

来源:https://blog.csdn.net/weixin_48337566/article/details/112005686
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )