仿互站小程序

vant/tree-select/index.js

@@ -0,0 +1,64 @@
+(0, require("../common/component").VantComponent)({
+    classes: [ "main-item-class", "content-item-class", "main-active-class", "content-active-class", "main-disabled-class", "content-disabled-class" ],
+    props: {
+        items: Array,
+        mainActiveIndex: {
+            type: Number,
+            value: 0
+        },
+        activeId: {
+            type: [ Number, String ]
+        },
+        maxHeight: {
+            type: Number,
+            value: 300
+        }
+    },
+    data: {
+        subItems: [],
+        mainHeight: 0,
+        itemHeight: 0
+    },
+    watch: {
+        items: function() {
+            var t = this;
+            this.updateSubItems().then(function() {
+                t.updateMainHeight();
+            });
+        },
+        maxHeight: function() {
+            this.updateItemHeight(this.data.subItems), this.updateMainHeight();
+        },
+        mainActiveIndex: "updateSubItems"
+    },
+    methods: {
+        onSelectItem: function(t) {
+            var e = t.currentTarget.dataset.item;
+            e.disabled || this.$emit("click-item", e);
+        },
+        onClickNav: function(t) {
+            var e = t.currentTarget.dataset.index;
+            this.data.items[e].disabled || this.$emit("click-nav", {
+                index: e
+            });
+        },
+        updateSubItems: function() {
+            var t = this.data, e = (t.items[t.mainActiveIndex] || {}).children, i = void 0 === e ? [] : e;
+            return this.updateItemHeight(i), this.set({
+                subItems: i
+            });
+        },
+        updateMainHeight: function() {
+            var t = this.data, e = t.items, i = void 0 === e ? [] : e, a = t.subItems, s = void 0 === a ? [] : a, n = Math.max(44 * i.length, 44 * s.length);
+            this.set({
+                mainHeight: Math.min(n, this.data.maxHeight)
+            });
+        },
+        updateItemHeight: function(t) {
+            var e = Math.min(44 * t.length, this.data.maxHeight);
+            return this.set({
+                itemHeight: e
+            });
+        }
+    }
+});

vant/tree-select/index.json

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

vant/tree-select/index.wxml

@@ -0,0 +1,14 @@
+<view class="van-tree-select" style="height: {{mainHeight}}px">
+    <scroll-view scrollY class="van-tree-select__nav">
+        <view bind:tap="onClickNav" class="van-ellipsis main-item-class {{utils.bem( 'tree-select__nitem',{active:mainActiveIndex===index,disabled:item.disabled} )}} {{mainActiveIndex===index?'main-active-class':''}} {{item.disabled?'main-disabled-class':''}}" data-index="{{index}}" wx:for="{{items}}" wx:key="index">
+      {{item.text}}
+    </view>
+    </scroll-view>
+    <scroll-view scrollY class="van-tree-select__content" style="height: {{itemHeight}}px">
+        <view bind:tap="onSelectItem" class="van-ellipsis van-hairline--bottom content-item-class {{utils.bem( 'tree-select__item',{active:activeId===item.id,disabled:item.disabled} )}} {{activeId===item.id?'content-active-class':''}} {{item.disabled?'content-disabled-class':''}}" data-item="{{item}}" wx:for="{{subItems}}" wx:key="id">
+      {{item.text}}
+      <van-icon class="van-tree-select__selected" name="checked" size="16px" wx:if="{{activeId===item.id}}"></van-icon>
+        </view>
+    </scroll-view>
+</view>
+<wxs module="utils" src="../wxs/utils.wxs" />

vant/tree-select/index.wxss

@@ -0,0 +1,74 @@
+@import "../area/index.wxss";
+
+.van-tree-select {
+    position: relative;
+    font-size: 14px;
+    user-select: none;
+}
+
+.van-tree-select__nav {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 35%;
+    min-width: 120px;
+    background-color: #fafafa;
+}
+
+.van-tree-select__nitem {
+    position: relative;
+    padding: 0 9px 0 15px;
+    line-height: 44px;
+}
+
+.van-tree-select__nitem--active:after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 3.6px;
+    background-color: #f44;
+    content: "";
+}
+
+.van-tree-select__nitem--active {
+    font-weight: 700;
+    background-color: #fff;
+}
+
+.van-tree-select__nitem--disabled {
+    color: #999;
+}
+
+.van-tree-select__content {
+    width: 65%;
+    padding-left: 15px;
+    margin-left: 35%;
+    background-color: #fff;
+    box-sizing: border-box;
+}
+
+.van-tree-select__item {
+    position: relative;
+    font-weight: 700;
+    line-height: 44px;
+}
+
+.van-tree-select__item--active {
+    color: #f44;
+}
+
+.van-tree-select__item--disabled {
+    color: #999;
+}
+
+.van-tree-select__selected {
+    position: absolute;
+    top: 0;
+    right: 15px;
+    bottom: 0;
+    height: 24px;
+    margin: auto 0;
+    line-height: 24px;
+}