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
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> |