You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							145 lines
						
					
					
						
							4.1 KiB
						
					
					
				
			
		
		
		
			
			
			
				
					
				
				
					
				
			
		
		
	
	
							145 lines
						
					
					
						
							4.1 KiB
						
					
					
				
								import { VantComponent } from '../common/component';
							 | 
						|
								import { pickerProps } from './shared';
							 | 
						|
								VantComponent({
							 | 
						|
								  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.selectAllComponents('.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) {
							 | 
						|
								      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,
							 | 
						|
								        });
							 | 
						|
								      }
							 | 
						|
								    },
							 | 
						|
								    // get column instance by index
							 | 
						|
								    getColumn(index) {
							 | 
						|
								      return this.children[index];
							 | 
						|
								    },
							 | 
						|
								    // get column value by index
							 | 
						|
								    getColumnValue(index) {
							 | 
						|
								      const column = this.getColumn(index);
							 | 
						|
								      return column && column.getValue();
							 | 
						|
								    },
							 | 
						|
								    // set column value by index
							 | 
						|
								    setColumnValue(index, value) {
							 | 
						|
								      const column = this.getColumn(index);
							 | 
						|
								      if (column == null) {
							 | 
						|
								        return Promise.reject(new Error('setColumnValue: 对应列不存在'));
							 | 
						|
								      }
							 | 
						|
								      return column.setValue(value);
							 | 
						|
								    },
							 | 
						|
								    // get column option index by column index
							 | 
						|
								    getColumnIndex(columnIndex) {
							 | 
						|
								      return (this.getColumn(columnIndex) || {}).data.currentIndex;
							 | 
						|
								    },
							 | 
						|
								    // set column option index by column index
							 | 
						|
								    setColumnIndex(columnIndex, optionIndex) {
							 | 
						|
								      const column = this.getColumn(columnIndex);
							 | 
						|
								      if (column == null) {
							 | 
						|
								        return Promise.reject(new Error('setColumnIndex: 对应列不存在'));
							 | 
						|
								      }
							 | 
						|
								      return column.setIndex(optionIndex);
							 | 
						|
								    },
							 | 
						|
								    // get options of column by index
							 | 
						|
								    getColumnValues(index) {
							 | 
						|
								      return (this.children[index] || {}).data.options;
							 | 
						|
								    },
							 | 
						|
								    // set options of column by index
							 | 
						|
								    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);
							 | 
						|
								        }
							 | 
						|
								      });
							 | 
						|
								    },
							 | 
						|
								    // get values of all columns
							 | 
						|
								    getValues() {
							 | 
						|
								      return this.children.map((child) => child.getValue());
							 | 
						|
								    },
							 | 
						|
								    // set values of all columns
							 | 
						|
								    setValues(values) {
							 | 
						|
								      const stack = values.map((value, index) =>
							 | 
						|
								        this.setColumnValue(index, value)
							 | 
						|
								      );
							 | 
						|
								      return Promise.all(stack);
							 | 
						|
								    },
							 | 
						|
								    // get indexes of all columns
							 | 
						|
								    getIndexes() {
							 | 
						|
								      return this.children.map((child) => child.data.currentIndex);
							 | 
						|
								    },
							 | 
						|
								    // set indexes of all columns
							 | 
						|
								    setIndexes(indexes) {
							 | 
						|
								      const stack = indexes.map((optionIndex, columnIndex) =>
							 | 
						|
								        this.setColumnIndex(columnIndex, optionIndex)
							 | 
						|
								      );
							 | 
						|
								      return Promise.all(stack);
							 | 
						|
								    },
							 | 
						|
								  },
							 | 
						|
								});
							 |