输入框 Input
闵超 2020-12-29
# input 输入框
通过鼠标或键盘输入字符
# 基础用法
<template>
<mc-input v-model="input" placeholder="请输入内容"></mc-input>
</template>
<script>
export default {
data() {
return {
input: "",
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
显示代码 复制代码 复制代码
# 禁用状态
<template>
<mc-input
v-model="input1"
:disabled="true"
placeholder="该输入框不能输入内容"
></mc-input>
</template>
<script>
export default {
data() {
return {
input1: "",
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
显示代码 复制代码 复制代码
# 带清除按钮
<template>
<mc-input
v-model="input2"
:clearable="true"
placeholder="该输入框内容可一键清除"
></mc-input>
</template>
<script>
export default {
data() {
return {
input2: "",
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
显示代码 复制代码 复制代码
# 带图标的输入框
slot 方式引入的优点，自定义内容更加灵活
# 前缀图标
<template>
<mc-input v-model="input3" placeholder="前缀图标">
<mc-icon
slot="prefix"
:icon="'search'"
:color="'#c0c4cc'"
:size="'20px'"
></mc-icon>
</mc-input>
</template>
<script>
export default {
data() {
return {
input3: "",
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
显示代码 复制代码 复制代码
# 后缀图标
<template>
<mc-input
v-model="input4"
type="text"
autocomplete="off"
placeholder="后缀图标"
>
<mc-icon
slot="suffix"
:icon="'coordinates'"
class="mc-input_icon"
:color="'#c0c4cc'"
:size="'20px'"
></mc-icon>
</mc-input>
</template>
<script>
export default {
data() {
return {
input4: "",
};
},
};
</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
显示代码 复制代码 复制代码
# textArea 输入框
通过鼠标或键盘输入多行内容
# 基础用法
<template>
<mc-input
v-model="input5"
type="textarea"
placeholder="请输入内容"
></mc-input>
</template>
<script>
export default {
data() {
return {
input5: "",
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
显示代码 复制代码 复制代码
# Attributes
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| type | 输入框类型 | String | text | - |
| disabled | 是否禁用 | Boolean | false | - |
| clearable | 可清除按钮 | Boolean | false | - |
| prefix | 前缀图标用slot方式 | - | - | - |
| suffix | 后缀图标用slot方式 | - | - | - |