39 lines
1.1 KiB
Plaintext
39 lines
1.1 KiB
Plaintext
<template>
|
|
<view class="hr-sec" :style="wrapStyle">
|
|
<view v-if="showBar" class="hr-sec-bar"></view>
|
|
<text class="hr-sec-t">{{ title }}</text>
|
|
<view class="hr-flex1"></view>
|
|
<text v-if="more != ''" class="hr-sec-more" @click="onMore">{{ more }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts" setup>
|
|
import { computed } from 'vue'
|
|
|
|
/**
|
|
* 小节标题
|
|
* 设计稿中由 .sec-t::before 伪元素绘制蓝色竖条，uvue 不支持伪元素，故拆为实体 view。
|
|
*/
|
|
const props = defineProps({
|
|
title : { type: String, default: '' },
|
|
/** 右侧箭头文字，如「全部 ›」 */
|
|
more : { type: String, default: '' },
|
|
/** 是否显示蓝色竖条 */
|
|
showBar : { type: Boolean, default: true },
|
|
/** 是否为首个小节（收紧上边距） */
|
|
first : { type: Boolean, default: false }
|
|
})
|
|
|
|
const emits = defineEmits<{
|
|
(e : 'more-click') : void
|
|
}>()
|
|
|
|
const wrapStyle = computed(() : string => {
|
|
return props.first ? 'margin-top:8rpx;margin-bottom:16rpx;' : 'margin-top:32rpx;margin-bottom:16rpx;'
|
|
})
|
|
|
|
function onMore() : void {
|
|
emits('more-click')
|
|
}
|
|
</script>
|