vue移动端项目vant组件库之cell
vue移动端项目vant组件库之cellvue移动端项目按需引入vant组件库vant组件库官网cell单元格.van-cell__title 样式 文字默认居中.van-cell__value 文字默认右靠齐is-link右侧箭头required必填星号to路由跳转url 跳转链接center垂直居中当有label 或者title占位较多时左右垂直居中交整齐arrow-direction右侧箭头
·
vue移动端项目vant组件库之cell
cell单元格
.van-cell__title 样式 文字默认居中
.van-cell__value 文字默认右靠齐
is-link 右侧箭头
required 必填星号
to 路由跳转
url 跳转链接
center 垂直居中 当有label 或者title占位较多时 左右垂直居中交整齐
arrow-direction 右侧箭头的方向 left up down right
插槽
名称 说明
default 自定义右侧 value 的内容
title 自定义左侧 title 的内容
label 自定义标题下方 label 的内容
icon 自定义左侧图标 注意该插槽名并非是 left-icon
right-icon 自定义右侧按钮,默认为arrow
extra 自定义单元格最右侧的额外内容 少用
图标插槽 这个常用
icon 是左侧插槽 默认添加一个 .van-icon-class样式名
自己可以自定义一个图片背景的类名,也可以搭配font-awesome开源库使用
注意设置宽高和background-size
<template>
<div class="box">
<van-cell value="内容" is-link required center>
<!-- 第一种插槽方式 -->
<template #title>
<span class="custom-title">单元格</span>
</template>
<!-- 第二种插槽方式 -->
<!-- <div slot="title" class="red">标题插槽</div> -->
<!-- 默认 -->
<div>我是右侧插槽</div>
<div slot="label">标题下方的内容</div>
<!-- 少用 -->
<div slot="extra">额外内容</div>
</van-cell>
<van-cell title="单元格" value="内容" icon="fire-o"></van-cell>
<!-- 也可以用插槽 -->
<van-cell title="单元格" value="内容">
<div slot="icon">
<!-- 这里需要引入 Icon 组件 -->
<van-icon name="location-o" />
</div>
</van-cell>
<!-- 右侧插槽与左侧插槽类似 -->
<!-- 路由跳转 to 与 is-link 配合使用 -->
<van-cell title="路由跳转" value="登录" to="/login" is-link></van-cell>
<!-- url 链接跳转
当前页面打开外部链接
-->
<van-cell title="链接跳转" value="百度首页" url="https://www.baidu.com" is-link></van-cell>
<!-- 分组 -->
<van-cell-group style="margin-top:50px">
<van-cell title="单元格" value="内容"></van-cell>
<van-cell title="单元格" value="内容" label="描述信息"></van-cell>
</van-cell-group>
</div>
</template>
<script>
// 引入组件Cell CellGroup
import { Cell, CellGroup,Icon } from 'vant';
export default {
components: {
vanCell: Cell,
vanCellGroup: CellGroup,
vanIcon: Icon
},
data() {
return{
}
},
}
</script>
<style lang="scss" scoped>
.box{
/deep/ .van-cell__title{ // sass 修改子组件样式 /deep/ 或者 >>>
text-align: left;
}
.red{
color:red
}
}
</style>
效果
更多推荐
已为社区贡献1条内容
所有评论(0)