|
@@ -0,0 +1,167 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="uni-section">
|
|
|
|
|
+ <view class="uni-section-header" @click="onClick">
|
|
|
|
|
+ <view class="uni-section-header__decoration" v-if="type" :class="type" />
|
|
|
|
|
+ <slot v-else name="decoration"></slot>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="uni-section-header__content">
|
|
|
|
|
+ <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
|
|
|
|
|
+ <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="uni-section-header__slot-right">
|
|
|
|
|
+ <slot name="right"></slot>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="uni-section-content" :style="{padding: _padding}">
|
|
|
|
|
+ <slot />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * Section 标题栏
|
|
|
|
|
+ * @description 标题栏
|
|
|
|
|
+ * @property {String} type = [line|circle|square] 标题装饰类型
|
|
|
|
|
+ * @value line 竖线
|
|
|
|
|
+ * @value circle 圆形
|
|
|
|
|
+ * @value square 正方形
|
|
|
|
|
+ * @property {String} title 主标题
|
|
|
|
|
+ * @property {String} titleFontSize 主标题字体大小
|
|
|
|
|
+ * @property {String} titleColor 主标题字体颜色
|
|
|
|
|
+ * @property {String} subTitle 副标题
|
|
|
|
|
+ * @property {String} subTitleFontSize 副标题字体大小
|
|
|
|
|
+ * @property {String} subTitleColor 副标题字体颜色
|
|
|
|
|
+ * @property {String} padding 默认插槽 padding
|
|
|
|
|
+ */
|
|
|
|
|
+
|
|
|
|
|
+ export default {
|
|
|
|
|
+ name: 'UniSection',
|
|
|
|
|
+ emits:['click'],
|
|
|
|
|
+ props: {
|
|
|
|
|
+ type: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ title: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ default: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ titleFontSize: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: '14px'
|
|
|
|
|
+ },
|
|
|
|
|
+ titleColor:{
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: '#333'
|
|
|
|
|
+ },
|
|
|
|
|
+ subTitle: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ subTitleFontSize: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: '12px'
|
|
|
|
|
+ },
|
|
|
|
|
+ subTitleColor: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: '#999'
|
|
|
|
|
+ },
|
|
|
|
|
+ padding: {
|
|
|
|
|
+ type: [Boolean, String],
|
|
|
|
|
+ default: false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ computed:{
|
|
|
|
|
+ _padding(){
|
|
|
|
|
+ if(typeof this.padding === 'string'){
|
|
|
|
|
+ return this.padding
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ return this.padding?'10px':''
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ title(newVal) {
|
|
|
|
|
+ if (uni.report && newVal !== '') {
|
|
|
|
|
+ uni.report('title', newVal)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ onClick() {
|
|
|
|
|
+ this.$emit('click')
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|
|
|
|
|
+<style lang="scss" >
|
|
|
|
|
+ $uni-primary: #2979ff !default;
|
|
|
|
|
+
|
|
|
|
|
+ .uni-section {
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ .uni-section-header {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ /* #ifndef APP-NVUE */
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ /* #endif */
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 12px 10px;
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+
|
|
|
|
|
+ &__decoration{
|
|
|
|
|
+ margin-right: 6px;
|
|
|
|
|
+ background-color: $uni-primary;
|
|
|
|
|
+ &.line {
|
|
|
|
|
+ width: 4px;
|
|
|
|
|
+ height: 12px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.circle {
|
|
|
|
|
+ width: 8px;
|
|
|
|
|
+ height: 8px;
|
|
|
|
|
+ border-top-right-radius: 50px;
|
|
|
|
|
+ border-top-left-radius: 50px;
|
|
|
|
|
+ border-bottom-left-radius: 50px;
|
|
|
|
|
+ border-bottom-right-radius: 50px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.square {
|
|
|
|
|
+ width: 8px;
|
|
|
|
|
+ height: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &__content {
|
|
|
|
|
+ /* #ifndef APP-NVUE */
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ /* #endif */
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+
|
|
|
|
|
+ .distraction {
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ &-sub {
|
|
|
|
|
+ margin-top: 2px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &__slot-right{
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .uni-section-content{
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|