u-card.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. <template>
  2. <view
  3. class="u-card"
  4. @tap.stop="click"
  5. :class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }"
  6. :style="{
  7. borderRadius: borderRadius + 'rpx',
  8. margin: margin,
  9. boxShadow: boxShadow
  10. }"
  11. >
  12. <view
  13. v-if="showHead"
  14. class="u-card__head"
  15. :style="[{padding: padding + 'rpx'}, headStyle]"
  16. :class="{
  17. 'u-border-bottom': headBorderBottom
  18. }"
  19. @tap="headClick"
  20. >
  21. <view v-if="!$slots.head" class="u-flex u-row-between">
  22. <view class="u-card__head--left u-flex u-line-1" v-if="title">
  23. <image
  24. :src="thumb"
  25. class="u-card__head--left__thumb"
  26. mode="aspectfull"
  27. v-if="thumb"
  28. :style="{
  29. height: thumbWidth + 'rpx',
  30. width: thumbWidth + 'rpx',
  31. borderRadius: thumbCircle ? '100rpx' : '6rpx'
  32. }"
  33. ></image>
  34. <text
  35. class="u-card__head--left__title u-line-1"
  36. :style="{
  37. fontSize: titleSize + 'rpx',
  38. color: titleColor
  39. }"
  40. >
  41. {{ title }}
  42. </text>
  43. </view>
  44. <view class="u-card__head--right u-line-1" v-if="subTitle">
  45. <text
  46. class="u-card__head__title__text"
  47. :style="{
  48. fontSize: subTitleSize + 'rpx',
  49. color: subTitleColor
  50. }"
  51. >
  52. {{ subTitle }}
  53. </text>
  54. </view>
  55. </view>
  56. <slot name="head" v-else />
  57. </view>
  58. <view @tap="bodyClick" class="u-card__body" :style="[{padding: padding + 'rpx'}, bodyStyle]"><slot name="body" /></view>
  59. <view
  60. v-if="showFoot"
  61. class="u-card__foot"
  62. @tap="footClick"
  63. :style="[{padding: $slots.foot ? padding + 'rpx' : 0}, footStyle]"
  64. :class="{
  65. 'u-border-top': footBorderTop
  66. }"
  67. >
  68. <slot name="foot" />
  69. </view>
  70. </view>
  71. </template>
  72. <script>
  73. /**
  74. * card 卡片
  75. * @description 卡片组件一般用于多个列表条目,且风格统一的场景
  76. * @tutorial https://www.uviewui.com/components/card.html
  77. * @property {Boolean} full 卡片与屏幕两侧是否留空隙(默认false)
  78. * @property {String} title 头部左边的标题
  79. * @property {String} title-color 标题颜色(默认#303133)
  80. * @property {String | Number} title-size 标题字体大小,单位rpx(默认30)
  81. * @property {String} sub-title 头部右边的副标题
  82. * @property {String} sub-title-color 副标题颜色(默认#909399)
  83. * @property {String | Number} sub-title-size 副标题字体大小(默认26)
  84. * @property {Boolean} border 是否显示边框(默认true)
  85. * @property {String | Number} index 用于标识点击了第几个卡片
  86. * @property {String} box-shadow 卡片外围阴影,字符串形式(默认none)
  87. * @property {String} margin 卡片与屏幕两边和上下元素的间距,需带单位,如"30rpx 20rpx"(默认30rpx)
  88. * @property {String | Number} border-radius 卡片整体的圆角值,单位rpx(默认16)
  89. * @property {Object} head-style 头部自定义样式,对象形式
  90. * @property {Object} body-style 中部自定义样式,对象形式
  91. * @property {Object} foot-style 底部自定义样式,对象形式
  92. * @property {Boolean} head-border-bottom 是否显示头部的下边框(默认true)
  93. * @property {Boolean} foot-border-top 是否显示底部的上边框(默认true)
  94. * @property {Boolean} show-head 是否显示头部(默认true)
  95. * @property {Boolean} show-head 是否显示尾部(默认true)
  96. * @property {String} thumb 缩略图路径,如设置将显示在标题的左边,不建议使用相对路径
  97. * @property {String | Number} thumb-width 缩略图的宽度,高等于宽,单位rpx(默认60)
  98. * @property {Boolean} thumb-circle 缩略图是否为圆形(默认false)
  99. * @event {Function} click 整个卡片任意位置被点击时触发
  100. * @event {Function} head-click 卡片头部被点击时触发
  101. * @event {Function} body-click 卡片主体部分被点击时触发
  102. * @event {Function} foot-click 卡片底部部分被点击时触发
  103. * @example <u-card padding="30" title="card"></u-card>
  104. */
  105. export default {
  106. name: 'u-card',
  107. props: {
  108. // 与屏幕两侧是否留空隙
  109. full: {
  110. type: Boolean,
  111. default: false
  112. },
  113. // 标题
  114. title: {
  115. type: String,
  116. default: ''
  117. },
  118. // 标题颜色
  119. titleColor: {
  120. type: String,
  121. default: '#303133'
  122. },
  123. // 标题字体大小,单位rpx
  124. titleSize: {
  125. type: [Number, String],
  126. default: '30'
  127. },
  128. // 副标题
  129. subTitle: {
  130. type: String,
  131. default: ''
  132. },
  133. // 副标题颜色
  134. subTitleColor: {
  135. type: String,
  136. default: '#909399'
  137. },
  138. // 副标题字体大小,单位rpx
  139. subTitleSize: {
  140. type: [Number, String],
  141. default: '26'
  142. },
  143. // 是否显示外部边框,只对full=false时有效(卡片与边框有空隙时)
  144. border: {
  145. type: Boolean,
  146. default: true
  147. },
  148. // 用于标识点击了第几个
  149. index: {
  150. type: [Number, String, Object],
  151. default: ''
  152. },
  153. // 用于隔开上下左右的边距,带单位的写法,如:"30rpx 30rpx","20rpx 20rpx 30rpx 30rpx"
  154. margin: {
  155. type: String,
  156. default: '30rpx'
  157. },
  158. // card卡片的圆角
  159. borderRadius: {
  160. type: [Number, String],
  161. default: '16'
  162. },
  163. // 头部自定义样式,对象形式
  164. headStyle: {
  165. type: Object,
  166. default() {
  167. return {};
  168. }
  169. },
  170. // 主体自定义样式,对象形式
  171. bodyStyle: {
  172. type: Object,
  173. default() {
  174. return {};
  175. }
  176. },
  177. // 底部自定义样式,对象形式
  178. footStyle: {
  179. type: Object,
  180. default() {
  181. return {};
  182. }
  183. },
  184. // 头部是否下边框
  185. headBorderBottom: {
  186. type: Boolean,
  187. default: true
  188. },
  189. // 底部是否有上边框
  190. footBorderTop: {
  191. type: Boolean,
  192. default: true
  193. },
  194. // 标题左边的缩略图
  195. thumb: {
  196. type: String,
  197. default: ''
  198. },
  199. // 缩略图宽高,单位rpx
  200. thumbWidth: {
  201. type: [String, Number],
  202. default: '60'
  203. },
  204. // 缩略图是否为圆形
  205. thumbCircle: {
  206. type: Boolean,
  207. default: false
  208. },
  209. // 给head,body,foot的内边距
  210. padding: {
  211. type: [String, Number],
  212. default: '30'
  213. },
  214. // 是否显示头部
  215. showHead: {
  216. type: Boolean,
  217. default: true
  218. },
  219. // 是否显示尾部
  220. showFoot: {
  221. type: Boolean,
  222. default: true
  223. },
  224. // 卡片外围阴影,字符串形式
  225. boxShadow: {
  226. type: String,
  227. default: 'none'
  228. }
  229. },
  230. data() {
  231. return {};
  232. },
  233. methods: {
  234. click() {
  235. this.$emit('click', this.index);
  236. },
  237. headClick() {
  238. this.$emit('head-click', this.index);
  239. },
  240. bodyClick() {
  241. this.$emit('body-click', this.index);
  242. },
  243. footClick() {
  244. this.$emit('foot-click', this.index);
  245. }
  246. }
  247. };
  248. </script>
  249. <style lang="scss" scoped>
  250. @import "../../libs/css/style.components.scss";
  251. .u-card {
  252. position: relative;
  253. overflow: hidden;
  254. font-size: 28rpx;
  255. background-color: #ffffff;
  256. box-sizing: border-box;
  257. &-full {
  258. // 如果是与屏幕之间不留空隙,应该设置左右边距为0
  259. margin-left: 0 !important;
  260. margin-right: 0 !important;
  261. width: 100%;
  262. }
  263. &--border:after {
  264. border-radius: 16rpx;
  265. }
  266. &__head {
  267. &--left {
  268. color: $u-main-color;
  269. &__thumb {
  270. margin-right: 16rpx;
  271. }
  272. &__title {
  273. max-width: 400rpx;
  274. }
  275. }
  276. &--right {
  277. color: $u-tips-color;
  278. margin-left: 6rpx;
  279. }
  280. }
  281. &__body {
  282. color: $u-content-color;
  283. }
  284. &__foot {
  285. color: $u-tips-color;
  286. }
  287. }
  288. </style>