1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| /**
| * CInput - 表单项，文本输入框
| * @author Tevin
| */
|
| <template>
| <view
| class="c-input"
| :class="[unit?'c-input-unit':'', readOnly?'read-only':'']"
| >
| <AtInput
| :name="itemRes.name"
| :title="itemRes.label"
| :type="type"
| :placeholder="placeholder"
| :required="itemRes.required"
| :error="itemRes.error"
| :cursorSpacing="0"
| :value="value"
| :onChange="evt => handleChange(evt)"
| >
| <slot v-if="!unit" />
| <text
| class="c-input-unit-text"
| v-if="unit"
| >{{unit}}</text>
| </AtInput>
| </view>
| </template>
|
| <script>
| import { AtInput } from 'taro-ui-vue';
| import './cInput.scss';
|
| export default {
| name: 'CInput',
| components: {
| AtInput,
| },
| props: {
| // 表单数据资源（表单组件内部机制专用）
| itemRes: Object,
| // 输入框类型，text、number、password、phone、idcard、digit
| type: String,
| // 占位提示
| 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() {},
| };
| </script>
|
|
