# 输入框组件
# 使用方法
# 默认输入框
点击查看代码
<VueInput placeholder="默认样式"
labelName="默认输入框：">
</VueInput>
<VueInput :readonly="true"
placeholder="只读状态"
labelName="默认输入框：">
</VueInput>
<VueInput placeholder="禁用状态"
:disabled="true"
labelName="默认输入框：">
</VueInput>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 输入框错误提示
点击查看代码
<VueInput placeholder="Error Enable"
error="姓名不能少于2个字">
</VueInput>
<VueInput placeholder="Error Readonly"
:readonly="true"
value="Error Readonly"
error="姓名不能少于2个字">
</VueInput>
<VueInput placeholder="Error Disabled"
:disabled="true"
error="姓名不能少于2个字">
</VueInput>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 输入框绑定v-model
点击查看代码
<template>
<div class="input">
<VueInput placeholder="Enable"
v-model="message"
:labelName="`v-model模拟数据双向绑定 ${message}：`">
</VueInput>
<VueButton @click="message += 1">+1</VueButton>
<span>{{ message }}</span>
</div>
</template>
<script>
import VueInput from '@/components/input/VueInput.vue'
import VueButton from '@/components/button/VueButton.vue'
export default {
components: {VueInput, VueButton},
data() {
return {
message: ''
}
}
}
</script>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 属性列表
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| labelName | 输入框标题 | string | - | "" |
| placeholder | 可替换内容 | string | - | "" |
| value | 输入框内容 | string | - | "" |
| readonly | 是否只读 | boolean | true/false | false |
| disabled | 是否禁用 | boolean | true/false | false |
| error | 错误状态提示文字 | string | - | "" |
| v-model | 绑定输入信息 | string | - | - |