vue移动端项目vant组件库之cell

vue移动端项目vant组件库之cell

vue移动端项目按需引入vant组件库
vant组件库官网

  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>

效果