小鹅通组件

# Input 输入框

通过鼠标或键盘输入字符

# 初始化

单独引入时：在入口js文件处引入

import { Input } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(Input)
1
2
3

# 效果

通过鼠标或键盘输入字符

# 基础用法


<ss-input v-model="input"></ss-input>
1

# 设置type number 输入框


# 设置type textarea 输入框

<ss-input v-model="input1" type="number" placeholder="0"></ss-input>
<ss-input v-model="input2" type="textarea" placeholder="请输入" rows="20"></ss-input>
1
2

# 禁用状态


<ss-input v-model="input1" :disabled="true"></ss-input>
1

# 显示数量


  <ss-input v-model="input2" :maxlength="16" showCount></ss-input>
1

# 带 icon 的输入框



<ss-input v-model="input3" suffixIcon="icon-icon-status__success"></ss-input>
<ss-input v-model="input4" prefixIcon="icon-icon-status__success"></ss-input>
1
2

# 设置maxlength


<ss-input v-model="input4" :maxlength="16"></ss-input>
1

# 设置errorMsg



<ss-input v-model="input6" :errorMsg="errormsg"></ss-input>
1

# 参数

参数 说明 类型 默认值 可选值 支持版本
value 绑定值 String / Number — — -
disabled 禁用 Boolean — true,false -
type 类型 String — text,textarea,number textarea、number 1.3.16及其以上
placeholder 输入框占位文本 String 请输入内容 — -
showCount 显示数量，需配合maxlength使用 String - - -
prefixIcon 输入框头部图标 String — — -
suffixIcon 输入框尾部图标 String — — -
iconColor 图标颜色 String #969799 - 1.3.16及其以上
maxlength 原生属性，设置最大值 Number — — -
errorMsg 错误提示 String — — -
rows rows 输入框行数，只对 type="textarea" 有效 String - - 1.3.16及其以上
autosize 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } boolean / object - false 1.3.16及其以上
resize 控制是否能被用户缩放 String none, both, horizontal, vertical - 1.3.16及其以上
readonly 原生属性，是否只读 boolean —— false 1.3.16及其以上
max 原生属性，设置最大值 - - - 1.3.16及其以上
min 原生属性，设置最小值 - - - 1.3.16及其以上

# 事件

事件名称 说明 回调参数 支持版本
focus 在 Input 获得焦点时触发 (event: Event) -
blur 在 Input 失去焦点时触发 (event: Event) -
input 在 Input 输入时触发 (value: string / number) -
change 在 Input 值改变时触发 (value: string / number) -
keyup 在 键盘回车触发 (value: string / number) 1.3.16及其以上

← Loading 加载 →