Cell

列表项。

引入

  1. import { Cell } from 'we-vue'
  3. Vue.use(Cell)

WARNING

cell 只能在 group 中使用。

例子

带说明的列表项

  1. <w-group title="带说明的列表项">
  2.   <w-cell title="标题文字" :value="true"></w-cell>
  3. </w-group>

带图标、说明的列表项

  1. <w-group title="带图标、说明的列表项">
  2.   <w-cell title="标题文字">
  3.     <img :src="imgIcon" slot="icon" class="cell-icon">
  4.     <span slot="ft">说明文字</span>
  5.   </w-cell>
  6.   <w-cell title="标题文字" value="说明文字">
  7.     <img :src="imgIcon" slot="icon" class="cell-icon">
  8.   </w-cell>
  9. </w-group>

带跳转的列表项

  1. <w-group title="带跳转的列表项">
  2.   <w-cell title="标题文字" is-link to="/"></w-cell>
  3.   <w-cell title="标题文字" is-link to="/"></w-cell>
  4. </w-group>

带说明、跳转的列表项

  1. <w-group title="带说明、跳转的列表项">
  2.   <w-cell title="标题文字" value="说明文字" is-link to="/"></w-cell>
  3.   <w-cell title="标题文字" value="说明文字" is-link to="/"></w-cell>
  4. </w-group>

带图标、说明、跳转的列表项

  1. <w-group title="带图标、说明、跳转的列表项">
  2.   <w-cell title="标题文字" value="说明文字" is-link to="/">
  3.     <img :src="imgIcon" alt="" slot="icon" class="cell-icon">
  4.   </w-cell>
  5.   <w-cell title="标题文字" value="说明文字" is-link to="/">
  6.     <img :src="imgIcon" alt="" slot="icon" class="cell-icon">
  7.   </w-cell>
  8. </w-group>

API

参数类型说明可选值默认值
titleString标题，即左侧label
valueString内容，即左侧文字
toString 或 Objectvue-router 跳转的目标地址，与 is-link 配合使用
urlString跳转 url，与 is-link 配合使用
is-linkBoolean是否为链接false

TIP

从 v1.6.0 开始，使用 to 定义 vue-router 跳转目标，使用 url 定义普通跳转。

Slots

name描述
icon左侧图标
bd左侧文字
ft右侧文字