#

whycq

2023-10-16 a8ea0a75b5353d7bb97ba7825e3db261f85bcff7

 uni_modules/uni-group/components/uni-group/uni-group.vue

New file
@@ -0,0 +1,130 @@
<template>
   <view class="uni-group" :class="['uni-group--'+mode ,margin?'group-margin':'']" :style="{marginTop: `${top}px` }">
      <slot name="title">
         <view v-if="title" class="uni-group__title" :style="{'padding-left':border?'30px':'15px'}">
            <text class="uni-group__title-text">{{ title }}</text>
         </view>
      </slot>
      <view class="uni-group__content" :class="{'group-conent-padding':border}">
         <slot />
      </view>
   </view>
</template>

<script>
   /**
    * Group 分组
    * @description 表单字段分组
    * @tutorial https://ext.dcloud.net.cn/plugin?id=3281
    * @property {String} title 主标题
    * @property {Number} top 分组间隔
    * @property {Number} mode 模式
    */
   export default {
      name: 'uniGroup',
      emits:['click'],
      props: {
         title: {
            type: String,
            default: ''
         },
         top: {
            type: [Number, String],
            default: 10
         },
         mode: {
            type: String,
            default: 'default'
         }
      },
      data() {
         return {
            margin: false,
            border: false
         }
      },
      watch: {
         title(newVal) {
            if (uni.report && newVal !== '') {
               uni.report('title', newVal)
            }
         }
      },
      created() {
         this.form = this.getForm()
         if (this.form) {
            this.margin = true
            this.border = this.form.border
         }
      },
      methods: {
         /**
          * 获取父元素实例
          */
         getForm() {
            let parent = this.$parent;
            let parentName = parent.$options.name;
            while (parentName !== 'uniForms') {
               parent = parent.$parent;
               if (!parent) return false
               parentName = parent.$options.name;
            }
            return parent;
         },
         onClick() {
            this.$emit('click')
         }
      }
   }
</script>
<style lang="scss" scoped>
   .uni-group {
      background: #fff;
      margin-top: 10px;
      // border: 1px red solid;
   }

   .group-margin {
      // margin: 0 -15px;
   }

   .uni-group__title {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      align-items: center;
      padding-left: 15px;
      height: 40px;
      background-color: #eee;
      font-weight: normal;
      color: #666;
   }

   .uni-group__content {
      padding: 15px;
      // padding-bottom: 5px;
      // background-color: #FFF;
   }

   .group-conent-padding {
      padding: 0 15px;
   }

   .uni-group__title-text {
      font-size: 14px;
      color: #666;
   }

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

   .uni-group--card {
      margin: 10px;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.08);
   }
</style>