| | |
| | | /** |
| | | * 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" |
| | | :cursor="-1" |
| | | :value="value" |
| | | :onChange="evt => hanldeChange(evt)" |
| | | :onChange="evt => handleChange(evt)" |
| | | > |
| | | <slot v-if="!unit" /> |
| | | <text |
| | |
| | | placeholder: String, |
| | | // 输入框单位 |
| | | unit: String, |
| | | // 只读模式 |
| | | readOnly: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | }, |
| | | computed: { |
| | | value() { |
| | | return (itemRes.formData[itemRes.name] || '').replace(/[\n\r]/g, ''); |
| | | return ((this.itemRes.formData[this.itemRes.name] || '') + '').replace( |
| | | /[\n\r]/g, |
| | | '', |
| | | ); |
| | | }, |
| | | }, |
| | | methods: { |
| | | hanldeChange(evt) { |
| | | const changeValue = (evt || '').replace(/[\n\r]/g, ''); |
| | | handleChange(evt) { |
| | | // 去除首尾空格,小程序中还可以粘贴换行符进来 |
| | | const changeValue = ((evt || '') + '') |
| | | .replace(/^\s+|\s+$/g, '') |
| | | .replace(/[\n\r\t]/g, ''); |
| | | this.itemRes.onChange(changeValue); |
| | | }, |
| | | }, |