FS-UI v0.1.33

Cell 单元

使用指南

import { Cell, CellGroup } from 'fs-ui'

export default {
  components: {
    fsCell: Cell,
    fsCellGroup: CellGroup
  }
}
1
2
3
4
5
6
7
8

代码演示

  • 基础
<fs-cell-group>
  <fs-cell title="门店码收款语言提示">
    <fs-switch v-model="val1" />
  </fs-cell>
  <fs-cell title="好友关注的基金推荐">
    <fs-button type="plain">推送给我</fs-button>
  </fs-cell>
  <fs-cell title="单元格" describe="描述信息" to="/search"></fs-cell>
</fs-cell-group>
1
2
3
4
5
6
7
8
9
  • 标题前带图片
<fs-cell-group>
  <fs-cell title="微信收款" title-img="https://dummyimage.com/60x60/509292/fff">
    <span class="text-grey">66.9</span>
  </fs-cell>
  <fs-cell class="custom" title="微信收款" describe="描述信息" title-img="https://dummyimage.com/60x60/509292/fff">
    <div class="text-grey custom-time">20:11</div>
  </fs-cell>
</fs-cell-group>
1
2
3
4
5
6
7
8
  • 自定义标题
<fs-cell-group tag='div'>
  <fs-cell tag='div'>
    <div slot="title"><fs-icon name="wechatpay" class="title-icon" /><span>微信收款</span></div>
    <fs-checkbox v-model="checked1"></fs-checkbox>
  </fs-cell>
  <fs-cell tag='div'>
    <div slot="title"><fs-icon name="jdpay" class="title-icon" /><span>京东收款</span></div>
    <fs-checkbox v-model="checked2"></fs-checkbox>
  </fs-cell>
  <fs-cell tag='div'>
    <div slot="title"><fs-icon name="alipay" class="title-icon" /><span>支付宝收款</span></div>
    <fs-checkbox v-model="checked3"></fs-checkbox>
  </fs-cell>
</fs-cell-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 跳转按钮
<fs-cell-group>
  <fs-cell title="内链跳转" to="/search"></fs-cell>
  <fs-cell title="外链跳转" url="http://www.fshows.com/"></fs-cell>
</fs-cell-group>
1
2
3
4
  • 跳转按钮前添加描述
<fs-cell title="门店二维码" to="/search">
  <span slot="append" class="text-red">详细信息</span>
</fs-cell>
1
2
3

CellGroup

属性

参数 说明 类型 默认值
tag 元素标签 String 'ul'

插槽

插槽名 说明
- 默认右侧内容

Cell

属性

参数 说明 类型 默认值
tag 元素标签 String 'li'
title 标题 String -
title-img 标题前的图片地址 String -
label 描述信息 String -
to 内部链接跳转 String -
url 外部链接跳转 String -

插槽

插槽名 说明
- 默认右侧内容
title 标题
append 设置属性to或false后跳转图标前面额外的内容

← Search 搜索框 →