181 lines
4.8 KiB
JavaScript
181 lines
4.8 KiB
JavaScript
// picker/picker.js
|
||
import eventBus from '../core/utils/event-bus.js';
|
||
import validator from '../behaviors/validator';
|
||
import rules from '../behaviors/rules';
|
||
Component({
|
||
/**
|
||
* 组件的属性列表
|
||
*/
|
||
options: {
|
||
multipleSlots: true,
|
||
},
|
||
behaviors: ['wx://form-field', validator, rules],
|
||
externalClasses: [
|
||
'l-class',
|
||
'l-label-class',
|
||
'l-error-text',
|
||
'l-error-text-class',
|
||
'l-picker-class',
|
||
'l-row-class',
|
||
],
|
||
properties: {
|
||
// 选择器的标题，仅安卓可用
|
||
headerText: String,
|
||
// 表单标题（label）的文本
|
||
label: String,
|
||
// 是否隐藏label
|
||
hideLabel: Boolean,
|
||
// 是否自定义label部分
|
||
labelCustom: Boolean,
|
||
// 是否显示下划线
|
||
showRow: {
|
||
type: Boolean,
|
||
value: true,
|
||
},
|
||
// 是否必选
|
||
required: Boolean,
|
||
// 占位文本
|
||
placeholder: {
|
||
type: String,
|
||
value: '请选择',
|
||
},
|
||
range: {
|
||
type: Array,
|
||
},
|
||
// 输入框类型
|
||
mode: {
|
||
type: String,
|
||
value: 'selector',
|
||
options: ['selector', 'multiSelector', 'time', 'date', 'region'],
|
||
},
|
||
rangeKey: {
|
||
type: String,
|
||
value: '',
|
||
},
|
||
rangeValue: {
|
||
type: String,
|
||
value: 'value',
|
||
},
|
||
// 传入的值
|
||
value: {
|
||
type: null,
|
||
optionalTypes: [String, Number],
|
||
value: '',
|
||
},
|
||
// 是否需要冒号
|
||
colon: Boolean,
|
||
// 获取焦点
|
||
focus: Boolean,
|
||
// 是否显示清除按钮
|
||
clear: Boolean,
|
||
showIcon: {
|
||
type: Boolean,
|
||
value: true,
|
||
},
|
||
// 表单项的宽度，单位rpx
|
||
width: {
|
||
type: Number,
|
||
value: null,
|
||
},
|
||
// 表单项标题部分的宽度，单位rpx
|
||
labelWidth: {
|
||
type: Number,
|
||
value: 200,
|
||
},
|
||
// label标题的显示位置 left top right
|
||
labelLayout: {
|
||
type: String,
|
||
value: 'left',
|
||
options: ['left', 'right'],
|
||
},
|
||
// 是否禁用
|
||
disabled: Boolean,
|
||
// 占位文字的样式
|
||
placeholderStyle: String,
|
||
},
|
||
/**
|
||
* 组件的初始数据
|
||
*/
|
||
data: {},
|
||
attached() {
|
||
this.valToIndex();
|
||
},
|
||
pageLifetimes: {
|
||
show() {
|
||
this.valToIndex();
|
||
},
|
||
},
|
||
observers: {
|
||
value: function (value) {
|
||
if (value) {
|
||
this.valToIndex();
|
||
}
|
||
},
|
||
},
|
||
/**
|
||
* 组件的方法列表
|
||
*/
|
||
methods: {
|
||
valToIndex() {
|
||
const { value = '', range, rangeKey, rangeValue, mode } = this.data;
|
||
if (mode === 'date' || mode === 'time') {
|
||
return;
|
||
}
|
||
let currentIndex;
|
||
if (rangeKey) {
|
||
// 对象
|
||
currentIndex =
|
||
range &&
|
||
range.findIndex((ele) => ele[rangeValue] === value);
|
||
} else {
|
||
//普通数组
|
||
currentIndex = range && range.findIndex((ele) => ele === value);
|
||
}
|
||
if (!(currentIndex >= 0)) {
|
||
currentIndex = '';
|
||
}
|
||
this.setData({
|
||
currentIndex,
|
||
});
|
||
},
|
||
handlePickerChange(event) {
|
||
const { range, rangeKey, rangeValue, mode } = this.data;
|
||
const { detail = {} } = event;
|
||
let value;
|
||
if (!(mode === 'date' || mode === 'time')) {
|
||
const currentIndex = detail.value;
|
||
let data = range[currentIndex];
|
||
if (rangeKey) {
|
||
value = data && data[rangeValue];
|
||
detail.value = value;
|
||
} else {
|
||
value = data;
|
||
detail.value = value;
|
||
}
|
||
this.setData({
|
||
currentIndex,
|
||
});
|
||
}
|
||
// this.validatorData({
|
||
// [this.data.name]: event.detail.value,
|
||
// });
|
||
eventBus.emit(`lin-form-change-${this.id}`, this.id);
|
||
this.triggerEvent('linchange', event.detail);
|
||
},
|
||
handlePickerCancel(event) {
|
||
const { detail = {} } = event;
|
||
const { value = '' } = detail;
|
||
this.triggerEvent('lincancel', event.detail);
|
||
},
|
||
onClearTap(event) {
|
||
this.setData({
|
||
value: '',
|
||
});
|
||
this.triggerEvent('linclear', event.detail);
|
||
},
|
||
getValues() {
|
||
return this.data.value;
|
||
},
|
||
},
|
||
});
|