From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-section/u-section.vue | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 154 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-section/u-section.vue b/uview-ui/components/u-section/u-section.vue
new file mode 100644
index 0000000..02293ce
--- /dev/null
+++ b/uview-ui/components/u-section/u-section.vue
@@ -0,0 +1,154 @@
+<template>
+ <view class="u-section">
+ <view class="u-section__title" :style="{
+ fontWeight: bold ? 'bold' : 'normal',
+ color: color,
+ fontSize: fontSize + 'rpx',
+ paddingLeft: showLine ? (fontSize * 0.7) + 'rpx' : 0
+ }" :class="{
+ 'u-section--line': showLine
+ }">
+ <view class="u-section__title__icon-wrap u-flex" :style="[lineStyle]" v-if="showLine">
+ <u-icon top="0" name="column-line" :size="fontSize * 1.25" bold :color="lineColor ? lineColor : color"></u-icon>
+ </view>
+ <text class="u-flex u-section__title__text">{{title}}</text>
+ </view>
+ <view class="u-section__right-info" v-if="right || $slots.right" :style="{
+ color: subColor
+ }" @tap="rightClick">
+ <slot name="right" v-if="$slots.right" />
+ <block v-else>
+ {{subTitle}}
+ <view class="u-section__right-info__icon-arrow u-flex" v-if="arrow">
+ <u-icon name="arrow-right" size="24" :color="subColor"></u-icon>
+ </view>
+ </block>
+ </view>
+ </view>
+</template>
+
+<script>
+ /**
+ * section 鏌ョ湅鏇村
+ * @description 璇ョ粍浠朵竴鑸敤浜庡垎绫讳俊鎭湁寰堝锛屼絾鏄檺浜庣瘒骞呭彧鑳藉垪鍑轰竴閮ㄥ垎锛岃鐢ㄦ埛閫氳繃"鏌ョ湅鏇村"鑾峰緱鏇村淇℃伅鐨勫満鏅紝瀹為檯鏁堟灉瑙佹紨绀恒��
+ * @tutorial https://www.uviewui.com/components/section.html
+ * @property {String} title 宸﹁竟涓绘爣棰�
+ * @property {String} sub-title 鍙宠竟鍓爣棰橈紙榛樿鏇村锛�
+ * @property {Boolean} right 鏄惁鏄剧ず鍙宠竟鐨勫唴瀹癸紙榛樿true锛�
+ * @property {Boolean} showLine 鏄惁鏄剧ず宸﹁竟鐨勭珫鏉★紙榛樿true锛�
+ * @property {Boolean} arrow 鏄惁鏄剧ず鍙宠竟绠ご锛堥粯璁rue锛�
+ * @property {String Number} font-size 涓绘爣棰樼殑瀛椾綋澶у皬锛堥粯璁�28锛�
+ * @property {Boolean} bold 涓绘爣棰樻槸鍚﹀姞绮楋紙榛樿true锛�
+ * @property {String} color 涓绘爣棰橀鑹诧紙榛樿#303133锛�
+ * @event {Function} click 缁勪欢鍙充晶鐨勫唴瀹硅鐐瑰嚮鏃惰Е鍙戯紝鐢ㄤ簬璺宠浆"鏇村"
+ * @example <u-section title="浠婃棩鐑棬" :right="false"></u-section>
+ */
+ export default {
+ name: "u-section",
+ props: {
+ // 鏍囬淇℃伅
+ title: {
+ type: String,
+ default: ''
+ },
+ // 鍙宠竟鍓爣棰樺唴瀹�
+ subTitle: {
+ type: String,
+ default: '鏇村'
+ },
+ // 鏄惁鏄剧ず鍙宠竟鐨勫唴瀹�
+ right: {
+ type: Boolean,
+ default: true
+ },
+ fontSize: {
+ type: [Number, String],
+ default: 28
+ },
+ // 涓绘爣棰樻槸鍚﹀姞绮�
+ bold: {
+ type: Boolean,
+ default: true
+ },
+ // 涓绘爣棰樼殑棰滆壊
+ color: {
+ type: String,
+ default: '#303133'
+ },
+ // 鍙宠竟鍓爣棰樼殑棰滆壊
+ subColor: {
+ type: String,
+ default: '#909399'
+ },
+ // 鏄惁鏄剧ず宸﹁竟鐨勭珫鏉�
+ showLine: {
+ type: Boolean,
+ default: true
+ },
+ // 宸﹁竟绔栫嚎鐨勯鑹�
+ lineColor: {
+ type: String,
+ default: ''
+ },
+ // 鏄惁鏄剧ず鍙宠竟绠ご
+ arrow: {
+ type: Boolean,
+ default: true
+ },
+ },
+ computed: {
+ // 宸﹁竟绔栨潯鐨勬牱寮�
+ lineStyle() {
+ // 鐢变簬瀹夊崜鍜宨OS鐨勶紝闇�瑕佺◢寰皟鏁寸粷瀵瑰畾浣嶇殑top鍊硷紝鎵嶈兘璁╁乏杈圭殑绔栫嚎鍜屽彸杈圭殑鏂囧瓧鍨傜洿灞呬腑
+ return {
+ // 鐢变簬绔栫嚎涓哄瓧浣撳浘鏍囷紝鍏锋湁姣斿疄闄呯嚎瀹芥洿瀹界殑瀹藉害锛屾墍浠ヤ篃闇�瑕佹牴鎹瓧浣撴墦涓嬪姩鎬佽皟鏁�
+ left: -(Number(this.fontSize) * 0.9) + 'rpx',
+ top: -(Number(this.fontSize) * (this.$u.os() == 'ios' ? 0.14 : 0.15)) + 'rpx',
+ }
+ }
+ },
+ methods: {
+ rightClick() {
+ this.$emit('click');
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-section {
+ @include vue-flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+
+ &__title {
+ position: relative;
+ font-size: 28rpx;
+ padding-left: 20rpx;
+ @include vue-flex;
+ align-items: center;
+
+ &__icon-wrap {
+ position: absolute;
+ }
+
+ &__text {
+ line-height: 1;
+ }
+ }
+
+ &__right-info {
+ color: $u-tips-color;
+ font-size: 26rpx;
+ @include vue-flex;
+ align-items: center;
+
+ &__icon-arrow {
+ margin-left: 6rpx;
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3