listCard 卡片

背景

由于小程序多个页面都有使用卡片列表，列表都相差无几，为了统一所以封装的 listCard 组件进行统一处理

使用

<template>
  <view v-for="(item, index) in list" :key="index">
    <list-card
      :title="item.title"
      :rows="rows"
      :info="item"
      :styles="styles"
      @click="goToDetail(item)"
    >
      <view slot="cardBodyLeft" v-if="item.docId" class="attachList">
        <attach-list :docId="item.docId" :key="item.id"></attach-list>
      </view>
    </list-card>
  </view>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      data() {
        return {
          list: [],
          rows: [
            {
              label: '发布时间',
              prop: 'deployDate',
              filter: 'parseTime',
              filterParams: '{y}-{m}-{d}',
            },
          ],
          styles:{
            padding:'22rpx 32rpx 20rpx'
          }
        };
      },
    };
  },

  methods: {
    goToDetail(item) {
      uni.navigateTo({
        url: `/subPages/news/newsDetails?id=${item.id}`,
      });
    },
  },
};
</script>

参数说明

属性

属性	描述	类型	可选值	默认值
showHeader	是否显示卡片头部	boolean	—	true
title	卡片头部标题	string	—	-
rightText	卡片头部右侧文字	string	—	-
styles	卡片容器样式	Object	—	{}
titleStyle	卡片标题样式	Object	—	{}
headerStyles	卡片头部样式	Object	—	{}
valueStyle	卡片内容样式	Object	—	{}
col	栅格布局(卡片body 左边布局)	number	1,2,3,4,5,6,7,8,9,10,11,12	12
showLabel	是否显示卡片body 左边标签	boolean	—	true
labelWidth	卡片body 左边标签宽度	number	—	60
labelColor	卡片body 左边标签颜色	String	—	''
labelSize	卡片body 左边标签字体大小	String	—	''
rows	卡片body 左边行	Array[]	—	[]
info	卡片数据	Object	—	—
btnList	卡片按钮列表	Array[]	—	—
icon	卡片iconfont	String	—	—
defaultValue	卡片内容过滤器为空时的默认值	String	—	— —

事件

事件名称	说明	回调参数
click	点击卡片触发	info

rows 属性

属性	描述	类型	可选值	默认值
label	行标签文本	string	—	—
prop	对应行内容的字段名(根据这个参数在info中匹配数据)	string	—	—
template	自定义行内容模板显示	string	—	—
filter	数据过滤的选项	string	parseTime, getNameByCode	—
filterParams	数据过滤的选项的参数(filter为 parseTime 可使用)	string	—	—
col	栅格布局类名	Number	—	12

rows.template 说明

rows.template 使用了公共template方法，可以通过简单的vue模板方式(使用{ { } }进行匹配)，自定义行内容显示，也可以自定义过滤器
默认过滤器有parseTime,getNameByCode

基本示例

<script>
export default {
  name: 'Test',
  data() {
    return {
        list: [],
        rows: [
            {
                label: '发布时间',
                //通过 | 进行过滤器处理 第一个值是模板内容参数名 第二个值是过滤器方法名 第三个值是过滤器参数值
                template:'<div>{{deployDate | parseTime | {y}-{m}-{d} }}</div>' 
            },
        ],
    };
   },
};
</script>

自定义过滤器示例

<script>
import { setTemplateFilter } from '@/utils/template.js' //引入注册过滤器方法
export default {
  name: 'Test',
  data() {
    //  实现自定义过滤器 第一个参数为过滤器名称，第二个值为回调函数(返回内容值和过滤器参数值)
    setTemplateFilter('toFixed',(item,filterParams)=>{
        return item.toFixed(filterParams)
    })
    return {
        list: [],
        rows: [
            {
                label: '数据值',
                //通过 | 进行过滤器处理 第一个值是模板内容参数名 第二个值是过滤器方法名 第三个值是过滤器参数值
                template:'<div>{{ number | toFixed | 2}}</div>' 
            },
        ],
    };
   },
};
</script>

Slot

name	说明
header	卡片头部插槽
cardBodyLeft	卡片body 左边插槽
cardBodyRight	卡片body 右边插槽
footer	卡片底部插槽

源码及综合示例参考

组件源码 (opens new window)template方法参考 (opens new window)