card

Card 卡片

组件结构

  1. <template>
  2.     <view class="tui-card-class tui-card" :class="[full?'tui-card-full':'',border?'tui-card-border':'']" @tap="handleClick"
  3.      @longtap="longTap">
  4.         <view class="tui-card-header" :class="{'tui-header-line':header.line}" :style="{background:header.bgcolor || '#fff'}">
  5.             <view class="tui-header-left">
  6.                 <image :src="image.url" class="tui-header-thumb" :class="{'tui-thumb-circle':image.circle}" mode="widthFix" v-if="image.url"
  7.                  :style="{height:px(image.height || 60),width:px(image.width || 60)}"></image>
  8.                 <text class="tui-header-title" :style="{fontSize:px(title.size || 30),color:(title.color || '#7A7A7A')}" v-if="title.text">{{title.text}}</text>
  9.             </view>
  10.             <view class="tui-header-right" :style="{fontSize:px(tag.size || 24),color:(tag.color || '#b2b2b2')}" v-if="tag.text">
  11.                 {{tag.text}}
  12.             </view>
  13.         </view>
  14.         <view class="tui-card-body">
  15.             <slot name="body"></slot>
  16.         </view>
  17.         <view class="tui-card-footer">
  18.             <slot name="footer"></slot>
  19.         </view>
  20.     </view>
  21. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name: "tuiCard",
  4.         props: {
  5.             //是否铺满
  6.             full: {
  7.                 type: Boolean,
  8.                 default: false
  9.             },
  10.             image: {
  11.                 type: Object,
  12.                 default: {
  13.                     url: "", //图片地址
  14.                     height: 60, //图片高度
  15.                     width: 60, //图片宽度
  16.                     circle: false
  17.                 }
  18.             },
  19.             //标题
  20.             title: {
  21.                 type: Object,
  22.                 default: {
  23.                     text: "", //标题文字
  24.                     size: 30, //字体大小
  25.                     color: "#7A7A7A" //字体颜色
  26.                 }
  27.             },
  28.             //标签，时间等
  29.             tag: {
  30.                 type: Object,
  31.                 default: {
  32.                     text: "", //标签文字
  33.                     size: 24, //字体大小
  34.                     color: "#b2b2b2" //字体颜色
  35.                 }
  36.             },
  37.             header: {
  38.                 type: Object,
  39.                 default: {
  40.                     bgcolor: "#fff", //背景颜色
  41.                     line: false //是否去掉底部线条
  42.                 }
  43.             },
  44.             //是否设置外边框
  45.             border: {
  46.                 type: Boolean,
  47.                 default: false
  48.             },
  49.             index: {
  50.                 type: Number,
  51.                 default: 0
  52.             }
  53.         },
  54.         methods: {
  55.             handleClick() {
  56.                 this.$emit('click', {
  57.                     index: this.index
  58.                 });
  59.             },
  60.             longTap() {
  61.                 this.$emit('longclick', {
  62.                     index: this.index
  63.                 });
  64.             },
  65.             px(num) {
  66.                 return uni.upx2px(num) + "px"
  67.             }
  68.         }
  69.     }
  70. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "full" : 是否铺满宽度,类型:"Boolean",默认值:false
     "image" :图片，头像等， 类型:"Object",默认值:
                {
                    url: "", //图片地址
                    height: 60, //图片高度
                    width: 60, //图片宽度
                    circle: false //是否圆角
                }
     "title" :标题,类型:"Object",默认值:
              {
                text: "", //标题文字
                size: 30, //字体大小
                color: "#7A7A7A" //字体颜色
             }
     "tag":标签，时间等,类型:"Object",默认值:
             {
                text: "", //标签文字
                size: 24, //字体大小
                color: "#b2b2b2" //字体颜色
             }
     "header":头部样式，类型:"Object",默认值:
             {
                bgcolor: "#fff", //背景颜色
                line: false //是否去掉底部线条
             }
     "border":是否设置外边框,类型:"Boolean",默认值:false
     "index":卡片索引,类型:"Number",默认值:0

 methods:
   "handleClick":点击事件
   "longTap":长按事件
   "px":upx转换为px,后续会移除

示例

... 此处省略n行,下载源码查看