Input 输入框

通过鼠标或键盘输入字符

基础用法

展开查看

<template>
 <div>
    <CInput v-model="value" placeholder="Please input" clearable></CInput>
 </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

可清空的输入框

提供一个清空按钮，允许用户清空输入内容，通过clearable来控制是否展示清空按钮

展开查看

<template>
 <div>
    <CInput v-model="value" placeholder="Please input" clearable></CInput>
 </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

密码输入框

一个可以切换显示隐藏密码的输入框

展开查看

<template>
 <div>
    <CInput v-model="value" placeholder="Please input" show-password />
 </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

尺寸

使用 size 属性改变输入框大小。 除了默认大小外，还有另外两个选项： large, small

展开查看

<template>
 <div>
    <CInput v-model="test" placeholder="Please input" size="large"></CInput>
    <CInput v-model="test" placeholder="Please input"></CInput>
    <CInput v-model="test" placeholder="Please input" size="small"></CInput>
 </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

带图标的输入框

在输入框内添加左侧或右侧图标

注意：当你设置了右侧图标后，就无法再设置清空按钮的出现了

展开查看

<template>
 <div>
    <CInput v-model="value" placeholder="Please input" leftIcon="search"></CInput>
 </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

带按钮的输入框

可以通过插槽在CInput组件内部嵌入按钮，以实现更丰富的交互功能，例如搜索

展开查看

<template>
  <CInput v-model="value1" placeholder="Please input">
    <template #btn>
      <CButton type="primary" leftIcon="m-icon-search">搜索</CButton>
    </template>
  </CInput>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref('')
</script>

禁用状态

展开查看

<template>
<div>
   <CInput disabled />
</div>
</template>

属性名	描述	类型	默认值
placeholder	输入框占位文本	String	-
clearable	是否可清空	Boolean	false
show-password	是否显示密码切换按钮	Boolean	false
size	调整输入框大小	String	default
leftIcon	左侧图标类名	String	-
rightIcon	右侧图标类名	String	-
disabled	是否禁用	Boolean	false