product_wx/wxcomponents/weapp/lib/picker-column/index.vue

<template>
<uni-shadow-root class="weapp-lib-picker-column-index"><view class="van-picker-column custom-class" :style="computed.rootStyle({ itemHeight, visibleItemCount })" @touchstart="onTouchStart" @touchmove.stop.prevent="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
  <view :style="computed.wrapperStyle({ offset, itemHeight, visibleItemCount, duration })">
    <view v-for="(option,index) in (options)" :key="option.index" :data-index="index" :style="'height: '+(itemHeight)+'px'" :class="'van-ellipsis '+(utils.bem('picker-column__item', { disabled: option && option.disabled, selected: index === currentIndex }))+' '+(index === currentIndex ? 'active-class' : '')" @click="onClickItem">{{ computed.optionText(option, valueKey) }}</view>
  </view>
</view></uni-shadow-root>
</template>
<wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./index.wxs" module="computed"></wxs>
<script>

global['__wxRoute'] = 'weapp/lib/picker-column/index'
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var component_1 = require("../common/component");
var utils_1 = require("../common/utils");
var validator_1 = require("../common/validator");
var DEFAULT_DURATION = 200;
(0, component_1.VantComponent)({
    classes: ['active-class'],
    props: {
        valueKey: String,
        className: String,
        itemHeight: Number,
        visibleItemCount: Number,
        initialOptions: {
            type: Array,
            value: [],
        },
        defaultIndex: {
            type: Number,
            value: 0,
            observer: function (value) {
                this.setIndex(value);
            },
        },
    },
    data: {
        startY: 0,
        offset: 0,
        duration: 0,
        startOffset: 0,
        options: [],
        currentIndex: 0,
    },
    created: function () {
        var _this = this;
        var _a = this.data, defaultIndex = _a.defaultIndex, initialOptions = _a.initialOptions;
        this.set({
            currentIndex: defaultIndex,
            options: initialOptions,
        }).then(function () {
            _this.setIndex(defaultIndex);
        });
    },
    methods: {
        getCount: function () {
            return this.data.options.length;
        },
        onTouchStart: function (event) {
            this.setData({
                startY: event.touches[0].clientY,
                startOffset: this.data.offset,
                duration: 0,
            });
        },
        onTouchMove: function (event) {
            var data = this.data;
            var deltaY = event.touches[0].clientY - data.startY;
            this.setData({
                offset: (0, utils_1.range)(data.startOffset + deltaY, -(this.getCount() * data.itemHeight), data.itemHeight),
            });
        },
        onTouchEnd: function () {
            var data = this.data;
            if (data.offset !== data.startOffset) {
                this.setData({ duration: DEFAULT_DURATION });
                var index = (0, utils_1.range)(Math.round(-data.offset / data.itemHeight), 0, this.getCount() - 1);
                this.setIndex(index, true);
            }
        },
        onClickItem: function (event) {
            var index = event.currentTarget.dataset.index;
            this.setIndex(index, true);
        },
        adjustIndex: function (index) {
            var data = this.data;
            var count = this.getCount();
            index = (0, utils_1.range)(index, 0, count);
            for (var i = index; i < count; i++) {
                if (!this.isDisabled(data.options[i]))
                    return i;
            }
            for (var i = index - 1; i >= 0; i--) {
                if (!this.isDisabled(data.options[i]))
                    return i;
            }
        },
        isDisabled: function (option) {
            return (0, validator_1.isObj)(option) && option.disabled;
        },
        getOptionText: function (option) {
            var data = this.data;
            return (0, validator_1.isObj)(option) && data.valueKey in option
                ? option[data.valueKey]
                : option;
        },
        setIndex: function (index, userAction) {
            var _this = this;
            var data = this.data;
            index = this.adjustIndex(index) || 0;
            var offset = -index * data.itemHeight;
            if (index !== data.currentIndex) {
                return this.set({ offset: offset, currentIndex: index }).then(function () {
                    userAction && _this.$emit('change', index);
                });
            }
            return this.set({ offset: offset });
        },
        setValue: function (value) {
            var options = this.data.options;
            for (var i = 0; i < options.length; i++) {
                if (this.getOptionText(options[i]) === value) {
                    return this.setIndex(i);
                }
            }
            return Promise.resolve();
        },
        getValue: function () {
            var data = this.data;
            return data.options[data.currentIndex];
        },
    },
});
export default global['__wxComponents']['weapp/lib/picker-column/index']
</script>
<style platform="mp-weixin">
@import '../common/index.css';.van-picker-column{color:var(--picker-option-text-color,#000);font-size:var(--picker-option-font-size,16px);overflow:hidden;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,#323233);font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}
</style>