项目描述
上传时间
浏览人数
先看看效果图再介绍:
是不是看起来和手机设置界面比较相似.这个界面就是使用vue+vant框架构建的.
使用到vant组件有:
CellGroup单元格组 Cell单元格 icon图标 switch开关
引入vant组件并使用
让我们看一下源码是怎样的:
在单元格中,灵活的使用插槽可以自定义单元格,让单元格的样式更加丰富
上图为官方提供的插槽,本次展示这里,多次使用icon左侧图标插槽,在icon组件中可以灵活改变图标的大小,颜色等样式,比起单元格中icon属性来,要多样性强些.
同时,使用right-icon插槽,可以将开关组件添加到单元格中,这样更加美观.
除去第一个和最后一个开关单元格外,其他单元格均有跳转,使用单元格中的路由跳转属性,点击跳转到二级:
展示到此结束,仅供参考.如发现错误,望指出.