#

whycq

2022-04-06 c366ccb5e814eba5711dd9edf78cac8379b14a70

#

 uni_modules/uni-group/changelog.md

New file
@@ -0,0 +1,14 @@
## 1.2.1（2021-11-22）
- 修复 vue3中某些scss变量无法找到的问题
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-group](https://uniapp.dcloud.io/component/uniui/uni-group)
## 1.1.7（2021-11-08）
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
- 优化 组件文档
## 1.0.3（2021-05-12）
- 新增 组件示例地址
## 1.0.2（2021-02-05）
- 调整为uni_modules目录规范
- 优化 兼容 nvue 页面

 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>

 uni_modules/uni-group/package.json

New file
@@ -0,0 +1,87 @@
{
  "id": "uni-group",
  "displayName": "uni-group 分组",
  "version": "1.2.1",
  "description": "分组组件可用于将组件用于分组，添加间隔，以产生明显的区块",
  "keywords": [
    "uni-ui",
    "uniui",
    "group",
    "分组",
    ""
],
  "repository": "https://github.com/dcloudio/uni-ui",
  "engines": {
    "HBuilderX": ""
  },
  "directories": {
    "example": "../../temps/example_temps"
  },
  "dcloudext": {
    "category": [
      "前端组件",
      "通用组件"
    ],
    "sale": {
      "regular": {
        "price": "0.00"
      },
      "sourcecode": {
        "price": "0.00"
      }
    },
    "contact": {
      "qq": ""
    },
    "declaration": {
      "ads": "无",
      "data": "无",
      "permissions": "无"
    },
    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
  },
  "uni_modules": {
    "dependencies": ["uni-scss"],
    "encrypt": [],
    "platforms": {
      "cloud": {
        "tcb": "y",
        "aliyun": "y"
      },
      "client": {
        "App": {
          "app-vue": "y",
          "app-nvue": "y"
        },
        "H5-mobile": {
          "Safari": "y",
          "Android Browser": "y",
          "微信浏览器(Android)": "y",
          "QQ浏览器(Android)": "y"
        },
        "H5-pc": {
          "Chrome": "y",
          "IE": "y",
          "Edge": "y",
          "Firefox": "y",
          "Safari": "y"
        },
        "小程序": {
          "微信": "y",
          "阿里": "y",
          "百度": "y",
          "字节跳动": "y",
          "QQ": "y"
        },
        "快应用": {
          "华为": "u",
          "联盟": "u"
        },
        "Vue": {
            "vue2": "y",
            "vue3": "y"
        }
      }
    }
  }
}

 uni_modules/uni-group/readme.md

New file
@@ -0,0 +1,9 @@

## Group 分组
> **组件名：uni-group**
> 代码块： `uGroup`

分组组件可用于将组件分组，添加间隔，以产生明显的区块。

### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-group)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839