AyaoJies-boot/AyaoJies-app/components/uni-section/uni-section.vue

<template>
  <view class="uni-section">
    <view class="uni-section-header" @click="onClick">
      <view v-if="type" :class="type" class="uni-section-header__decoration"/>
      <slot v-else name="decoration"></slot>

      <view class="uni-section-header__content">
        <text :class="{'distraction':!subTitle}" :style="{'font-size':titleFontSize,'color':titleColor}"
              class="uni-section__content-title">{{ title }}
        </text>
        <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}"
              class="uni-section-header__content-sub">{{ subTitle }}
        </text>
      </view>

      <view class="uni-section-header__slot-right">
        <slot name="right"></slot>
      </view>
    </view>

    <view :style="{padding: _padding}" class="uni-section-content">
      <slot/>
    </view>
  </view>
</template>

<script>

/**
 * Section 标题栏
 * @description 标题栏
 * @property {String} type = [line|circle|square] 标题装饰类型
 *  @value line 竖线
 *  @value circle 圆形
 *  @value square 正方形
 * @property {String} title 主标题
 * @property {String} titleFontSize 主标题字体大小
 * @property {String} titleColor 主标题字体颜色
 * @property {String} subTitle 副标题
 * @property {String} subTitleFontSize 副标题字体大小
 * @property {String} subTitleColor 副标题字体颜色
 * @property {String} padding 默认插槽 padding
 */

export default {
  name: 'UniSection',
  emits: ['click'],
  props: {
    type: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      required: true,
      default: ''
    },
    titleFontSize: {
      type: String,
      default: '14px'
    },
    titleColor: {
      type: String,
      default: '#333'
    },
    subTitle: {
      type: String,
      default: ''
    },
    subTitleFontSize: {
      type: String,
      default: '12px'
    },
    subTitleColor: {
      type: String,
      default: '#999'
    },
    padding: {
      type: [Boolean, String],
      default: false
    }
  },
  computed: {
    _padding() {
      if (typeof this.padding === 'string') {
        return this.padding
      }

      return this.padding ? '10px' : ''
    }
  },
  watch: {
    title(newVal) {
      if (uni.report && newVal !== '') {
        uni.report('title', newVal)
      }
    }
  },
  methods: {
    onClick() {
      this.$emit('click')
    }
  }
}
</script>
<style lang="scss">
$uni-primary: #2979ff !default;

.uni-section {
  background-color: #fff;

  .uni-section-header {
    position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    padding: 12px 10px;
    font-weight: normal;

    &__decoration {
      margin-right: 6px;
      background-color: $uni-primary;

      &.line {
        width: 4px;
        height: 12px;
        border-radius: 10px;
      }

      &.circle {
        width: 8px;
        height: 8px;
        border-top-right-radius: 50px;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
      }

      &.square {
        width: 8px;
        height: 8px;
      }
    }

    &__content {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      flex: 1;
      color: #333;

      .distraction {
        flex-direction: row;
        align-items: center;
      }

      &-sub {
        margin-top: 2px;
      }
    }

    &__slot-right {
      font-size: 14px;
    }
  }

  .uni-section-content {
    font-size: 14px;
  }
}
</style>