仿互站小程序

vant/collapse-item/index.js

@@ -0,0 +1,85 @@
+var t = function() {
+    return new Promise(function(t) {
+        return setTimeout(t, 20);
+    });
+};
+
+(0, require("../common/component").VantComponent)({
+    classes: [ "title-class", "content-class" ],
+    relation: {
+        name: "collapse",
+        type: "ancestor",
+        linked: function(t) {
+            this.parent = t;
+        }
+    },
+    props: {
+        name: null,
+        title: null,
+        value: null,
+        icon: String,
+        label: String,
+        disabled: Boolean,
+        clickable: Boolean,
+        border: {
+            type: Boolean,
+            value: !0
+        },
+        isLink: {
+            type: Boolean,
+            value: !0
+        }
+    },
+    data: {
+        contentHeight: 0,
+        expanded: !1,
+        transition: !1
+    },
+    mounted: function() {
+        var n = this;
+        this.updateExpanded().then(t).then(function() {
+            n.set({
+                transition: !0
+            });
+        });
+    },
+    methods: {
+        updateExpanded: function() {
+            if (!this.parent) return Promise.resolve();
+            var t = this.parent.data, n = t.value, e = t.accordion, i = this.parent.children, a = void 0 === i ? [] : i, o = this.data.name, s = a.indexOf(this), r = null == o ? s : o, l = e ? n === r : (n || []).some(function(t) {
+                return t === r;
+            }), u = [];
+            return l !== this.data.expanded && u.push(this.updateStyle(l)), u.push(this.set({
+                index: s,
+                expanded: l
+            })), Promise.all(u);
+        },
+        updateStyle: function(n) {
+            var e = this;
+            return this.getRect(".van-collapse-item__content").then(function(t) {
+                return t.height;
+            }).then(function(i) {
+                return n ? e.set({
+                    contentHeight: i ? i + "px" : "auto"
+                }) : e.set({
+                    contentHeight: i + "px"
+                }).then(t).then(function() {
+                    return e.set({
+                        contentHeight: 0
+                    });
+                });
+            });
+        },
+        onClick: function() {
+            if (!this.data.disabled) {
+                var t = this.data, n = t.name, e = t.expanded, i = this.parent.children.indexOf(this), a = null == n ? i : n;
+                this.parent.switch(a, !e);
+            }
+        },
+        onTransitionEnd: function() {
+            this.data.expanded && this.set({
+                contentHeight: "auto"
+            });
+        }
+    }
+});

vant/collapse-item/index.json

@@ -0,0 +1,14 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-cell": "../cell/index",
+        "forview": "/utils/forview/index",
+        "van-loading": "/vant/loading/index",
+        "van-dialog": "/vant/dialog/index",
+        "van-button": "/vant/button/index",
+        "van-icon": "/vant/icon/index",
+        "van-popup": "/vant/popup/index",
+        "van-tab": "/vant/tab/index",
+        "van-tabs": "/vant/tabs/index"
+    }
+}

vant/collapse-item/index.wxml

@@ -0,0 +1,14 @@
+<view class="van-collapse-item custom-class {{index!==0?'van-hairline--top':''}}">
+    <van-cell bind:click="onClick" border="{{border&&expanded}}" class="{{utils.bem( 'collapse-item__title',{disabled:disabled,expanded:expanded} )}}" clickable="{{clickable}}" customClass="van-cell" hoverClass="van-cell--hover" icon="{{icon}}" isLink="{{isLink}}" label="{{label}}" rightIconClass="van-cell__right-icon" title="{{title}}" titleClass="title-class" value="{{value}}">
+        <slot name="title" slot="title"></slot>
+        <slot name="icon" slot="icon"></slot>
+        <slot name="value"></slot>
+        <slot name="right-icon" slot="right-icon"></slot>
+    </van-cell>
+    <view bind:transitionend="onTransitionEnd" class="{{utils.bem( 'collapse-item__wrapper',{transition:transition} )}}" style="height: {{contentHeight}};">
+        <view class="van-collapse-item__content content-class">
+            <slot></slot>
+        </view>
+    </view>
+</view>
+<wxs module="utils" src="../wxs/utils.wxs" />

vant/collapse-item/index.wxss

@@ -0,0 +1,34 @@
+@import "../area/index.wxss";
+
+.van-collapse-item__title .van-cell__right-icon {
+    transform: rotate(90deg);
+    transition: .3s;
+}
+
+.van-collapse-item__title--expanded .van-cell__right-icon {
+    transform: rotate(-90deg);
+}
+
+.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon {
+    color: #c9c9c9!important;
+}
+
+.van-collapse-item__title--disabled .van-cell--hover {
+    background-color: #fff!important;
+}
+
+.van-collapse-item__wrapper {
+    overflow: hidden;
+}
+
+.van-collapse-item__wrapper--transition {
+    transition: height .3s ease-in-out;
+}
+
+.van-collapse-item__content {
+    padding: 15px;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #999;
+    background-color: #fff;
+}