新建盐城德森项目

skyouc

2024-12-21 c9c263dc43ad90f95f24a036cee9e6b47afb596c

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

@@ -1,130 +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>
<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>