pco/app/uview-ui/components/u-card/u-card.vue

<template>
  <view
      class="u-card"
      @tap.stop="click"
      :class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }"
      :style="{
			borderRadius: borderRadius + 'rpx',
			margin: margin,
			boxShadow: boxShadow
		}"
  >
    <view
        v-if="showHead"
        class="u-card__head"
        :style="[{padding: padding + 'rpx'}, headStyle]"
        :class="{
				'u-border-bottom': headBorderBottom
			}"
        @tap="headClick"
    >
      <view v-if="!$slots.head" class="u-flex u-row-between">
        <view class="u-card__head--left u-flex u-line-1" v-if="title">
          <image
              :src="thumb"
              class="u-card__head--left__thumb"
              mode="aspectfull"
              v-if="thumb"
              :style="{
							height: thumbWidth + 'rpx', 
							width: thumbWidth + 'rpx', 
							borderRadius: thumbCircle ? '100rpx' : '6rpx' 
						}"
          ></image>
          <text
              class="u-card__head--left__title u-line-1"
              :style="{
							fontSize: titleSize + 'rpx',
							color: titleColor
						}"
          >
            {{ title }}
          </text>
        </view>
        <view class="u-card__head--right u-line-1" v-if="subTitle">
          <text
              class="u-card__head__title__text"
              :style="{
							fontSize: subTitleSize + 'rpx',
							color: subTitleColor
						}"
          >
            {{ subTitle }}
          </text>
        </view>
      </view>
      <slot name="head" v-else/>
    </view>
    <view @tap="bodyClick" class="u-card__body" :style="[{padding: padding + 'rpx'}, bodyStyle]">
      <slot name="body"/>
    </view>
    <view
        v-if="showFoot"
        class="u-card__foot"
        @tap="footClick"
        :style="[{padding: $slots.foot ? padding + 'rpx' : 0}, footStyle]"
        :class="{
				'u-border-top': footBorderTop
			}"
    >
      <slot name="foot"/>
    </view>
  </view>
</template>

<script>
/**
 * card 卡片
 * @description 卡片组件一般用于多个列表条目，且风格统一的场景
 * @tutorial https://www.uviewui.com/components/card.html
 * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
 * @property {String} title 头部左边的标题
 * @property {String} title-color 标题颜色（默认#303133）
 * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
 * @property {String} sub-title 头部右边的副标题
 * @property {String} sub-title-color 副标题颜色（默认#909399）
 * @property {String | Number} sub-title-size 副标题字体大小（默认26）
 * @property {Boolean} border 是否显示边框（默认true）
 * @property {String | Number} index 用于标识点击了第几个卡片
 * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
 * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
 * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
 * @property {Object} head-style 头部自定义样式，对象形式
 * @property {Object} body-style 中部自定义样式，对象形式
 * @property {Object} foot-style 底部自定义样式，对象形式
 * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
 * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
 * @property {Boolean} show-head 是否显示头部（默认true）
 * @property {Boolean} show-head 是否显示尾部（默认true）
 * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
 * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
 * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
 * @event {Function} click 整个卡片任意位置被点击时触发
 * @event {Function} head-click 卡片头部被点击时触发
 * @event {Function} body-click 卡片主体部分被点击时触发
 * @event {Function} foot-click 卡片底部部分被点击时触发
 * @example <u-card padding="30" title="card"></u-card>
 */
export default {
  name: 'u-card',
  props: {
    // 与屏幕两侧是否留空隙
    full: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 标题颜色
    titleColor: {
      type: String,
      default: '#303133'
    },
    // 标题字体大小，单位rpx
    titleSize: {
      type: [Number, String],
      default: '30'
    },
    // 副标题
    subTitle: {
      type: String,
      default: ''
    },
    // 副标题颜色
    subTitleColor: {
      type: String,
      default: '#909399'
    },
    // 副标题字体大小，单位rpx
    subTitleSize: {
      type: [Number, String],
      default: '26'
    },
    // 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
    border: {
      type: Boolean,
      default: true
    },
    // 用于标识点击了第几个
    index: {
      type: [Number, String, Object],
      default: ''
    },
    // 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx"
    margin: {
      type: String,
      default: '30rpx'
    },
    // card卡片的圆角
    borderRadius: {
      type: [Number, String],
      default: '16'
    },
    // 头部自定义样式，对象形式
    headStyle: {
      type: Object,
      default() {
        return {};
      }
    },
    // 主体自定义样式，对象形式
    bodyStyle: {
      type: Object,
      default() {
        return {};
      }
    },
    // 底部自定义样式，对象形式
    footStyle: {
      type: Object,
      default() {
        return {};
      }
    },
    // 头部是否下边框
    headBorderBottom: {
      type: Boolean,
      default: true
    },
    // 底部是否有上边框
    footBorderTop: {
      type: Boolean,
      default: true
    },
    // 标题左边的缩略图
    thumb: {
      type: String,
      default: ''
    },
    // 缩略图宽高，单位rpx
    thumbWidth: {
      type: [String, Number],
      default: '60'
    },
    // 缩略图是否为圆形
    thumbCircle: {
      type: Boolean,
      default: false
    },
    // 给head，body，foot的内边距
    padding: {
      type: [String, Number],
      default: '30'
    },
    // 是否显示头部
    showHead: {
      type: Boolean,
      default: true
    },
    // 是否显示尾部
    showFoot: {
      type: Boolean,
      default: true
    },
    // 卡片外围阴影，字符串形式
    boxShadow: {
      type: String,
      default: 'none'
    }
  },
  data() {
    return {};
  },
  methods: {
    click() {
      this.$emit('click', this.index);
    },
    headClick() {
      this.$emit('head-click', this.index);
    },
    bodyClick() {
      this.$emit('body-click', this.index);
    },
    footClick() {
      this.$emit('foot-click', this.index);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-card {
  position: relative;
  overflow: hidden;
  font-size: 28 rpx;
  background-color: #ffffff;
  box-sizing: border-box;

  &-full {
    // 如果是与屏幕之间不留空隙，应该设置左右边距为0
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
  }

  &--border:after {
    border-radius: 16 rpx;
  }

  &__head {
    &--left {
      color: $u-main-color;

      &__thumb {
        margin-right: 16 rpx;
      }

      &__title {
        max-width: 400 rpx;
      }
    }

    &--right {
      color: $u-tips-color;
      margin-left: 6 rpx;
    }
  }

  &__body {
    color: $u-content-color;
  }

  &__foot {
    color: $u-tips-color;
  }
}
</style>