Cell 列表项

列表项,可组成列表。

基本用法

to有值的时候,跳转路由,click-cell点击cell触发事件

  1. <nut-cell title="我是标题" desc="描述文字" @click-cell="clickEvnt" to="/index">
  2. </nut-cell>

设置link-url,点击可跳转。设置target,可以配置是否打开新的页面

  1. <nut-cell :is-link="true" link-url="//m.jd.com" :show-icon="true" title="带链接" target="_target">
  2. </nut-cell>

可以通过设置slot,设置cell的具体内容

  1. <nut-cell :is-link="true" :show-icon="true">
  2. <span slot="title">我是主标题</span>
  3. <span slot="sub-title">我是副标,我们都是通过Slot分发的</span>
  4. <span slot="desc">我是描述</span>
  5. </nut-cell>
  1. <nut-cell :show-icon="true">
  2. <span slot="title">通过Slot自定义右侧ICON</span>
  3. <nut-icon type="tick" slot="icon" size="15px" color="#848484"></nut-icon>
  4. </nut-cell>

slot为avatar可以添加左侧头像,具体组件配置请参考avatar组件

  1. <nut-cell :show-icon="true" title="我是标题" sub-title="我是副标题" desc="展示默认ICON">
  2. <div slot="avatar"><nut-avatar></nut-avatar></div>
  3. </nut-cell>

Prop

字段说明类型默认值
title左侧主标题String-
sub-title左侧副标题String-
desc右侧部分内容String-
is-link是否是链接Booleanfalse
link-url链接UrlString-
show-icon是否展示右侧箭头IconBooleanfalse
bg-color背景颜色String“#FFFFFF”
to路由路径String-
target<a>中target属性String_self

Event

字段说明回调参数
click-cell点击cell区域触发事件回调函数

Cell 列表项 - 图1