|
|
@@ -0,0 +1,134 @@
|
|
|
+<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'
|
|
|
+ },
|
|
|
+ stat:{
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ margin: false,
|
|
|
+ border: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ title(newVal) {
|
|
|
+ if (uni.report && this.stat && 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" >
|
|
|
+ .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>
|
zhanghui