123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- <template>
- <view>
- <sjs src="./index.sjs" module="getOptionText" />
- <view
- class="van-picker-column custom-class"
- :style="'height: ' + itemHeight * visibleItemCount + 'px'"
- @touchstart="onTouchStart"
- @touchmove.stop.prevent="onTouchMove"
- @touchend="onTouchEnd"
- @touchcancel="onTouchEnd"
- >
- <view
- :style="
- 'transition: transform ' +
- duration +
- 'ms; line-height: ' +
- itemHeight +
- 'px; transform: translate3d(0, ' +
- (offset + (itemHeight * (visibleItemCount - 1)) / 2) +
- 'px, 0)'
- "
- >
- <view
- :wx:for="options"
- wx:for-item="option"
- wx:key="index"
- :data-index="index"
- :style="'height: ' + itemHeight + 'px'"
- :class="
- 'van-ellipsis van-picker-column__item ' +
- (option && option.disabled ? 'van-picker-column__item--disabled' : '') +
- ' ' +
- (index === currentIndex ? 'van-picker-column__item--selected active-class' : '')
- "
- @tap="onClickItem"
- >
- {{ getOptionText(option, valueKey) }}
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { VantComponent } from '../common/component';
- import { isObj, range } from '../common/utils';
- const DEFAULT_DURATION = 200;
- export default {
- data() {
- return {
- startY: 0,
- offset: 0,
- duration: 0,
- startOffset: 0,
- options: [],
- currentIndex: 0,
- option: {
- disabled: ''
- }
- };
- },
- classes: ['active-class'],
- props: {
- valueKey: String,
- className: String,
- itemHeight: Number,
- visibleItemCount: Number,
- initialOptions: {
- type: Array,
- default: () => []
- },
- defaultIndex: {
- type: Number,
- default: 0
- }
- },
- created() {
- const { defaultIndex, initialOptions } = this;
- this.set({
- currentIndex: defaultIndex,
- options: initialOptions
- }).then(() => {
- this.setIndex(defaultIndex);
- });
- },
- watch: {
- defaultIndex: function (value) {
- this.setIndex(value);
- }
- },
- methods: {
- getCount() {
- return this.options.length;
- },
- onTouchStart(event) {
- this.setData({
- startY: event.touches[0].clientY,
- startOffset: this.offset,
- duration: 0
- });
- },
- onTouchMove(event) {
- const { data } = this;
- const deltaY = event.touches[0].clientY - data.startY;
- this.setData({
- offset: range(data.startOffset + deltaY, -(this.getCount() * data.itemHeight), data.itemHeight)
- });
- },
- onTouchEnd() {
- const { data } = this;
- if (data.offset !== data.startOffset) {
- this.setData({
- duration: DEFAULT_DURATION
- });
- const index = range(Math.round(-data.offset / data.itemHeight), 0, this.getCount() - 1);
- this.setIndex(index, true);
- }
- },
- onClickItem(event) {
- const { index } = event.currentTarget.dataset;
- this.setIndex(index, true);
- },
- adjustIndex(index) {
- const { data } = this;
- const count = this.getCount();
- index = range(index, 0, count);
- for (let i = index; i < count; i++) {
- if (!this.isDisabled(data.options[i])) {
- return i;
- }
- }
- for (let i = index - 1; i >= 0; i--) {
- if (!this.isDisabled(data.options[i])) {
- return i;
- }
- }
- },
- isDisabled(option) {
- return isObj(option) && option.disabled;
- },
- getOptionText(option) {
- const { data } = this;
- return isObj(option) && data.valueKey in option ? option[data.valueKey] : option;
- },
- setIndex(index, userAction) {
- const { data } = this;
- index = this.adjustIndex(index) || 0;
- const offset = -index * data.itemHeight;
- if (index !== data.currentIndex) {
- return this.set({
- offset,
- currentIndex: index
- }).then(() => {
- if (userAction) {
- this.$emit('change', index);
- }
- });
- }
- return this.set({
- offset
- });
- },
- setValue(value) {
- const { options } = this;
- for (let i = 0; i < options.length; i++) {
- if (this.getOptionText(options[i]) === value) {
- return this.setIndex(i);
- }
- }
- return Promise.resolve();
- },
- getValue() {
- const { data } = this;
- return data.options[data.currentIndex];
- }
- }
- };
- </script>
- <style>
- @import '../common/index.ttss';
- .van-picker-column {
- overflow: hidden;
- text-align: center;
- color: #000;
- color: var(--picker-option-text-color, #000);
- font-size: 16px;
- font-size: var(--picker-option-font-size, 16px);
- }
- .van-picker-column__item {
- padding: 0 5px;
- }
- .van-picker-column__item--selected {
- font-weight: 500;
- font-weight: var(--font-weight-bold, 500);
- color: #323233;
- color: var(--picker-option-selected-text-color, #323233);
- }
- .van-picker-column__item--disabled {
- opacity: 0.3;
- opacity: var(--picker-option-disabled-opacity, 0.3);
- }
- </style>
|