使用方式

<link rel="stylesheet" href="/components/style/input.css" type="text/css" />
<script defer src="/components/js/input.js" type="text/javascript"></script>

<div class="st_input" st-model="inputModel" change="inputChange">
  <input
    class="st_input_inner"
    type="text"
    placeholder="请输入内容"
  />
</div>

禁用disabled

<div class="st_input">
  <input
    class="st_input_inner"
    type="text"
    placeholder="请输入内容"
    disabled
    size="small"
  />
</div>

尺寸 sizemedium、small、mini

<div class="st_input">
  <input
    class="st_input_inner"
    type="password"
    placeholder="请输入密码"
    size="mini"
  />
</div>

textarea

<div class="st_textarea">
  <textarea
    class="st_textarea_inner"
    placeholder="请输入内容"
    rows="10"
    maxlength="100"
  ></textarea>
</div>

可清空 clearable

<div class="st_input st_input_suffix" type="clearable">
  <input
    class="st_input_inner"
    type="text"
    placeholder="请输入内容"
  />
</div>

复合型输入框

<div class="st_input st_input_group st_input_prepend">
  <div class="st_input_group_prepend">Http://</div>
  <input
    class="st_input_inner"
    type="text"
    placeholder="请输入内容"
  />
</div>
<div class="st_input st_input_group st_input_append">
  <input
    class="st_input_inner"
    type="text"
    placeholder="请输入内容"
  />
  <div class="st_input_group_append">.com</div>
</div>

label 组合输入框

<div class="st_search_label_input">
  <div class="label_text">
    <span>名称</span>
  </div>
  <div class="st_input">
    <input
      class="st_input_inner"
      type="text"
      placeholder="请输入内容"
      size="small"
    />
  </div>
</div>

属性

属性	说明	类型	可选值	默认值
st-model	数据绑定(自定义属性)	string	-	-
change	输入值变化回调方法(自定义属性)	string	-	-
disabled	是否禁用(原生属性)	-	-	-
size	尺寸，仅input支持(自定义属性)	string	medium/small/mini	-
rows	行数，仅textarea支持(原生属性)	number	-	-
maxlength	最大输入长度(原生属性)	number	-	-
clearable	可清空(自定义属性)	string	-	-

‘input’标签支持所有原生属性，属性表格仅展示常用属性，其余属性查看

属性添加位置请查看示例代码