Files
danyang-match/miniapp/components/textarea/index.js
T

46 lines
1.3 KiB
JavaScript

/**
* Textarea 多行输入(规范 §18, §35:自我介绍 20~500 字)
*
* 内置字数计数 + 字数下限/上限提示 + 错误态。
* 用法:
* <ui-textarea label="自我介绍" value="{{intro}}" minlength="20" maxlength="500"
* placeholder="简单介绍一下你自己…" error="{{errors.intro}}"
* bind:input="onIntroInput" />
*/
Component({
options: { addGlobalClass: true },
properties: {
label: { type: String, value: '' },
placeholder: { type: String, value: '' },
value: { type: String, value: '' },
minlength: { type: Number, value: 0 },
maxlength: { type: Number, value: 500 },
showCount: { type: Boolean, value: true },
error: { type: String, value: '' },
disabled: { type: Boolean, value: false },
autoHeight: { type: Boolean, value: true },
rows: { type: Number, value: 3 },
},
data: {
currentLen: 0,
},
observers: {
value(val) {
this.setData({ currentLen: (val || '').length });
},
},
methods: {
onInput(e) {
const val = e.detail.value;
this.setData({ currentLen: (val || '').length });
this.triggerEvent('input', { value: val });
},
onFocus(e) {
this.triggerEvent('focus', e.detail);
},
onBlur(e) {
this.triggerEvent('blur', { value: e.detail.value });
},
},
});