jzmall_uni/lib/vant-weapp/picker/index.vue

<template>
    <view>
        <!-- template对应的原始代码，为保证正常显示，已对其进行隐藏。 -->
        <block name="toolbar" v-if="false">
            <view :wx:if="showToolbar" class="van-picker__toolbar van-hairline--top-bottom toolbar-class">
                <view class="van-picker__cancel" hover-class="van-picker__cancel--hover" hover-stay-time="70" data-type="cancel" @tap="emit">{{ cancelButtonText }}</view>
                <view :wx:if="title" class="van-picker__title van-ellipsis">{{ title }}</view>
                <view class="van-picker__confirm" hover-class="van-picker__confirm--hover" hover-stay-time="70" data-type="confirm" @tap="emit">{{ confirmButtonText }}</view>
            </view>
        </block>
        <view class="van-picker custom-class">
            <!-- parse <template is="toolbar" :wx:if="toolbarPosition === 'top'" :data="showToolbar, cancelButtonText, title, confirmButtonText"></template> -->
            <block name="toolbar" :wx:if="toolbarPosition === 'top'">
                <view :wx:if="showToolbar" class="van-picker__toolbar van-hairline--top-bottom toolbar-class">
                    <view class="van-picker__cancel" hover-class="van-picker__cancel--hover" hover-stay-time="70" data-type="cancel" @tap="emit">{{ cancelButtonText }}</view>
                    <view :wx:if="title" class="van-picker__title van-ellipsis">{{ title }}</view>
                    <view class="van-picker__confirm" hover-class="van-picker__confirm--hover" hover-stay-time="70" data-type="confirm" @tap="emit">{{ confirmButtonText }}</view>
                </view>
            </block>
            <view :wx:if="loading" class="van-picker__loading"><loading color="#1989fa" /></view>
            <view class="van-picker__columns" :style="'height: ' + itemHeight * visibleItemCount + 'px'" @touchmove.stop.prevent="noop">
                <picker-column
                    class="van-picker__column"
                    :wx:for="isSimple(columns) ? [columns] : columns"
                    wx:key="index"
                    :data-index="index"
                    custom-class="column-class"
                    :value-key="valueKey"
                    :initial-options="isSimple(columns) ? item : item.values"
                    :default-index="item.defaultIndex || defaultIndex"
                    :item-height="itemHeight"
                    :visible-item-count="visibleItemCount"
                    active-class="active-class"
                    @change="onChange($event, { index })"
                />
                <view class="van-picker__frame van-hairline--top-bottom" :style="'height: ' + itemHeight + 'px'" />
            </view>
            <!-- parse <template is="toolbar" :wx:if="toolbarPosition === 'bottom'" :data="showToolbar, cancelButtonText, title, confirmButtonText"></template> -->
            <block name="toolbar" v-if="false" :wx:if="toolbarPosition === 'bottom'">
                <view :wx:if="showToolbar" class="van-picker__toolbar van-hairline--top-bottom toolbar-class">
                    <view class="van-picker__cancel" hover-class="van-picker__cancel--hover" hover-stay-time="70" data-type="cancel" @tap="emit">{{ cancelButtonText }}</view>
                    <view :wx:if="title" class="van-picker__title van-ellipsis">{{ title }}</view>
                    <view class="van-picker__confirm" hover-class="van-picker__confirm--hover" hover-stay-time="70" data-type="confirm" @tap="emit">{{ confirmButtonText }}</view>
                </view>
            </block>
        </view>
        <sjs module="isSimple">function isSimple(columns) { return columns.length && !columns[0].values; } module.exports = isSimple;</sjs>
    </view>
</template>

<script>
import pickerColumn from '../picker-column/index';
import loading from '../loading/index';
import { VantComponent } from '../common/component';
import { pickerProps } from './shared';
export default {
    components: {
        pickerColumn,
        loading
    },
    data() {
        return {
            showToolbar: '',
            cancelButtonText: '',
            title: '',
            confirmButtonText: '',
            toolbarPosition: '',
            loading: '',
            visibleItemCount: 0,
            columns: '',
            valueKey: '',
            defaultIndex: ''
        };
    },
    classes: ['active-class', 'toolbar-class', 'column-class'],
    props: Object.assign(Object.assign({}, pickerProps), {
        valueKey: {
            type: String,
            value: 'text'
        },
        toolbarPosition: {
            type: String,
            value: 'top'
        },
        defaultIndex: {
            type: Number,
            value: 0
        },
        columns: {
            type: Array,
            value: [],
            observer(columns = []) {
                this.simple = columns.length && !columns[0].values;
                this.children = this.zpSelectAllComponents('.van-picker__column');
                if (Array.isArray(this.children) && this.children.length) {
                    this.setColumns().catch(() => {});
                }
            }
        }
    }),
    beforeCreate() {
        this.children = [];
    },
    methods: {
        noop() {},
        setColumns() {
            const { data } = this;
            const columns = this.simple
                ? [
                      {
                          values: data.columns
                      }
                  ]
                : data.columns;
            const stack = columns.map((column, index) => this.setColumnValues(index, column.values));
            return Promise.all(stack);
        },
        emit(event) {
            const { type } = event.currentTarget.dataset;
            if (this.simple) {
                this.$emit(type, {
                    value: this.getColumnValue(0),
                    index: this.getColumnIndex(0)
                });
            } else {
                this.$emit(type, {
                    value: this.getValues(),
                    index: this.getIndexes()
                });
            }
        },
        onChange(event, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(event, _dataset);
            /* ---处理dataset end--- */
            if (this.simple) {
                this.$emit('change', {
                    picker: this,
                    value: this.getColumnValue(0),
                    index: this.getColumnIndex(0)
                });
            } else {
                this.$emit('change', {
                    picker: this,
                    value: this.getValues(),
                    index: event.currentTarget.dataset.index
                });
            }
        },
        getColumn(index) {
            return this.children[index];
        },
        getColumnValue(index) {
            const column = this.getColumn(index);
            return column && column.getValue();
        },
        setColumnValue(index, value) {
            const column = this.getColumn(index);
            if (column == null) {
                return Promise.reject(new Error('setColumnValue: 对应列不存在'));
            }
            return column.setValue(value);
        },
        getColumnIndex(columnIndex) {
            return (this.getColumn(columnIndex) || {}).data.currentIndex;
        },
        setColumnIndex(columnIndex, optionIndex) {
            const column = this.getColumn(columnIndex);
            if (column == null) {
                return Promise.reject(new Error('setColumnIndex: 对应列不存在'));
            }
            return column.setIndex(optionIndex);
        },
        getColumnValues(index) {
            return (this.children[index] || {}).data.options;
        },
        setColumnValues(index, options, needReset = true) {
            const column = this.children[index];
            if (column == null) {
                return Promise.reject(new Error('setColumnValues: 对应列不存在'));
            }
            const isSame = JSON.stringify(column.data.options) === JSON.stringify(options);
            if (isSame) {
                return Promise.resolve();
            }
            return column
                .set({
                    options
                })
                .then(() => {
                    if (needReset) {
                        column.setIndex(0);
                    }
                });
        },
        getValues() {
            return this.children.map((child) => child.getValue());
        },
        setValues(values) {
            const stack = values.map((value, index) => this.setColumnValue(index, value));
            return Promise.all(stack);
        },
        getIndexes() {
            return this.children.map((child) => child.data.currentIndex);
        },
        setIndexes(indexes) {
            const stack = indexes.map((optionIndex, columnIndex) => this.setColumnIndex(columnIndex, optionIndex));
            return Promise.all(stack);
        }
    }
};
</script>
<style>
@import '../common/index.ttss';
.van-picker {
    position: relative;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-user-select: none;
    user-select: none;
    background-color: #fff;
    background-color: var(--picker-background-color, #fff);
}
.van-picker__toolbar {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 44px;
    height: var(--picker-toolbar-height, 44px);
    line-height: 44px;
    line-height: var(--picker-toolbar-height, 44px);
}
.van-picker__cancel,
.van-picker__confirm {
    padding: 0 16px;
    padding: var(--picker-action-padding, 0 16px);
    font-size: 14px;
    font-size: var(--picker-action-font-size, 14px);
    color: #1989fa;
    color: var(--picker-action-text-color, #1989fa);
}
.van-picker__cancel--hover,
.van-picker__confirm--hover {
    background-color: #f2f3f5;
    background-color: var(--picker-action-active-color, #f2f3f5);
}
.van-picker__title {
    max-width: 50%;
    text-align: center;
    font-weight: 500;
    font-weight: var(--font-weight-bold, 500);
    font-size: 16px;
    font-size: var(--picker-option-font-size, 16px);
}
.van-picker__columns {
    position: relative;
    display: -webkit-flex;
    display: flex;
}
.van-picker__column {
    -webkit-flex: 1 1;
    flex: 1 1;
    width: 0;
}
.van-picker__loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: hsla(0, 0%, 100%, 0.9);
    background-color: var(--picker-loading-mask-color, hsla(0, 0%, 100%, 0.9));
}
.van-picker__frame,
.van-picker__loading .van-loading {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
}
@import '@/lib/vant-weapp/picker/index.ttss';
</style>