44 lines
1.6 KiB
JavaScript
44 lines
1.6 KiB
JavaScript
|
/**
|
||
|
|
* Input 输入框（规范 §18-19 表单）
|
||
|
|
*
|
||
|
|
* 支持 label、错误提示、字数计数（maxLength 触发）、清除按钮。
|
||
|
|
* 用法：
|
||
|
|
* <ui-input label="昵称" placeholder="请输入昵称" value="{{name}}"
|
||
|
|
* maxlength="20" error="{{errors.name}}" bind:input="onInputName" />
|
||
|
|
*/
|
||
|
|
Component({
|
||
|
|
options: { addGlobalClass: true },
|
||
|
|
properties: {
|
||
|
|
label: { type: String, value: '' },
|
||
|
|
placeholder: { type: String, value: '' },
|
||
|
|
value: { type: String, value: '' },
|
||
|
|
type: { type: String, value: 'text' }, // text|number|idcard|digit|nickname
|
||
|
|
maxlength: { type: Number, value: 140 }, // -1 表示不限
|
||
|
|
showCount: { type: Boolean, value: false }, // 是否显示字数
|
||
|
|
clearable: { type: Boolean, value: true }, // 是否显示清除按钮
|
||
|
|
error: { type: String, value: '' }, // 错误文案，非空时显示错误态
|
||
|
|
disabled: { type: Boolean, value: false },
|
||
|
|
password: { type: Boolean, value: false },
|
||
|
|
confirmType: { type: String, value: 'done' }, // send|search|next|go|done
|
||
|
|
inputAlign: { type: String, value: 'left' }, // left|right
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onInput(e) {
|
||
|
|
this.triggerEvent('input', { value: e.detail.value });
|
||
|
|
},
|
||
|
|
onFocus(e) {
|
||
|
|
this.triggerEvent('focus', e.detail);
|
||
|
|
},
|
||
|
|
onBlur(e) {
|
||
|
|
this.triggerEvent('blur', { value: e.detail.value });
|
||
|
|
},
|
||
|
|
onConfirm(e) {
|
||
|
|
this.triggerEvent('confirm', { value: e.detail.value });
|
||
|
|
},
|
||
|
|
onClear() {
|
||
|
|
this.triggerEvent('input', { value: '' });
|
||
|
|
this.triggerEvent('clear', {});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|