card

Card 卡片

组件结构

  1. <template>
  2. <viewclass="tui-card-class tui-card" :class="[full?'tui-card-full':'',border?'tui-card-border':'']" @tap="handleClick"
  3. @longtap="longTap">
  4. <viewclass="tui-card-header" :class="{'tui-header-line':header.line}" :style="{background:header.bgcolor ||'#fff'}">
  5. <viewclass="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. <textclass="tui-header-title" :style="{fontSize:px(title.size ||30),color:(title.color ||'#7A7A7A')}"v-if="title.text">{{title.text}}</text>
  9. </view>
  10. <viewclass="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. <viewclass="tui-card-body">
  15. <slotname="body"></slot>
  16. </view>
  17. <viewclass="tui-card-footer">
  18. <slotname="footer"></slot>
  19. </view>
  20. </view>
  21. </template>

组件脚本

  1. <script>
  2. exportdefault{
  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行,下载源码查看