项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/components/uni-section/uni-section.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,167 @@
<template>
   <view class="uni-section">
      <view class="uni-section-header" @click="onClick">
            <view class="uni-section-header__decoration" v-if="type" :class="type" />
        <slot v-else name="decoration"></slot>

        <view class="uni-section-header__content">
          <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ 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 class="uni-section-content" :style="{padding: _padding}">
         <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>