文本输入框 (Text)

最基础的输入组件，对应 Element UI 的 el-input。

配置类型

• text

演示 (Demo)

基础输入 (Basic)

Value: Hello DynaForm

属性增强 (Enhanced)

Value:

<el-row :gutter="20" style="margin-top:20px;">
  <el-col :span="12">
    <h4>密码模式 (Password)</h4>
    <DynaForm
      v-model="passVal"
      :config="{ type: 'TEXT', showPassword: true, placeholder: '请输入密码' }"
    />
    <div class="demo-value">Value: </div>
  </el-col>
  <el-col :span="12">
    <h4>文本域 (Textarea)</h4>
    <DynaForm
      v-model="areaVal"
      :config="{ type: 'TEXT', inputType: 'textarea', rows: 3, placeholder: '请输入多行文本' }"
    />
    <div class="demo-value">Value: 第一行
第二行</div>
  </el-col>
</el-row>

<el-row :gutter="20" style="margin-top: 20px;">
  <el-col :span="12">
     <h4>禁用状态 (Disabled)</h4>
     <DynaForm
       v-model="val3"
       :config="config3"
     />
  </el-col>
  <el-col :span="12">
     <h4>字数限制 (Length Limit)</h4>
     <DynaForm
        v-model="val4"
        :config="config4"
     />
     <div class="demo-value">Value: </div>
  </el-col>
</el-row>

示例代码

<!-- 1. 基础用法 -->
<DynaForm
  v-model="username"
  :config="{ type: 'text', label: '用户名' }"
/>

<!-- 2. 可清空 -->
<DynaForm
  v-model="nickname"
  :config="{ type: 'text', label: '昵称', clearable: true }"
/>

<!-- 3. 禁用状态 -->
<DynaForm
  v-model="account"
  :config="{ type: 'text', label: '账号', disabled: true }"
/>

<!-- 4. 字数限制 -->
<DynaForm
  v-model="bio"
  :config="{ 
    type: 'text', 
    label: '简介',
    maxlength: 10,
    showWordLimit: true
  }"
/>

属性列表 (config)

属性名	类型	说明
label	String	标签文本
placeholder	String	占位符
disabled	Boolean	是否禁用
readonly	Boolean	是否只读
clearable	Boolean	是否可清空
maxlength	Number	最大输入长度
showWordLimit	Boolean	是否显示字数统计 (需配合 maxlength)
minLength	Number	最小输入长度 (HTML属性)