You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

121 lines
2.2 KiB

<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 分组间隔
*/
export default {
name: 'uniGroup',
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 scoped>
.uni-group {
background: #fff;
margin-top: 10px;
}
.uni-group__title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
padding-left: 15px;
height: 40px;
background-color: #f8f8f8;
font-weight: normal;
color: #333;
}
.uni-group__content {
padding: 15px;
}
.group-conent-padding {
padding: 0 15px;
}
.uni-group__title-text {
font-size: 14px;
color: #333;
}
.distraction {
flex-direction: row;
align-items: center;
}
.uni-group--card {
margin: 10px;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
}
</style>