| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import { use } from '../utils';
- import { preventDefault } from '../utils/event';
- import { deepClone } from '../utils/deep-clone';
- import { pickerProps } from './shared';
- import Loading from '../loading';
- import PickerColumn from './PickerColumn';
- var _use = use('picker'),
- sfc = _use[0],
- bem = _use[1],
- t = _use[2];
- export default sfc({
- props: _extends({}, pickerProps, {
- columns: Array,
- defaultIndex: {
- type: Number,
- "default": 0
- },
- valueKey: {
- type: String,
- "default": 'text'
- }
- }),
- data: function data() {
- return {
- children: []
- };
- },
- computed: {
- simple: function simple() {
- return this.columns.length && !this.columns[0].values;
- }
- },
- watch: {
- columns: function columns() {
- this.setColumns();
- }
- },
- methods: {
- setColumns: function setColumns() {
- var _this = this;
- var columns = this.simple ? [{
- values: this.columns
- }] : this.columns;
- columns.forEach(function (column, index) {
- _this.setColumnValues(index, deepClone(column.values));
- });
- },
- emit: function emit(event) {
- if (this.simple) {
- this.$emit(event, this.getColumnValue(0), this.getColumnIndex(0));
- } else {
- this.$emit(event, this.getValues(), this.getIndexes());
- }
- },
- onChange: function onChange(columnIndex) {
- if (this.simple) {
- this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0));
- } else {
- this.$emit('change', this, this.getValues(), columnIndex);
- }
- },
- // get column instance by index
- getColumn: function getColumn(index) {
- return this.children[index];
- },
- // get column value by index
- getColumnValue: function getColumnValue(index) {
- var column = this.getColumn(index);
- return column && column.getValue();
- },
- // set column value by index
- setColumnValue: function setColumnValue(index, value) {
- var column = this.getColumn(index);
- column && column.setValue(value);
- },
- // get column option index by column index
- getColumnIndex: function getColumnIndex(columnIndex) {
- return (this.getColumn(columnIndex) || {}).currentIndex;
- },
- // set column option index by column index
- setColumnIndex: function setColumnIndex(columnIndex, optionIndex) {
- var column = this.getColumn(columnIndex);
- column && column.setIndex(optionIndex);
- },
- // get options of column by index
- getColumnValues: function getColumnValues(index) {
- return (this.children[index] || {}).options;
- },
- // set options of column by index
- setColumnValues: function setColumnValues(index, options) {
- var column = this.children[index];
- if (column && JSON.stringify(column.options) !== JSON.stringify(options)) {
- column.options = options;
- column.setIndex(0);
- }
- },
- // get values of all columns
- getValues: function getValues() {
- return this.children.map(function (child) {
- return child.getValue();
- });
- },
- // set values of all columns
- setValues: function setValues(values) {
- var _this2 = this;
- values.forEach(function (value, index) {
- _this2.setColumnValue(index, value);
- });
- },
- // get indexes of all columns
- getIndexes: function getIndexes() {
- return this.children.map(function (child) {
- return child.currentIndex;
- });
- },
- // set indexes of all columns
- setIndexes: function setIndexes(indexes) {
- var _this3 = this;
- indexes.forEach(function (optionIndex, columnIndex) {
- _this3.setColumnIndex(columnIndex, optionIndex);
- });
- },
- onConfirm: function onConfirm() {
- this.emit('confirm');
- },
- onCancel: function onCancel() {
- this.emit('cancel');
- }
- },
- render: function render(h) {
- var _this4 = this;
- var itemHeight = this.itemHeight;
- var columns = this.simple ? [this.columns] : this.columns;
- var frameStyle = {
- height: itemHeight + "px"
- };
- var columnsStyle = {
- height: itemHeight * this.visibleItemCount + "px"
- };
- var Toolbar = this.showToolbar && h("div", {
- "class": ['van-hairline--top-bottom', bem('toolbar')]
- }, [this.slots() || [h("div", {
- "class": bem('cancel'),
- "on": {
- "click": this.onCancel
- }
- }, [this.cancelButtonText || t('cancel')]), this.slots('title') || this.title && h("div", {
- "class": ['van-ellipsis', bem('title')]
- }, [this.title]), h("div", {
- "class": bem('confirm'),
- "on": {
- "click": this.onConfirm
- }
- }, [this.confirmButtonText || t('confirm')])]]);
- return h("div", {
- "class": bem()
- }, [Toolbar, this.loading ? h("div", {
- "class": bem('loading')
- }, [h(Loading)]) : h(), h("div", {
- "class": bem('columns'),
- "style": columnsStyle,
- "on": {
- "touchmove": preventDefault
- }
- }, [columns.map(function (item, index) {
- return h(PickerColumn, {
- "attrs": {
- "valueKey": _this4.valueKey,
- "className": item.className,
- "itemHeight": _this4.itemHeight,
- "defaultIndex": item.defaultIndex || _this4.defaultIndex,
- "visibleItemCount": _this4.visibleItemCount,
- "initialOptions": _this4.simple ? item : item.values
- },
- "on": {
- "change": function change() {
- _this4.onChange(index);
- }
- }
- });
- }), h("div", {
- "class": ['van-hairline--top-bottom', bem('frame')],
- "style": frameStyle
- })])]);
- }
- });
|