List 列表

使用指南

组件介绍

列表组件，用于信息展示。

引入方式

import { list, Group } from 'feart';

components: {
  'fe-list': list,
  'fe-group': Group
}

代码演示

单标题

<fe-list title="单行列表" desc="详细信息" @change="firstChange" />
<fe-group title="多行标题">
  <fe-list title="多行列表" isLink name="list1" />
  <fe-list title="多行列表" isLink name="list2" />
  <fe-list title="多行列表" isLink name="list3" />
</fe-group>

图标

<fe-list title="图标" isLink icon="point" desc="描述文字" />

单描述

<fe-list title="标题文字" subTitle="副标题信息" isLink />

多描述

<fe-list
  title="标题文字"
  subTitle="副标题信息副标题信息副标题信息副标题信息副标题信息副标题信息副标题信息副标题信息"
/>

小图文

<fe-list title="标题文字" desc="描述文字" isLink>
  <img src="http://placehold.it/30" alt="" slot="image" />
</fe-list>
<fe-list title="标题文字" isLink>
  <img src="http://placehold.it/30" alt="" slot="image" />
</fe-list>

小图文双行列表

<fe-list
  title="标题文字"
  desc="描述文字"
  isLink
  subTitle="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息"
>
  <img src="http://placehold.it/30" alt="" slot="image" />
</fe-list>

中图文

<fe-list title="标题文字" desc="描述文字" isLink imgSize="middle">
  <img src="http://placehold.it/38" alt="" slot="image" />
</fe-list>
<fe-list title="标题文字" isLink imgSize="middle">
  <img src="http://placehold.it/38" alt="" slot="image" />
</fe-list>

大图文

<fe-list title="标题文字" desc="描述文字" isLink imgSize="large">
  <img src="http://placehold.it/66" alt="" slot="image" />
</fe-list>
<fe-list title="标题文字" isLink imgSize="large">
  <img src="http://placehold.it/66" alt="" slot="image" />
</fe-list>

右侧自定义内容

<fe-group>
  <fe-list title="标题文字" desc="描述文字" isLink imgSize="large">
    <div slot="right">
      <span>+20.80</span>
    </div>
  </fe-list>
  <fe-list title="嵌入组件" isLink name="list1">
    <div slot="right">
      <fe-switch :value="openValue" checkedText="开" unCheckedText="关" />
    </div>
  </fe-list>
</fe-group>

跳转

<fe-group>
  <fe-list title="路由跳转" desc="到首页" isLink to="index" @change="firstChange" />
  <fe-list
    title="外部链接跳转"
    desc="Nuofe"
    isLink
    href="https://nuofe.nntest.cn/"
    @change="firstChange"
  />
</fe-group>

API

List

Slots

Group