Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

u-card.vue 6.9 KiB

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