Commit 01ed14f5 authored by TtTao's avatar TtTao

新增:Section是否显示右侧箭头

parent a9758b91
...@@ -15,10 +15,10 @@ ...@@ -15,10 +15,10 @@
</view> </view>
<view class="u-section__right-info" v-if="right" :style="{ <view class="u-section__right-info" v-if="right" :style="{
color: subColor color: subColor
}" @tap="rightClick"> }" @tap="rightClick">
{{subTitle}} {{subTitle}}
<view class="u-section__right-info__icon-arrow u-flex"> <view class="u-section__right-info__icon-arrow u-flex">
<u-icon name="arrow-right" size="24" :color="subColor"></u-icon> <u-icon v-if="arrow" name="arrow-right" size="24" :color="subColor"></u-icon>
</view> </view>
</view> </view>
</view> </view>
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
* @property {String Number} font-size 主标题的字体大小(默认28) * @property {String Number} font-size 主标题的字体大小(默认28)
* @property {Boolean} bold 主标题是否加粗(默认true) * @property {Boolean} bold 主标题是否加粗(默认true)
* @property {String} color 主标题颜色(默认#303133) * @property {String} color 主标题颜色(默认#303133)
* @property {Boolean} arrow 是否显示右侧箭头(默认true)
* @event {Function} click 组件右侧的内容被点击时触发,用于跳转"更多" * @event {Function} click 组件右侧的内容被点击时触发,用于跳转"更多"
* @example <u-section title="今日热门" :right="false"></u-section> * @example <u-section title="今日热门" :right="false"></u-section>
*/ */
...@@ -85,6 +86,11 @@ ...@@ -85,6 +86,11 @@
lineColor: { lineColor: {
type: String, type: String,
default: '' default: ''
},
// 是否显示右侧箭头
arrow: {
type: Boolean,
default: true
} }
}, },
computed: { computed: {
...@@ -108,35 +114,35 @@ ...@@ -108,35 +114,35 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-section { .u-section {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
&__title { &__title {
position: relative; position: relative;
font-size: 28rpx; font-size: 28rpx;
padding-left: 20rpx; padding-left: 20rpx;
display: flex; display: flex;
align-items: center; align-items: center;
&__icon-wrap { &__icon-wrap {
position: absolute; position: absolute;
} }
&__text { &__text {
line-height: 1; line-height: 1;
} }
} }
&__right-info { &__right-info {
color: $u-tips-color; color: $u-tips-color;
font-size: 26rpx; font-size: 26rpx;
display: flex; display: flex;
align-items: center; align-items: center;
&__icon-arrow { &__icon-arrow {
margin-left: 6rpx; margin-left: 6rpx;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment