2025/2/8第一次更新

dist/dev/mp-weixin/components/firstui/fui-collapse-item/fui-collapse-item.js

@@ -0,0 +1,199 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const _sfc_main = {
+  name: "fui-collapse-item",
+  emits: ["change"],
+  props: {
+    //item项索引或者唯一标识
+    index: {
+      type: [Number, String],
+      default: 0
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    background: {
+      type: String,
+      default: "#fff"
+    },
+    //是否显示动画,如果动画卡顿严重建议不开启
+    animation: {
+      type: Boolean,
+      default: true
+    },
+    // 是否展开
+    open: {
+      type: Boolean,
+      default: false
+    },
+    isBorder: {
+      type: Boolean,
+      default: true
+    },
+    borderColor: {
+      type: String,
+      default: ""
+    },
+    borderLeft: {
+      type: [Number, String],
+      default: 0
+    },
+    arrow: {
+      type: Boolean,
+      default: true
+    },
+    arrowColor: {
+      type: String,
+      default: "#B2B2B2"
+    },
+    arrowRight: {
+      type: [Number, String],
+      default: 24
+    },
+    contentBg: {
+      type: String,
+      default: "#fff"
+    },
+    marginTop: {
+      type: [Number, String],
+      default: 0
+    },
+    marginBottom: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  data() {
+    const elId = `fui_${Math.ceil(Math.random() * 1e6).toString(36)}`;
+    return {
+      isOpen: false,
+      isHeight: null,
+      height: 0,
+      elId
+    };
+  },
+  watch: {
+    open(val) {
+      this.isOpen = val;
+    }
+  },
+  updated(e) {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.init();
+      }, 50);
+    });
+  },
+  created() {
+    this.collapse = this.getCollapse();
+    if (this.collapse && this.collapse.children.indexOf(this) === -1) {
+      this.collapse.children.push(this);
+    }
+    this.oldHeight = 0;
+  },
+  // TODO vue3
+  beforeUnmount() {
+    this.uninstall();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.init();
+        this.isOpen = this.open;
+      }, 50);
+    });
+  },
+  methods: {
+    init() {
+      this.getCollapseHeight();
+    },
+    uninstall() {
+      if (this.collapse) {
+        this.collapse.children.forEach((item, index) => {
+          if (item === this) {
+            this.collapse.children.splice(index, 1);
+          }
+        });
+      }
+    },
+    onClick(isOpen) {
+      if (this.disabled)
+        return;
+      this.isOpen = isOpen;
+      if (this.collapse) {
+        this.collapse.collapseChange(this, isOpen, this.index);
+      } else {
+        this.$emit("change", {
+          index: this.index,
+          isOpen
+        });
+      }
+    },
+    getCollapseHeight(index = 0) {
+      common_vendor.index.createSelectorQuery().in(this).select(`#${this.elId}`).fields({
+        size: true
+      }, (data) => {
+        if (index >= 10)
+          return;
+        if (!data) {
+          index++;
+          this.getCollapseHeight(index);
+          return;
+        }
+        this.height = data.height;
+        this.isHeight = true;
+      }).exec();
+    },
+    getNvueHeight() {
+      dom.getComponentRect(this.$refs["fui_collapse__el"], (option) => {
+        if (option && option.result && option.size) {
+          this.height = option.size.height;
+          this.isHeight = true;
+        }
+      });
+    },
+    getCollapse(name = "fui-collapse") {
+      let parent = this.$parent;
+      let parentName = parent.$options.name;
+      while (parentName !== name) {
+        parent = parent.$parent;
+        if (!parent)
+          return false;
+        parentName = parent.$options.name;
+      }
+      return parent;
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return common_vendor.e({
+    a: $props.arrow
+  }, $props.arrow ? {
+    b: $props.arrowColor,
+    c: !$data.isOpen ? 1 : "",
+    d: $data.isOpen ? 1 : "",
+    e: $props.animation ? 1 : "",
+    f: $props.arrowRight + "rpx"
+  } : {}, {
+    g: $props.isBorder
+  }, $props.isBorder ? {
+    h: $props.borderColor,
+    i: $props.borderLeft + "rpx",
+    j: !$props.borderColor ? 1 : ""
+  } : {}, {
+    k: common_vendor.o(($event) => $options.onClick(!$data.isOpen)),
+    l: $props.disabled ? 1 : "",
+    m: $props.background,
+    n: $data.elId,
+    o: $data.isHeight ? 1 : "",
+    p: $props.animation ? 1 : "",
+    q: ($data.isOpen ? $data.height : 0) + "px",
+    r: $props.contentBg,
+    s: $props.marginTop + "rpx",
+    t: $props.marginBottom + "rpx"
+  });
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-215c8d17"]]);
+wx.createComponent(Component);

dist/dev/mp-weixin/components/firstui/fui-collapse-item/fui-collapse-item.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

dist/dev/mp-weixin/components/firstui/fui-collapse-item/fui-collapse-item.wxml

@@ -0,0 +1 @@
+<view style="{{'margin-top:' + s + ';' + ('margin-bottom:' + t) + ';' + virtualHostStyle}}" class="{{['fui-collapse__item', 'data-v-215c8d17', virtualHostClass]}}"><view catchtap="{{k}}" class="{{['fui-collapse-item__title', 'data-v-215c8d17', l && 'fui-collapse__disabled']}}" style="{{'background:' + m}}"><view class="fui-collapse__title data-v-215c8d17"><slot></slot></view><view wx:if="{{a}}" class="{{[c && 'fui-collapse__arrow-close', d && 'fui-collapse__arrow-active', e && 'fui-collapse__item-ani', 'fui-collapse__arrow', 'data-v-215c8d17']}}" style="{{'margin-right:' + f}}"><view class="fui-collapse__arrow-inner data-v-215c8d17" style="{{'border-color:' + b}}"></view></view><view wx:if="{{g}}" style="{{'background:' + h + ';' + ('left:' + i)}}" class="{{['fui-collapse__border', 'data-v-215c8d17', j && 'fui-collapse__border-color']}}"></view></view><view class="{{['fui-collapse__content-wrap', 'data-v-215c8d17', p && 'fui-collapse-__content-ani']}}" style="{{'height:' + q + ';' + ('background:' + r)}}"><view id="{{n}}" ref="fui_collapse__el" class="{{['fui-collapse__content', 'data-v-215c8d17', o && 'fui-collapse__content-open']}}"><slot name="content"></slot></view></view></view>

dist/dev/mp-weixin/components/firstui/fui-collapse-item/fui-collapse-item.wxss

@@ -0,0 +1,99 @@
+
+.fui-collapse__item.data-v-215c8d17 {
+
+		box-sizing: border-box;
+}
+.fui-collapse-item__title.data-v-215c8d17 {
+
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+
+		flex-direction: row;
+		align-items: center;
+		transition: border-bottom-color 0.3s;
+
+
+
+
+		position: relative;
+}
+.fui-collapse__border.data-v-215c8d17 {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+
+
+
+
+
+		height: 1px;
+		transform: scaleY(0.5);
+		transform-origin: 0 100%;
+		z-index: 1;
+}
+.fui-collapse__border-color.data-v-215c8d17 {
+		background: var(--fui-color-border, #EEEEEE) !important;
+}
+.fui-collapse__disabled.data-v-215c8d17 {
+		opacity: .5;
+}
+.fui-collapse__title.data-v-215c8d17 {
+		flex: 1;
+		overflow: hidden;
+}
+.fui-collapse__arrow-inner.data-v-215c8d17 {
+		height: 40rpx;
+		width: 40rpx;
+		border-width: 0 3px 3px 0;
+		border-style: solid;
+		transform: rotate(45deg) scale(.5);
+
+		box-sizing: border-box;
+
+		position: absolute;
+		top: -6rpx;
+		left: 0;
+}
+.fui-collapse__arrow.data-v-215c8d17 {
+		width: 40rpx;
+		height: 40rpx;
+		position: relative;
+
+		flex-shrink: 0;
+}
+.fui-collapse__arrow-close.data-v-215c8d17 {
+		transform: rotate(0deg);
+}
+.fui-collapse__arrow-active.data-v-215c8d17 {
+		transform: rotate(180deg);
+}
+.fui-collapse__item-ani.data-v-215c8d17 {
+		transition-property: transform;
+		transition-duration: 0.3s;
+		transition-timing-function: ease;
+}
+.fui-collapse__content-wrap.data-v-215c8d17 {
+
+		will-change: height;
+		box-sizing: border-box;
+
+		overflow: hidden;
+		position: relative;
+		height: 0;
+}
+.fui-collapse-__content-ani.data-v-215c8d17 {
+		transition-property: height;
+		transition-duration: 0.3s;
+
+		will-change: height;
+}
+.fui-collapse__content.data-v-215c8d17 {
+
+		width: 100%;
+
+		position: absolute;
+}
+.fui-collapse__content-open.data-v-215c8d17 {
+		position: relative;
+}