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.

161 lines
3.4 KiB

2 years ago
// 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'
});
}
}
}
});