lc-cell

单元格组件，可用作展示列表信息、链接等

注意事项

• 一般由主要信息、操作动作组成，信息在左、操作在右
• 可以对 label, title, value 进行 slot 覆盖

效果

使用方法

<template>
  <div class="lc-demo">
    <scroller class="container">
      <title title="lc-cell"></title>
      <category title="单行列表"></category>
      <div class="demo">
        <lc-cell label="单行列表"
          title="详细信息"
          :has-arrow="true"
          :link="link"
          @LcCellClicked="LcCellClicked"></lc-cell>
      </div>

      <div class="demo">
        <lc-cell label="单行列表"
          :has-arrow="true"
          @LcCellClicked="LcCellClicked"></lc-cell>
      </div>
        
      <div class="demo">
        <lc-cell label="单行列表"
          desc="详细信息"
          :link="link"
          @LcCellClicked="LcCellClicked"
          :has-arrow="true"></lc-cell>
      </div>

      <div class="demo">
        <lc-cell label="单行列表"
          :icon="icon"
          :has-arrow="true"
          :auto-accessible="true"></lc-cell>
      </div>

      <div class="demo">
        <lc-cell label="单行列表"
          :icon="icon"
          desc="详细信息"
          :has-arrow="true"
          :auto-accessible="true"></lc-cell>
      </div>


     
        
      <category title="多行列表"></category>
      <div class="demo">
        <lc-cell label="多行列表"
          title="更多"
          @LcCellClicked="LcCellClicked"
          :has-arrow="true"
          :has-bottom-border="false"></lc-cell>
      
        <lc-cell label="多行列表"
          :has-arrow="true"
          @LcCellClicked="LcCellClicked"
          :has-top-border="false"
          :has-bottom-border="false"></lc-cell>

        <lc-cell label="多行列表"
          @LcCellClicked="LcCellClicked"
          cell-index="last"
          :has-arrow="true"
          :has-top-border="false"></lc-cell>
      </div>

      <div class="demo">
        <lc-cell label="多行列表"
          @LcCellClicked="LcCellClicked"
          :icon="icon"
          :has-arrow="true"
          :has-bottom-border="false"></lc-cell>
      
        <lc-cell label="多行列表"
          :icon="icon"
          :has-arrow="true"
          @LcCellClicked="LcCellClicked"
          :has-top-border="false"
          :has-bottom-border="false"></lc-cell>

        <lc-cell label="多行列表"
          :icon="icon"
          @LcCellClicked="LcCellClicked"
          :has-arrow="true"
          :has-top-border="false"></lc-cell>
      </div>


      <category title="自定义样式" class="category"></category>
        <div class="demo">
          <lc-cell :has-arrow="false"
            :auto-accessible="false">
            <text :style="{color:color}"
              slot="label">自定义标签</text>
            <switch slot="value"
              @change="color= color==='#4A4A4A' ? '#0785DB' : '#4A4A4A'"></switch>
          </lc-cell> 
        </div>

        <div class="demo">
          <lc-cell :has-arrow="false"
            :auto-accessible="false"
            :cell-style="cellStyle">
            <text :style="{color:color1,textAlign: textAlign}"
              slot="title">自定义标题</text>
            <switch slot="value"
              @change="color1= color1==='#7A7A7A' ? '#399DE2' : '#7A7A7A'"></switch>
          </lc-cell> 
        </div>
    </scroller>
  </div>
</template>

<style scoped>
  .lc-demo {
    width: 750px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #ffffff;
  }

  .container {
    flex: 1;
  }

  .demo {
    width: 750px;
    margin-top: 30px;
  }

  .category {
    margin-top: 40px;
  }

  .default {
    color: #000;
  }

  .demo-title {
    font-size: 30px;
    color: #333;
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 16px;
  }
</style>

<script>
  import Title from 'lighting-ui/packages/_mods/title.vue';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import LcCell from 'lighting-ui/packages/lc-cell';

  export default {
    components: { LcCell, Title, Category },
    data: () => ({
      color: '#0785DB',
      color1: '#399DE2',
      textAlign: 'right',
      cellStyle: {
        backgroundColor: '#f2f3f4',
        marginBottom: '40'
      },
      link: 'https://www.lightyy.com/',
      icon: 'https://img.alicdn.com/tfs/TB1eLvjSXXXXXaiXXXXXXXXXXXX-144-166.jpg'
    }),
    methods: {
      LcCellClicked (e) {
        console.log(e);
      }
    }
  };
</script>

可配置参数

Prop	Type	Required	Default	Description
label	String	N	-	标签
title	String	N	-	右侧标题
desc	String	N	-	标签下方说明信息
link	String	N	-	跳转链接，无链接不跳转
arrow-icon	String	N	-	覆盖右向箭头
has-arrow	Bool	N	false	是否显示箭头
has-top-border	Bool	N	true	是否有上边框
has-bottom-border	Bool	N	true	是否有下边框
cell-style	Object	N	-	单元格样式
label-style	Object	N	-	标签样式
desc-style	Object	N	-	说明信息样式
icon-style	Object	N	-	标签图片样式
title-style	Object	N	-	右侧标题样式
cell-index	String	N	false	单元格在表单中的序号 first / last
icon	String	N	-	标签图片

Slot

1. <slot name="label"></slot>：label卡槽，替换默认 label 占位
2. <slot name="title"></slot>：title卡槽，替换默认 title 占位
3. <slot name="value"></slot>：右边卡槽，有需要传入switch等场景

事件回调

//点击事件回调  `@LcCellClicked="LcCellClicked"`