vant/docs/examples/cell.vue

<template>
  <div class="page-cell">
    <h1 class="page-title">Cell</h1>
    
    <h2 class="page-sub-title">基础用法</h2>
    <z-cell-group>
      <z-cell title="单元格1" value="单元格1内容"></z-cell>
      <z-cell title="单元格2" value="单元格2内容"></z-cell>
    </z-cell-group>

    <h2 class="page-sub-title">标题带描述信息</h2>
    <z-cell-group>
      <z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
      <z-cell title="单元格2" label="描述信息"></z-cell>
    </z-cell-group>

    <h2 class="page-sub-title">带图标</h2>
    <z-cell-group>
      <z-cell title="起码运动馆" icon="home"></z-cell>
      <z-cell title="线下门店" icon="location"></z-cell>
    </z-cell-group>

    <h2 class="page-sub-title">可点击的链接</h2>
    <z-cell-group>
      <z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
      <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
    </z-cell-group>

    <h2 class="page-sub-title">高级用法</h2>
    <z-cell-group>
      <z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
        <template slot="title">
          <span class="z-cell-text">起码运动馆</span>
          <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
        </template>
      </z-cell>
      <z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
    </z-cell-group>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('cell click');
    }
  }
};
</script>

<style>
.official-img {
  width: 31px;
  vertical-align: middle;
  border: 0;
}

.page-sub-title {
  padding: 25px 15px;
}
</style>