仿互站小程序

vant/picker/index.js

@@ -0,0 +1,110 @@
+var e = require("../common/component"), t = require("./shared");
+
+(0, e.VantComponent)({
+    classes: [ "active-class", "toolbar-class", "column-class" ],
+    props: Object.assign({}, t.pickerProps, {
+        valueKey: {
+            type: String,
+            value: "text"
+        },
+        defaultIndex: {
+            type: Number,
+            value: 0
+        },
+        columns: {
+            type: Array,
+            value: [],
+            observer: function() {
+                var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : [];
+                this.simple = e.length && !e[0].values, this.children = this.selectAllComponents(".van-picker__column"), 
+                Array.isArray(this.children) && this.children.length && this.setColumns().catch(function() {});
+            }
+        }
+    }),
+    beforeCreate: function() {
+        this.children = [];
+    },
+    methods: {
+        noop: function() {},
+        setColumns: function() {
+            var e = this, t = this.data, n = (this.simple ? [ {
+                values: t.columns
+            } ] : t.columns).map(function(t, n) {
+                return e.setColumnValues(n, t.values);
+            });
+            return Promise.all(n);
+        },
+        emit: function(e) {
+            var t = e.currentTarget.dataset.type;
+            this.simple ? this.$emit(t, {
+                value: this.getColumnValue(0),
+                index: this.getColumnIndex(0)
+            }) : this.$emit(t, {
+                value: this.getValues(),
+                index: this.getIndexes()
+            });
+        },
+        onChange: function(e) {
+            this.simple ? this.$emit("change", {
+                picker: this,
+                value: this.getColumnValue(0),
+                index: this.getColumnIndex(0)
+            }) : this.$emit("change", {
+                picker: this,
+                value: this.getValues(),
+                index: e.currentTarget.dataset.index
+            });
+        },
+        getColumn: function(e) {
+            return this.children[e];
+        },
+        getColumnValue: function(e) {
+            var t = this.getColumn(e);
+            return t && t.getValue();
+        },
+        setColumnValue: function(e, t) {
+            var n = this.getColumn(e);
+            return null == n ? Promise.reject("setColumnValue: 对应列不存在") : n.setValue(t);
+        },
+        getColumnIndex: function(e) {
+            return (this.getColumn(e) || {}).data.currentIndex;
+        },
+        setColumnIndex: function(e, t) {
+            var n = this.getColumn(e);
+            return null == n ? Promise.reject("setColumnIndex: 对应列不存在") : n.setIndex(t);
+        },
+        getColumnValues: function(e) {
+            return (this.children[e] || {}).data.options;
+        },
+        setColumnValues: function(e, t) {
+            var n = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2], s = this.children[e];
+            return null == s ? Promise.reject("setColumnValues: 对应列不存在") : JSON.stringify(s.data.options) === JSON.stringify(t) ? Promise.resolve() : s.set({
+                options: t
+            }).then(function() {
+                n && s.setIndex(0);
+            });
+        },
+        getValues: function() {
+            return this.children.map(function(e) {
+                return e.getValue();
+            });
+        },
+        setValues: function(e) {
+            var t = this, n = e.map(function(e, n) {
+                return t.setColumnValue(n, e);
+            });
+            return Promise.all(n);
+        },
+        getIndexes: function() {
+            return this.children.map(function(e) {
+                return e.data.currentIndex;
+            });
+        },
+        setIndexes: function(e) {
+            var t = this, n = e.map(function(e, n) {
+                return t.setColumnIndex(n, e);
+            });
+            return Promise.all(n);
+        }
+    }
+});

vant/picker/index.json

@@ -0,0 +1,15 @@
+{
+    "component": true,
+    "usingComponents": {
+        "picker-column": "../picker-column/index",
+        "loading": "../loading/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/picker/index.wxml

@@ -0,0 +1,24 @@
+<view class="van-picker custom-class">
+    <view class="van-picker__toolbar van-hairline--top-bottom toolbar-class" wx:if="{{showToolbar}}">
+        <view bindtap="emit" class="van-picker__cancel" data-type="cancel" hoverClass="van-picker__cancel--hover" hoverStayTime="70">
+      {{cancelButtonText}}
+    </view>
+        <view class="van-picker__title van-ellipsis" wx:if="{{title}}">{{title}}</view>
+        <view bindtap="emit" class="van-picker__confirm" data-type="confirm" hoverClass="van-picker__confirm--hover" hoverStayTime="70">
+      {{confirmButtonText}}
+    </view>
+    </view>
+    <view class="van-picker__loading" wx:if="{{loading}}">
+        <loading color="#1989fa"></loading>
+    </view>
+    <view catch:touchmove="noop" class="van-picker__columns" style="height: {{itemHeight*visibleItemCount}}px">
+        <picker-column activeClass="active-class" bind:change="onChange" class="van-picker__column" customClass="column-class" data-index="{{index}}" defaultIndex="{{item.defaultIndex||defaultIndex}}" initialOptions="{{isSimple(columns)?item:item.values}}" itemHeight="{{itemHeight}}" valueKey="{{valueKey}}" visibleItemCount="{{visibleItemCount}}" wx:for="{{isSimple(columns)?[columns]:columns}}" wx:key="index"></picker-column>
+        <view class="van-picker__frame van-hairline--top-bottom" style="height: {{itemHeight}}px"></view>
+    </view>
+</view>
+<wxs module="isSimple">
+function isSimple(columns) {
+    return (columns.length && !columns[(0)].values)
+};
+module.exports = isSimple;
+</wxs>

vant/picker/index.wxss

@@ -0,0 +1,66 @@
+@import "../area/index.wxss";
+
+.van-picker {
+    position: relative;
+    overflow: hidden;
+    -webkit-text-size-adjust: 100%;
+    background-color: #fff;
+    user-select: none;
+}
+
+.van-picker__toolbar {
+    display: flex;
+    height: 44px;
+    line-height: 44px;
+    justify-content: space-between;
+}
+
+.van-picker__cancel,.van-picker__confirm {
+    padding: 0 15px;
+    font-size: 14px;
+    color: #1989fa;
+}
+
+.van-picker__cancel--hover,.van-picker__confirm--hover {
+    background-color: #f2f3f5;
+}
+
+.van-picker__title {
+    max-width: 50%;
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+}
+
+.van-picker__columns {
+    position: relative;
+    display: flex;
+}
+
+.van-picker__column {
+    flex: 1 1;
+    width: 0;
+}
+
+.van-picker__loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 4;
+    display: flex;
+    background-color: hsla(0,0%,100%,.9);
+    align-items: center;
+    justify-content: center;
+}
+
+.van-picker__frame,.van-picker__loading .van-loading {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    pointer-events: none;
+    transform: translateY(-50%);
+}

vant/picker/shared.js

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+});
+
+exports.pickerProps = {
+    title: String,
+    loading: Boolean,
+    showToolbar: Boolean,
+    cancelButtonText: {
+        type: String,
+        value: "取消"
+    },
+    confirmButtonText: {
+        type: String,
+        value: "确认"
+    },
+    visibleItemCount: {
+        type: Number,
+        value: 5
+    },
+    itemHeight: {
+        type: Number,
+        value: 44
+    }
+};