Question

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

参数	说明	类型	默认值	可选值
title	左侧标题	String	-	-
value	右侧文字，可用slot	String	-	-
is-link	是否显示为一个可操作的连接	Boolean	false	true,false
link	点击链接，可以为http(s)协议，也可以是Router	String,Object	-	-
disabled	对label和箭头(如果使用 is-link )显示不可操作样式	Boolean	-	-
inline-desc	标题下面文字，说明文字	String	-
primary	对应的div会加上weui_cell_primary类名实现内容宽度自适应	String	title	title, content
is-loading	是否显示加载图标	Boolean	false	true,false
value-align	文字值的对其方式,当值为right primary值将会设为content	String	left	left,right
border-intent	是否显示边框与左边的间隙	Boolean	true	true,false
arrow-direction	右箭头的方向	String	-	up,down
align-items	align-items 样式值	String	center	参见align-itemsSlots Slot名 说明 备注 default 右侧内容，相比于value的优点是可以用复杂的样式或者调用组件 - icon 标题左侧的图像位置 - after-title 标题右侧位置 - child cell的直接子元素，因此可以添加一个相对于cell绝对定位的元素 - inline-desc inline-desc 内容，和 prop:inline-desc 功能一样，但是可以使用html - title title 插槽，方便自定义样式 - - - -