Jst UI

# input输入框

注意

通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。

不支持 v-model 修饰符。

# 基础用法

  <j-input v-model="input"  placeholder="请输入内容" />
  <script>
    export default {
      data() {
        return {
          input: ''
        }
      }
    }
  </script>
显示代码 复制代码

# 尺寸

宽度
高度

可通过 width-size 传入数值设置输入框的宽度，此外还提供了large和small两种类名设置输入框高度。

<span>宽度</span>
<div class="demo-size">
  <j-input
    :width-size="1"
    placeholder="请输入内容"
    v-model="input1">
  </j-input>
  <j-input
    :width-size="2"
    placeholder="请输入内容"
    v-model="input2">
  </j-input>
  <j-input
    :width-size="3"
    placeholder="请输入内容"
    v-model="input3">
  </j-input>
  <j-input
    :width-size="4"
    placeholder="请输入内容"
    v-model="input4">
  </j-input>
</div>
<div class="demo-size">
  <j-input
    :width-size="3"
    placeholder="请输入内容"
    v-model="input3">
  </j-input>
  <j-input
    :width-size="1"
    placeholder="请输入内容"
    v-model="input1">
  </j-input>
  <j-input
    :width-size="1"
    placeholder="请输入内容"
    v-model="input1">
  </j-input>
  <j-input
    :width-size="1"
    placeholder="请输入内容"
    v-model="input1">
  </j-input>
  <j-input
    :width-size="2"
    placeholder="请输入内容"
    v-model="input2">
  </j-input>
  <j-input
    :width-size="2"
    placeholder="请输入内容"
    v-model="input2">
  </j-input>
</div>
<span>高度</span>
<div class="demo-size">
  <j-input
    class="large" 
    placeholder="请输入内容"
    v-model="input3">
  </j-input>
  
  <j-input 
    placeholder="请输入内容"
    v-model="input3">
  </j-input>
  
  <j-input
    class="small" 
    placeholder="请输入内容"
    v-model="input3">
  </j-input>
</div>
<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: ''
    }
  }
}
</script>
<style>
  .demo-size{
    display:flex;
    margin-bottom:10px;
  }
</style>
显示代码 复制代码

# 禁用状态

通过 disabled 属性指定是否禁用 input 组件

<j-input
  placeholder="请输入内容"
  v-model="input"
  disabled>
</j-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>
显示代码 复制代码

# 可清空

使用clearable属性即可得到一个可清空的输入框

<j-input
  placeholder="请输入内容"
  v-model="input"
  clearable>
</j-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>
显示代码 复制代码

# 密码框

使用show-password属性即可得到一个可切换显示隐藏的密码框

<j-input placeholder="请输入密码" v-model="input" show-password clearable></j-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>
显示代码 复制代码

# 带 icon 的输入框

带有图标标记输入类型

属性方式：
slot 方式：

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

<div class="demo-icon">
  属性方式：
  <j-input
    placeholder="请选择日期"
    suffix-icon="icon-calendar"
    v-model="input1">
  </j-input>
  <j-input
    placeholder="请输入内容"
    prefix-icon="icon-search"
    v-model="input2">
  </j-input>
</div>
<div class="demo-icon">
  slot 方式：
  <j-input
    placeholder="请选择日期"
    v-model="input3">
    <i slot="suffix" class="j-icon icon-calendar"></i>
  </j-input>
  <j-input
    placeholder="请输入内容"
    v-model="input4">
    <i slot="prefix" class="j-icon icon-search"></i>
  </j-input>
</div>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: ''
    }
  }
}
</script>
<style>
  .demo-icon{
    margin-bottom:10px;
  }
</style>
显示代码 复制代码

# 复合型输入框

可前置元素，一般为标签或按钮

  <j-input v-model="input"  placeholder="请输入内容">
    <j-multi-select
      slot="prepend"
      v-model="multiSelectValue"
      style="width:100px"
    >
      <j-option value="shoppe" />
      <j-option value="tiktok1">tiktok1</j-option>
      <j-option value="tiktok2.1" label="tiktok2" />
      <j-option value="tiktok3.1">tiktok3</j-option>
    </j-multi-select>
  </j-input>
  {{multiSelectValue}}
  <script>
    export default {
      data() {
        return {
          input: '',
          multiSelectValue:''
        }
      }
    }
  </script>
显示代码 复制代码

# 文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

文本域高度可通过 rows 属性控制

<j-input
  type="textarea"
  rows="5"
  style="width:420px;"
  placeholder="请输入内容"
  v-model="textarea">
</j-input>

<script>
export default {
  data() {
    return {
      textarea: ''
    }
  }
}
</script>
显示代码 复制代码

# 输入长度限制

0/10
0/30

maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。

<j-input
  type="text"
  placeholder="请输入内容"
  v-model="text"
  maxlength="10"
  show-word-limit
>
</j-input>
<div style="margin: 20px 0;"></div>
<j-input
  type="textarea"
  placeholder="请输入内容"
  v-model="textarea"
  rows="5"
  maxlength="30"
  :width-size="6"
  show-word-limit
>
</j-input>

<script>
export default {
  data() {
    return {
      text: '',
      textarea: ''
    }
  }
}
</script>
显示代码 复制代码

# Input Attributes

参数 说明 类型 可选值 默认值
type 类型 string text，textarea 和其他 原生 input 的 type 值 (opens new window) text
value / v-model 绑定值 string / number — —
maxlength 原生属性，最大输入长度 number — —
minlength 原生属性，最小输入长度 number — —
show-word-limit 是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效 boolean — false
placeholder 输入框占位文本 string — —
clearable 是否可清空 boolean — false
show-password 是否显示切换密码图标 boolean — false
disabled 禁用 boolean — false
width-size 输入框尺寸，只在 type!="textarea" 时有效 number 高度可添加类名large和small控制 —
prefix-icon 输入框头部图标 string — —
suffix-icon 输入框尾部图标 string — —
rows 输入框行数，只对 type="textarea" 有效 number — 2
autocomplete 原生属性，自动补全 string on, off off
name 原生属性 string — —
readonly 原生属性，是否只读 boolean — false
max 原生属性，设置最大值 — — —
min 原生属性，设置最小值 — — —
step 原生属性，设置输入字段的合法数字间隔 — — —
resize 控制是否能被用户缩放 string none, both, horizontal, vertical —
autofocus 原生属性，自动获取焦点 boolean true, false false
form 原生属性 string — —
tabindex 输入框的tabindex string — —

# Input Slots

name 说明
prefix 输入框头部内容，只对 type="text" 有效
suffix 输入框尾部内容，只对 type="text" 有效

# Input Events

事件名称 说明 回调参数
blur 在 Input 失去焦点时触发 (event: Event)
focus 在 Input 获得焦点时触发 (event: Event)
change 仅在输入框失去焦点或用户按下回车时触发 (value: string | number)
input 在 Input 值改变时触发 (value: string | number)
clear 在点击由 clearable 属性生成的清空按钮时触发 —
other 等其他原生事件 —

# Input Methods

方法名 说明 参数
focus 使 input 获取焦点 —
blur 使 input 失去焦点 —
select 选中 input 中的文字 —

← Select 选择器 →