From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 30 Nov 2023 16:36:45 +0800
Subject: [PATCH] fix:是否修改

---
 uni_modules/uview-ui/components/u-subsection/u-subsection.vue |  299 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 299 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-subsection/u-subsection.vue b/uni_modules/uview-ui/components/u-subsection/u-subsection.vue
new file mode 100644
index 0000000..cc4d540
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-subsection/u-subsection.vue
@@ -0,0 +1,299 @@
+<template>
+    <view
+        class="u-subsection"
+        ref="u-subsection"
+        :class="[`u-subsection--${mode}`]"
+        :style="[$u.addStyle(customStyle), wrapperStyle]"
+    >
+        <view
+            class="u-subsection__bar"
+            ref="u-subsection__bar"
+            :style="[barStyle]"
+            :class="[
+                mode === 'button' && 'u-subsection--button__bar',
+                current === 0 &&
+                    mode === 'subsection' &&
+                    'u-subsection__bar--first',
+                current > 0 &&
+                    current < list.length - 1 &&
+                    mode === 'subsection' &&
+                    'u-subsection__bar--center',
+                current === list.length - 1 &&
+                    mode === 'subsection' &&
+                    'u-subsection__bar--last',
+            ]"
+        ></view>
+        <view
+            class="u-subsection__item"
+            :class="[
+                `u-subsection__item--${index}`,
+                index < list.length - 1 &&
+                    'u-subsection__item--no-border-right',
+                index === 0 && 'u-subsection__item--first',
+                index === list.length - 1 && 'u-subsection__item--last',
+            ]"
+            :ref="`u-subsection__item--${index}`"
+            :style="[itemStyle(index)]"
+            @tap="clickHandler(index)"
+            v-for="(item, index) in list"
+            :key="index"
+        >
+            <text
+                class="u-subsection__item__text"
+                :style="[textStyle(index)]"
+                >{{ getText(item) }}</text
+            >
+        </view>
+    </view>
+</template>
+
+<script>
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin("dom");
+const animation = uni.requireNativePlugin("animation");
+// #endif
+import props from "./props.js";
+/**
+ * Subsection ���������
+ * @description ������������������������������������������������������������������������
+ * @tutorial https://www.uviewui.com/components/subsection.html
+ * @property {Array}			list			tab���������
+ * @property {String ��� Number}	current			���������������tab���index��������� 0 ���
+ * @property {String}			activeColor		��������������������������� '#3c9cff' ���
+ * @property {String}			inactiveColor	������������������������������ '#303133' ���
+ * @property {String}			mode			���������������mode=button������������������mode=subsection��������������������������� 'button' ���
+ * @property {String ��� Number}	fontSize		���������������������px��������� 12 ���
+ * @property {Boolean}			bold			������������������������������������������ true ���
+ * @property {String}			bgColor			���������������������mode���button������������������ '#eeeeef' ���
+ * @property {Object}			customStyle		���������������������������������
+ * @property {String}	        keyName	        ���`list`��������������������������������������� 'name' ���
+ *
+ * @event {Function} change		������������������������������������  ������ index������������index���������������0������
+ * @example <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
+ */
+export default {
+    name: "u-subsection",
+    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+    data() {
+        return {
+            // ������������
+            itemRect: {
+                width: 0,
+                height: 0,
+            },
+        };
+    },
+    watch: {
+        list(newValue, oldValue) {
+            this.init();
+        },
+        current: {
+            immediate: true,
+            handler(n) {
+                // #ifdef APP-NVUE
+                // ���������nvue������������������translateX���������������������������������������������������������������������
+                // ������animation������������������
+                const ref = this.$refs?.["u-subsection__bar"]?.ref;
+                // ���������ref���������(���������������������������������������������dom������������������������������ref)������������100ms������������������������������(���������������������������������)������������������
+                uni.$u.sleep(ref ? 0 : 100).then(() => {
+                    animation.transition(this.$refs["u-subsection__bar"].ref, {
+                        styles: {
+                            transform: `translateX(${
+                                n * this.itemRect.width
+                            }px)`,
+                            transformOrigin: "center center",
+                        },
+                        duration: 300,
+                    });
+                });
+                // #endif
+            },
+        },
+    },
+    computed: {
+        wrapperStyle() {
+            const style = {};
+            // button���������������������������
+            if (this.mode === "button") {
+                style.backgroundColor = this.bgColor;
+            }
+            return style;
+        },
+        // ���������������
+        barStyle() {
+            const style = {};
+            style.width = `${this.itemRect.width}px`;
+            style.height = `${this.itemRect.height}px`;
+            // ������translateX������������������������������������������*item���������
+            // #ifndef APP-NVUE
+            style.transform = `translateX(${
+                this.current * this.itemRect.width
+            }px)`;
+            // #endif
+            if (this.mode === "subsection") {
+                // ���subsection������������������������������������������������������������������������������translateX������������������������������overflow: hidden���������������������
+                style.backgroundColor = this.activeColor;
+            }
+            return style;
+        },
+        // ���������item���������
+        itemStyle(index) {
+            return (index) => {
+                const style = {};
+                if (this.mode === "subsection") {
+                    // ������border���������
+                    style.borderColor = this.activeColor;
+                    style.borderWidth = "1px";
+                    style.borderStyle = "solid";
+                }
+                return style;
+            };
+        },
+        // ���������������������
+        textStyle(index) {
+            return (index) => {
+                const style = {};
+                style.fontWeight =
+                    this.bold && this.current === index ? "bold" : "normal";
+                style.fontSize = uni.$u.addUnit(this.fontSize);
+                // subsection���������������������������������������������
+                if (this.mode === "subsection") {
+                    style.color =
+                        this.current === index ? "#fff" : this.inactiveColor;
+                } else {
+                    // button������������������������������������������activeColor
+                    style.color =
+                        this.current === index
+                            ? this.activeColor
+                            : this.inactiveColor;
+                }
+                return style;
+            };
+        },
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            uni.$u.sleep().then(() => this.getRect());
+        },
+		// ������������������
+		getText(item) {
+			return typeof item === 'object' ? item[this.keyName] : item
+		},
+        // ���������������������
+        getRect() {
+            // #ifndef APP-NVUE
+            this.$uGetRect(".u-subsection__item--0").then((size) => {
+                this.itemRect = size;
+            });
+            // #endif
+
+            // #ifdef APP-NVUE
+            const ref = this.$refs["u-subsection__item--0"][0];
+            ref &&
+                dom.getComponentRect(ref, (res) => {
+                    this.itemRect = res.size;
+                });
+            // #endif
+        },
+        clickHandler(index) {
+            this.$emit("change", index);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+.u-subsection {
+    @include flex;
+    position: relative;
+    overflow: hidden;
+	/* #ifndef APP-NVUE */
+	width: 100%;
+	box-sizing: border-box;
+	/* #endif */
+
+    &--button {
+        height: 32px;
+        background-color: rgb(238, 238, 239);
+        padding: 3px;
+        border-radius: 3px;
+        align-items: stretch;
+
+        &__bar {
+            background-color: #ffffff;
+            border-radius: 3px !important;
+        }
+    }
+
+    &--subsection {
+        height: 30px;
+    }
+
+    &__bar {
+        position: absolute;
+        /* #ifndef APP-NVUE */
+        transition-property: transform, color;
+        transition-duration: 0.3s;
+        transition-timing-function: ease-in-out;
+        /* #endif */
+
+        &--first {
+            border-top-left-radius: 3px;
+            border-bottom-left-radius: 3px;
+            border-top-right-radius: 0px;
+            border-bottom-right-radius: 0px;
+        }
+
+        &--center {
+            border-top-left-radius: 0px;
+            border-bottom-left-radius: 0px;
+            border-top-right-radius: 0px;
+            border-bottom-right-radius: 0px;
+        }
+
+        &--last {
+            border-top-left-radius: 0px;
+            border-bottom-left-radius: 0px;
+            border-top-right-radius: 3px;
+            border-bottom-right-radius: 3px;
+        }
+    }
+
+    &__item {
+        @include flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        // vue���������������������������������������������������������������������item������������������������
+        position: relative;
+
+        &--no-border-right {
+            border-right-width: 0 !important;
+        }
+
+        &--first {
+            border-top-left-radius: 3px;
+            border-bottom-left-radius: 3px;
+        }
+
+        &--last {
+            border-top-right-radius: 3px;
+            border-bottom-right-radius: 3px;
+        }
+
+        &__text {
+            font-size: 12px;
+            line-height: 12px;
+            @include flex;
+            align-items: center;
+            transition-property: color;
+            transition-duration: 0.3s;
+        }
+    }
+}
+</style>

--
Gitblit v1.8.0