猫妈狗爸伴宠师小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

186 lines
5.7 KiB

  1. <template>
  2. <view
  3. class="u-card"
  4. @tap.stop="click"
  5. :class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': getPx(borderRadius) > 0 }"
  6. :style="{
  7. borderRadius: addUnit(borderRadius),
  8. margin: margin,
  9. boxShadow: boxShadow
  10. }"
  11. >
  12. <view
  13. v-if="showHead"
  14. class="u-card__head"
  15. :style="[{padding: addUnit(paddingHead || padding)}, 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="aspectFill"
  27. v-if="thumb"
  28. :style="{
  29. height: addUnit(thumbWidth),
  30. width: addUnit(thumbWidth),
  31. borderRadius: thumbCircle ? '50px' : '4px'
  32. }"
  33. ></image>
  34. <text
  35. class="u-card__head--left__title u-line-1"
  36. :style="{
  37. fontSize: addUnit(titleSize),
  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: addUnit(subTitleSize),
  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"
  59. :style="[{padding: addUnit(paddingBody || padding)}, bodyStyle]"><slot name="body" /></view>
  60. <view
  61. v-if="showFoot"
  62. class="u-card__foot"
  63. @tap="footClick"
  64. :style="[{padding: $slots.foot ? addUnit(paddingFoot || padding) : 0}, footStyle]"
  65. :class="{
  66. 'u-border-top': footBorderTop
  67. }"
  68. >
  69. <slot name="foot" />
  70. </view>
  71. </view>
  72. </template>
  73. <script>
  74. import { propsCard } from './props';
  75. import { mpMixin } from '../../libs/mixin/mpMixin';
  76. import { mixin } from '../../libs/mixin/mixin';
  77. import { addStyle, addUnit, getPx } from '../../libs/function/index';
  78. /**
  79. * card 卡片
  80. * @description 卡片组件一般用于多个列表条目且风格统一的场景
  81. * @tutorial https://uview-plus.jiangruyi.com/components/card.html
  82. * @property {Boolean} full 卡片与屏幕两侧是否留空隙默认false
  83. * @property {String} title 头部左边的标题
  84. * @property {String} title-color 标题颜色默认#303133
  85. * @property {String | Number} title-size 标题字体大小单位rpx默认15px
  86. * @property {String} sub-title 头部右边的副标题
  87. * @property {String} sub-title-color 副标题颜色默认#909399
  88. * @property {String | Number} sub-title-size 副标题字体大小默认13px
  89. * @property {Boolean} border 是否显示边框默认true
  90. * @property {String | Number} index 用于标识点击了第几个卡片
  91. * @property {String} box-shadow 卡片外围阴影字符串形式默认none
  92. * @property {String} margin 卡片与屏幕两边和上下元素的间距需带单位"30px 20px"默认15px
  93. * @property {String | Number} border-radius 卡片整体的圆角值单位rpx默认8px
  94. * @property {Object} head-style 头部自定义样式对象形式
  95. * @property {Object} body-style 中部自定义样式对象形式
  96. * @property {Object} foot-style 底部自定义样式对象形式
  97. * @property {Boolean} head-border-bottom 是否显示头部的下边框默认true
  98. * @property {Boolean} foot-border-top 是否显示底部的上边框默认true
  99. * @property {Boolean} show-head 是否显示头部默认true
  100. * @property {Boolean} show-foot 是否显示尾部默认true
  101. * @property {String} thumb 缩略图路径如设置将显示在标题的左边不建议使用相对路径
  102. * @property {String | Number} thumb-width 缩略图的宽度高等于宽单位px默认30px
  103. * @property {Boolean} thumb-circle 缩略图是否为圆形默认false
  104. * @event {Function} click 整个卡片任意位置被点击时触发
  105. * @event {Function} head-click 卡片头部被点击时触发
  106. * @event {Function} body-click 卡片主体部分被点击时触发
  107. * @event {Function} foot-click 卡片底部部分被点击时触发
  108. * @example <u-card paddingFoot="2px 15px" title="card"></u-card>
  109. */
  110. export default {
  111. name: 'up-card',
  112. data() {
  113. return {};
  114. },
  115. mixins: [mpMixin, mixin, propsCard],
  116. emits: ['click', 'head-click', 'body-click', 'foot-click'],
  117. methods: {
  118. addStyle,
  119. addUnit,
  120. getPx,
  121. click() {
  122. this.$emit('click', this.index);
  123. },
  124. headClick() {
  125. this.$emit('head-click', this.index);
  126. },
  127. bodyClick() {
  128. this.$emit('body-click', this.index);
  129. },
  130. footClick() {
  131. this.$emit('foot-click', this.index);
  132. }
  133. }
  134. };
  135. </script>
  136. <style lang="scss" scoped>
  137. @import "../../libs/css/components.scss";
  138. .u-card {
  139. position: relative;
  140. overflow: hidden;
  141. font-size: 28rpx;
  142. background-color: #ffffff;
  143. box-sizing: border-box;
  144. &-full {
  145. // 如果是与屏幕之间不留空隙,应该设置左右边距为0
  146. margin-left: 0 !important;
  147. margin-right: 0 !important;
  148. width: 100%;
  149. }
  150. &--border:after {
  151. border-radius: 16rpx;
  152. }
  153. &__head {
  154. &--left {
  155. color: $u-main-color;
  156. &__thumb {
  157. margin-right: 16rpx;
  158. }
  159. &__title {
  160. max-width: 400rpx;
  161. }
  162. }
  163. &--right {
  164. color: $u-tips-color;
  165. margin-left: 6rpx;
  166. }
  167. }
  168. &__body {
  169. color: $u-content-color;
  170. }
  171. &__foot {
  172. color: $u-tips-color;
  173. }
  174. }
  175. </style>