|
|
// input/input.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-input-class','l-row-class'],
|
|
|
properties: {
|
|
|
// 表单标题(label)的文本
|
|
|
label: String,
|
|
|
// 是否隐藏label
|
|
|
hideLabel: Boolean,
|
|
|
// 是否自定义label部分
|
|
|
labelCustom: Boolean,
|
|
|
// 是否显示下划线
|
|
|
showRow: {
|
|
|
type: Boolean,
|
|
|
value: true
|
|
|
},
|
|
|
// 是否必选
|
|
|
required: Boolean,
|
|
|
// 占位文本
|
|
|
placeholder: String,
|
|
|
// 输入框类型
|
|
|
type: {
|
|
|
type: String,
|
|
|
value: 'text',
|
|
|
options: ['text', 'idcard', 'digit', 'password', 'number']
|
|
|
},
|
|
|
// 输入框的值
|
|
|
value: String,
|
|
|
// 是否需要冒号
|
|
|
colon: Boolean,
|
|
|
// 获取焦点
|
|
|
focus: Boolean,
|
|
|
// 是否显示清除按钮
|
|
|
clear: Boolean,
|
|
|
// 最大输入长度
|
|
|
maxlength: {
|
|
|
type: Number,
|
|
|
value: 140
|
|
|
},
|
|
|
// 表单项的宽度,单位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,
|
|
|
// 是否显示显隐密码图标
|
|
|
showEye: {
|
|
|
type: Boolean,
|
|
|
value: false
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 组件的初始数据
|
|
|
*/
|
|
|
data: {},
|
|
|
attached() {
|
|
|
// this.initRules();
|
|
|
},
|
|
|
/**
|
|
|
* 组件的方法列表
|
|
|
*/
|
|
|
methods: {
|
|
|
|
|
|
handleInputChange(event) {
|
|
|
const {
|
|
|
detail = {}
|
|
|
} = event;
|
|
|
const {
|
|
|
value = ''
|
|
|
} = detail;
|
|
|
|
|
|
this.setData({
|
|
|
value
|
|
|
});
|
|
|
eventBus.emit(`lin-form-change-${this.id}`, this.id);
|
|
|
this.triggerEvent('lininput', event.detail);
|
|
|
},
|
|
|
|
|
|
handleInputFocus(event) {
|
|
|
this.triggerEvent('linfocus', event.detail);
|
|
|
},
|
|
|
|
|
|
handleInputBlur(event) {
|
|
|
this.validatorData({
|
|
|
[this.data.name]: event.detail.value
|
|
|
});
|
|
|
eventBus.emit(`lin-form-blur-${this.id}`, this.id);
|
|
|
this.triggerEvent('linblur', event.detail);
|
|
|
},
|
|
|
handleInputConfirm(event) {
|
|
|
const {
|
|
|
detail = {}
|
|
|
} = event;
|
|
|
const {
|
|
|
value = ''
|
|
|
} = detail;
|
|
|
|
|
|
this.setData({
|
|
|
value
|
|
|
});
|
|
|
|
|
|
this.triggerEvent('linconfirm', event.detail);
|
|
|
},
|
|
|
onClearTap(event) {
|
|
|
this.setData({
|
|
|
value: ''
|
|
|
});
|
|
|
this.triggerEvent('linclear', event.detail);
|
|
|
},
|
|
|
getValues() {
|
|
|
return this.data.value;
|
|
|
},
|
|
|
reset() {
|
|
|
this.setData({
|
|
|
value: ''
|
|
|
});
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 监听:点击输入框右侧显隐密码图标
|
|
|
*/
|
|
|
onTapEyeIcon() {
|
|
|
const type = this.data.type;
|
|
|
if (type === 'text') {
|
|
|
this.setData({
|
|
|
type: 'password'
|
|
|
});
|
|
|
} else if (type === 'password') {
|
|
|
this.setData({
|
|
|
type: 'text'
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|