From e13367edf304cb78f978e321f1679299a66b3a23 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 10 Jan 2024 16:08:18 +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