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.
58 lines
1.6 KiB
58 lines
1.6 KiB
<template>
|
|
<view class="s-cell-group" :class="custom_class" :style="custom_style">
|
|
<slot name="title">
|
|
<view v-if="title" class="s-cell-group__title" :style="title_style">{{ title }}</view>
|
|
</slot>
|
|
<view class="s-cell-group__content" :class="content_class" :style="content_style">
|
|
<slot />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import componentMixin from '../../mixins/componentMixin';
|
|
|
|
/**
|
|
* s-cell-group 单元格组合
|
|
* @description 用于包裹s-cell单元格的组件
|
|
* @property {String} title 标题
|
|
* @property {Boolean|String} border = [true|false|top|bottom] 边框
|
|
* @property {String} borderColor 边框颜色
|
|
* @property {String|Object} titleStyle 标题样式
|
|
* @property {String|Object} contentStyle 内容样式
|
|
* @example <s-cell-group></s-cell-group>
|
|
*/
|
|
export default {
|
|
name: 'SCellGroup',
|
|
mixins: [componentMixin],
|
|
props: {
|
|
title: String,
|
|
border: {
|
|
type: [Boolean, String],
|
|
default: true,
|
|
},
|
|
borderColor: String,
|
|
titleStyle: [String, Object],
|
|
contentStyle: [String, Object],
|
|
},
|
|
computed: {
|
|
title_style() {
|
|
return this.$mergeStyle(this.titleStyle);
|
|
},
|
|
content_class() {
|
|
return this.$mergeClass({
|
|
's-hairline--top-bottom': this.border === true,
|
|
's-hairline--top': this.border === 'top',
|
|
's-hairline--bottom': this.border === 'bottom',
|
|
});
|
|
},
|
|
content_style() {
|
|
return this.$mergeStyle({
|
|
borderColor: this.borderColor,
|
|
}, this.contentStyle);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" src="./index.scss"></style>
|
|
|