mc-ui

# 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
Expand Copy

# 禁用状态

<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
Expand Copy

# 带清除按钮

<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
Expand Copy

# 带图标的输入框

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
Expand Copy

# 后缀图标

<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
Expand Copy

# 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
Expand Copy

# Attributes

参数 说明 类型 默认值 可选值
type 输入框类型 String text -
disabled 是否禁用 Boolean false -
clearable 可清除按钮 Boolean false -
prefix 前缀图标用slot方式 - - -
suffix 后缀图标用slot方式 - - -

← 单选框 Radio →