CInput 文本输入框组件

功能说明

CInput 是一个基础的文本输入框组件，用于在表单中收集用户的文本输入。组件支持多种输入类型，可以设置占位提示文本，并且支持显示单位标识。

引用方式

import { CInput } from '@components/forms/input';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• type (String，可选)：输入框类型
• text：文本输入
• number：数字输入
• password：密码输入
• phone：手机号输入
• idcard：身份证号输入
• digit：带小数点的数字输入
• placeholder (String，可选)：输入框占位提示文本
• unit (String，可选)：输入框单位，设置后会在输入框右侧显示单位文本
• readOnly (Boolean，可选)：只读模式，默认为 false

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="username" label="用户名">
      <CInput type="text" placeholder="请输入用户名" />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CInput } from '@components/forms/input';

export default {
  components: {
    CForm,
    CFormItem,
    CInput
  },
  data() {
    return {
      form: {
        username: ''
      }
    };
  }
};
</script>

带单位的输入框

<CFormItem name="weight" label="重量">
  <CInput type="digit" placeholder="请输入重量" unit="kg" />
</CFormItem>

只读模式

<CFormItem name="id" label="ID">
  <CInput type="text" readOnly />
</CFormItem>

注意事项

1. CInput 组件通常需要配合 CForm 和 CFormItem 组件一起使用
2. 组件会自动处理输入值，去除首尾空格和换行符
3. 当设置 unit 属性时，会在输入框右侧显示单位文本
4. 在只读模式下，输入框将不可编辑