props.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. import { defineMixin } from '../../libs/vue'
  2. import defProps from '../../libs/config/props.js'
  3. export const propsCard = defineMixin({
  4. props: {
  5. // 与屏幕两侧是否留空隙
  6. full: {
  7. type: Boolean,
  8. default: false
  9. },
  10. // 标题
  11. title: {
  12. type: String,
  13. default: ''
  14. },
  15. // 标题颜色
  16. titleColor: {
  17. type: String,
  18. default: '#303133'
  19. },
  20. // 标题字体大小
  21. titleSize: {
  22. type: [Number, String],
  23. default: '15px'
  24. },
  25. // 副标题
  26. subTitle: {
  27. type: String,
  28. default: ''
  29. },
  30. // 副标题颜色
  31. subTitleColor: {
  32. type: String,
  33. default: '#909399'
  34. },
  35. // 副标题字体大小
  36. subTitleSize: {
  37. type: [Number, String],
  38. default: '13'
  39. },
  40. // 是否显示外部边框,只对full=false时有效(卡片与边框有空隙时)
  41. border: {
  42. type: Boolean,
  43. default: true
  44. },
  45. // 用于标识点击了第几个
  46. index: {
  47. type: [Number, String, Object],
  48. default: ''
  49. },
  50. // 用于隔开上下左右的边距,带单位的写法,如:"30px 30px","20px 20px 30px 30px"
  51. margin: {
  52. type: String,
  53. default: '15px'
  54. },
  55. // card卡片的圆角
  56. borderRadius: {
  57. type: [Number, String],
  58. default: '8px'
  59. },
  60. // 头部自定义样式,对象形式
  61. headStyle: {
  62. type: Object,
  63. default() {
  64. return {};
  65. }
  66. },
  67. // 主体自定义样式,对象形式
  68. bodyStyle: {
  69. type: Object,
  70. default() {
  71. return {};
  72. }
  73. },
  74. // 底部自定义样式,对象形式
  75. footStyle: {
  76. type: Object,
  77. default() {
  78. return {};
  79. }
  80. },
  81. // 头部是否下边框
  82. headBorderBottom: {
  83. type: Boolean,
  84. default: true
  85. },
  86. // 底部是否有上边框
  87. footBorderTop: {
  88. type: Boolean,
  89. default: true
  90. },
  91. // 标题左边的缩略图
  92. thumb: {
  93. type: String,
  94. default: ''
  95. },
  96. // 缩略图宽高
  97. thumbWidth: {
  98. type: [String, Number],
  99. default: '30px'
  100. },
  101. // 缩略图是否为圆形
  102. thumbCircle: {
  103. type: Boolean,
  104. default: false
  105. },
  106. // 给head,body,foot的内边距
  107. padding: {
  108. type: [String, Number],
  109. default: '15px'
  110. },
  111. paddingHead: {
  112. type: [String, Number],
  113. default: ''
  114. },
  115. paddingBody: {
  116. type: [String, Number],
  117. default: ''
  118. },
  119. paddingFoot: {
  120. type: [String, Number],
  121. default: ''
  122. },
  123. // 是否显示头部
  124. showHead: {
  125. type: Boolean,
  126. default: true
  127. },
  128. // 是否显示尾部
  129. showFoot: {
  130. type: Boolean,
  131. default: true
  132. },
  133. // 卡片外围阴影,字符串形式
  134. boxShadow: {
  135. type: String,
  136. default: 'none'
  137. }
  138. }
  139. })