Cell 单元格

import { Cell, CellBox } from 'feui';
components: {
  [Cell.name]: Cell,
  [CellBox.name]: CellBox
}
data () {
  return {
    money: null,
    showContent001: false,
    showContent002: false,
    showContent003: false,
    showContent004: false
  }
}

代码演示

基础用法

 <fe-group title='你好'>
  <fe-cell title='Cell' value='sss'></fe-cell>
</fe-group>

不可用状态

<fe-group>
  <fe-cell title="我的账号" value="安全保护" @click.native="onClick"></fe-cell>
  <fe-cell title="余额" @click.native="onClick" 
    :is-loading="!money" :value="money">
  </fe-cell>
  <fe-cell title="转账" disabled is-link></fe-cell>
</fe-group>

标题左侧 图标或者图片

<fe-group title='你好'>
  <fe-cell title='Cell' value='3666'>
    <fe-icons type='success' slot="icon"></fe-icons>
  </fe-cell> 
  <fe-cell title='Cell' value='3666'>
    <img slot="icon" width="20" 
    style="display:block;margin-right:5px;" 
    src="data:image/png;base64,iVBO...">
  </fe-cell> 
</fe-group>

利用slot重置样式

<fe-group title="使用Slot插槽自定义样式">
  <fe-cell title="Slot 插槽">
    <div>
      <span style="color: green">我是自定义内容</span>
    </div>
  </fe-cell>
</fe-group>

折叠

<fe-group title="折叠">
  <fe-cell
    title="Title 001"
    is-link
    :border-intent="false"
    :arrow-direction="showContent001 ? 'up' : 'down'"
    @click.native="showContent001 = !showContent001"></fe-cell>
    <template v-if="showContent001">
      <cell-box :border-intent="false" class="sub-item"
       is-link>content 001</cell-box>
      <cell-box class="sub-item" is-link>content 001</cell-box>
      <cell-box class="sub-item" is-link>content 001</cell-box>
    </template>
  <fe-cell
    title="有动画的"
    is-link
    :border-intent="false"
    :arrow-direction="showContent004 ? 'up' : 'down'"
    @click.native="showContent004 = !showContent004"></fe-cell>
    <p class="slide" :class="showContent004?'animate':''">
      嫂嫂，武二有话说.<br/>
      嫂嫂，武二有话说.<br/>
      嫂嫂，武二有话说.<br/>
      嫂嫂，武二有话说.</p>
</fe-group>

带连接效果

<fe-group title="带连接的">
  <fe-cell title="标题文字" value="404" is-link link="/404"></fe-cell>
  <fe-cell title="去诺诺网" is-link link="http://jss.com.cn" 
    inline-desc='去诺诺网'></fe-cell>
  <fe-cell title="去福元网" is-link link="http://ifuyuan.wang" 
    inline-desc='福元网'></fe-cell>
</fe-group>

API