| | |
|---|
| | | /** |
|---|
| | | * CInput - 表单项，文本输入框 |
|---|
| | | * 用于在表单中收集用户的文本输入 |
|---|
| | | * 支持多种输入类型，可以设置占位提示文本，并且支持显示单位标识 |
|---|
| | | * @author Tevin |
|---|
| | | */ |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="c-input" |
|---|
| | | :class="unit?'c-input-unit':''" |
|---|
| | | :class="[unit?'c-input-unit':'', readOnly?'read-only':'']" |
|---|
| | | > |
|---|
| | | <AtInput |
|---|
| | | :name="itemRes.name" |
|---|
| | |
|---|
| | | :required="itemRes.required" |
|---|
| | | :error="itemRes.error" |
|---|
| | | :cursorSpacing="0" |
|---|
| | | :value="itemRes.formData[itemRes.name]" |
|---|
| | | :onChange="evt=>itemRes.onChange(evt)" |
|---|
| | | :cursor="-1" |
|---|
| | | :value="value" |
|---|
| | | :onChange="evt => handleChange(evt)" |
|---|
| | | > |
|---|
| | | <slot v-if="!unit" /> |
|---|
| | | <text |
|---|
| | |
|---|
| | | placeholder: String, |
|---|
| | | // 输入框单位 |
|---|
| | | unit: String, |
|---|
| | | // 只读模式 |
|---|
| | | readOnly: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | value() { |
|---|
| | | return ((this.itemRes.formData[this.itemRes.name] || '') + '').replace( |
|---|
| | | /[\n\r]/g, |
|---|
| | | '', |
|---|
| | | ); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | handleChange(evt) { |
|---|
| | | // 去除首尾空格，小程序中还可以粘贴换行符进来 |
|---|
| | | const changeValue = ((evt || '') + '') |
|---|
| | | .replace(/^\s+|\s+$/g, '') |
|---|
| | | .replace(/[\n\r\t]/g, ''); |
|---|
| | | this.itemRes.onChange(changeValue); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() {}, |
|---|
| | | }; |
|---|
