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行,下载源码查看