# Input

输入框

案例

import { defineComponent } from "vue";
import { Typography, Input } from "sl-vue2-template";

const { P } = Typography;

export default defineComponent({
  data() {
    return {
      value: "1234567890",
      maskValue: "07915845032",
      number: 0,
      decimal: 0,
      number2: -10,
      password: "",
      email: "",
      card: "",
      payment: "",
      phoneNumber: "",
      telNumber: "",
      price: "",
    };
  },
  render() {
    return (
      <div>
        <P>number</P>
        <Input
          type="number"
          value={this.number}
          handlerChange={(number) => {
            return (this.number = number);
          }}
        />
        <P>number decimal</P>
        <Input
          type="number"
          value={this.decimal}
          decimal
          handlerChange={(number) => {
            return (this.decimal = number);
          }}
        />
        <P>number mask</P>
        <Input
          type="number"
          value={this.number}
          handlerChange={(number) => {
            return (this.number = number);
          }}
          mask="000,000,000"
          maxLength={9}
        />
        <P>password</P>
        <Input
          type="password"
          value={this.password}
          handlerChange={(password) => {
            return (this.password = password);
          }}
        />
        <P>email</P>
        <Input
          type="email"
          value={this.email}
          handlerChange={(email) => {
            return (this.email = email);
          }}
        />
        <P>card</P>
        <Input
          type="card"
          value={this.card}
          handlerChange={(card) => {
            return (this.card = card);
          }}
        />
        <P>payment</P>
        <Input
          type="payment"
          value={this.payment}
          handlerChange={(payment) => {
            return (this.payment = payment);
          }}
        />
        <P>phoneNumber</P>
        <Input
          type="phone-number"
          value={this.phoneNumber}
          handlerChange={(phoneNumber) => {
            return (this.phoneNumber = phoneNumber);
          }}
        />
        <P>telNumber</P>
        <Input
          type="tel-number"
          value={this.telNumber}
          handlerChange={(telNumber) => {
            return (this.telNumber = telNumber);
          }}
        />
        <P>price</P>
        <Input
          type="price"
          value={this.price}
          handlerChange={(price) => {
            return (this.price = price);
          }}
        />
        <P>默认</P>
        <Input
          value={this.value}
          handlerChange={(value) => {
            return (this.value = value);
          }}
        />
        <P>readonly</P>
        <Input
          value={this.value}
          placeholder="readonly"
          handlerChange={(value) => {
            return (this.value = value);
          }}
          readonly
        />
        <P>disabled</P>
        <Input
          value={this.value}
          placeholder="disabled"
          handlerChange={(value) => {
            return (this.value = value);
          }}
          disabled
        />
        <P>placeholder</P>
        <Input
          value={this.value}
          placeholder="placeholder"
          handlerChange={(value) => {
            return (this.value = value);
          }}
        />
        <P>prefix and suffix</P>
        <Input
          value={this.value}
          placeholder="placeholder"
          handlerChange={(value) => {
            return (this.value = value);
          }}
          prefix="￥"
          suffix="RMB"
        />
        <P>icon left</P>
        <Input
          value={this.value}
          placeholder="placeholder"
          handlerChange={(value) => {
            return (this.value = value);
          }}
          icon={{
            name: "Add",
            placement: "left",
          }}
        />
        <P>icon right</P>
        <Input
          value={this.value}
          placeholder="placeholder"
          handlerChange={(value) => {
            return (this.value = value);
          }}
          icon={{
            name: "Arrow Down Bold",
            placement: "right",
          }}
        />
        <P>maxLength</P>
        <Input
          value={this.value}
          handlerChange={(value) => {
            return (this.value = value);
          }}
          maxLength={4}
        />
        <P>number maxLength</P>
        <Input
          value={this.value}
          handlerChange={(value) => {
            return (this.value = value);
          }}
          maxLength={4}
        />
        <P>mask 0000-00000000</P>
        <Input
          value={this.maskValue}
          handlerChange={(maskValue) => {
            return (this.maskValue = maskValue);
          }}
          mask="0791-12345678"
        />
        <P>mask (0000) 000-0000</P>
        <Input
          value={this.value}
          handlerChange={(value) => {
            return (this.value = value);
          }}
          mask="(0000) 000-0000"
          maxLength={10}
        />
        <P>mask 0000 0000 0000 0000</P>
        <Input
          value={this.value}
          handlerChange={(value) => {
            return (this.value = value);
          }}
          mask="0000 0000 0000 0000"
        />
      </div>
    );
  },
});

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220

# 属性

成员	说明	类型	必须	默认值	版本
value	输入框内容	String\|Number	否	--	--
type	类型，不同于原有 type，只用于校验，查看 type 属性说明	"text"\|"password"\|"number"\| "email"\|"card"\|"payment"\| "phone-number"\|"tel-number"\|"price"	否	"text"	--
placeholder	占位符	String	否	--	--
disabled	禁用	Boolean	否	false	--
readonly	只读	Boolean	否	false	--
prefix	前缀	String	否	--	--
suffix	后缀	String	否	--	--
icon	图标	查看 icon 属性	否	--	--
maxLength	最大长度	Number	否	--	--
mask	格式化输入框内容	String	否	--	--
decimal	是否支持小数, 仅当 type 为 number 有效	Boolean	否	false	--
valid	是否启用校验，与 type 联动使用	Boolean	否	true	--
animation	动画效果	Boolean	否	true	--
className	自定义 class 名	String	否	--	--

# 事件

事件名称	说明	回调参数	必须	版本
handlerChange	点击的回调	(arg: string	number) => void	是

# icon 属性

成员	说明	类型	必须	默认值	版本
name	图标名	icon 名	是	--	--
placement	箭头位置	"right" \| "left"	否	"right"	--
size	图标大小	'10' \| '12' \| '14' \| '16' \| '18' \| '20' \| '22' \| '24' \| '28' \| '32' \| '36' \| '40' \| '48' \| '56' \| '64'	否	'14'	--
color	图标颜色	颜色名	否	--	--
className	自定义 class 名	String	否	--	--

# type 属性说明

只有当 type 设定特殊对应属性，并且 valid 为 true 才会触发校验规则，这个校验是实时的，
所以当 input 应用于 form 时，会强制将 valid 为 false,
因为 form 表单的校验会在表单 submit 的时候统一校验

名称	说明	规则	版本
text	默认属性	--	--
password	密码	非空，长度大于等于 6	--
number	只能输入数字，当 decimal 为 true 时，可输入小数	--	--
email	邮箱	非空，邮箱格式	--
card	身份证号	非空，身份证号格式	--
payment	银行卡号，当 mask 没有时，默认 mask="0000 0000 0000 0000 0000"	非空，银行卡号格式	--
phone-number	手机号当 maxLength 没有时，默认 maxLength=11	非空，手机号号格式	--
tel-number	座机号码，需要携带区号当 mask 没有时，默认 mask="0000-00000000" 当 maxLength 没有时，默认 maxLength=12	非空，座机号码格式	--
price	价格，数字或 2 位小数	--	--

← Menu 导航菜单 Textarea 文本区 →