crm-mobile/pages/home/components/homeSection.vue

<template>
  <view class="section-wrapper">
    <view class="section-header">
      <view class="left">
        {{ title }}
      </view>
      <view
        v-if="options.length > 0"
        class="right">
        <wk-drop
          v-model="option"
          :list="options" />
      </view>
    </view>
    <slot />
  </view>
</template>

<script>
  export default {
    name: 'HomeSection',
    props: {
      title: {
        type: String,
        default: ''
      },
      options: {
        type: Array,
        default: () => []
      },
      defaultVal: {
        type: [String, Number],
        default: null
      }
    },
    data() {
      return {
        option: ''
      }
    },
    watch: {
      options: {
        handler(val) {
          if (val.length > 0) {
            this.option = val[0].value
          }
        },
        immediate: true,
        deep: true
      },
      option: {
        handler(val) {
          console.log('change---------')
          this.$emit('status', val)
        }
      }
    },
    mounted() {
      if (this.option) {
        this.$emit('status', this.option)
      }
    }
  }
</script>

<style scoped lang="scss">
  .section-wrapper {
    background-color: white;
    border-top: 1rpx solid #e5e5e5;
    border-bottom: 1rpx solid #e5e5e5;
		margin-top: 20rpx;
    margin-bottom: 20rpx;
		padding: 0 32rpx;
		
    .section-header {
      padding: 25rpx 0;
      border-bottom: 1rpx solid $border-color;
      @include left;
      .left {
        flex: 1;
        font-size: 28rpx;
        color: $dark;
        font-weight: 500;
      }
      .right {
        @include left;
        .select {
          height: 40rpx;
          margin-right: 60rpx;
          @include left;
          &:last-child {
            margin-right: 0;
          }
          &-label {
            font-size: 26rpx;
            color: $gray;
            margin-right: 20rpx;
          }
          &-icon {
            width: 20rpx;
          }
        }
      }
    }

    .section-body {
      padding: 40rpx 30rpx;
    }
  }
</style>