FS-UI v0.1.33

Input 输入框

使用指南

import { Input } from 'fs-ui'

export default {
  components: {
    fsInput: Input
  }
}
1
2
3
4
5
6
7

代码演示

  • 调用数字键盘
<fs-group title="调起数字键盘" noPaddingContent>
  <fs-input v-model="val11" placeholder="请输入值" type="fsNumber"></fs-input>
</fs-group>
1
2
3
  • 基础
<fs-input placeholder="请输入" align="left" clearable :error="error" :on-error-click="onErrorClick" @on-input-change="onInputChange"></fs-input>
<fs-input label="光标在左" placeholder="请输入" align="left" clearable></fs-input>
<fs-input label="光标在右" placeholder="请输入" clearable></fs-input>
1
2
3
  • 只读/禁用
<fs-input label="只读" placeholder="请输入" align="left" readonly></fs-input>
<fs-input label="禁用" placeholder="请输入" align="left" disabled></fs-input>
1
2
  • 搜索
<fs-input v-model="val1" placeholder="请输入名称" align="left" type="search"></fs-input>
1
  • 银行卡
<fs-input v-model="val2" label="银行卡" placeholder="请输入银行卡" align="left" type="bankCard"></fs-input>
1
  • 手机号
<fs-input v-model="val3" label="手机号" placeholder="请输入手机号" align="left" type="phone"></fs-input>
1
  • 密码
<fs-input v-model="val4" label="密码" type="password" placeholder="请输入密码"></fs-input>
<fs-input v-model="val5" type="password" :viewPassword="true" placeholder="请输入密码"></fs-input>
1
2
  • 自定义标签
<fs-input v-model="val6" label="姓名" prefix-icon="user" clearable placeholder="请输入姓名"></fs-input>
<fs-input v-model="val7" label="用户名" placeholder="请输入用户名">
  <span class="fs-input-prefix" slot="prefix">
    <i class="text-red">*</i>
  </span>
</fs-input>
1
2
3
4
5
6
  • 长标签
<fs-input v-model="val8" label="最长可六个字可" label-length="6" placeholder="请输入" align="left" />
1
  • 自定义右侧内容
<fs-input v-model="val9" label="验证码" label-length="4" placeholder="请输入验证码" align="left" type="number">
  <template slot="suffix">
    <fs-button @click="handleClick">短信验证</fs-button>
  </template>
</fs-input>
1
2
3
4
5
  • 文本框
<fs-input v-model="val6" placeholder="请输入名称" type="textarea" :rows="1"></fs-input>
1
import { Toast } from 'fs-ui'

export default {
  data () {
    return {
      val1: '',
      val2: '',
      val3: '',
      val4: '',
      val5: '',
      val6: '',
      val7: '',
      val8: '',
      val9: '',
      val10: '',
      error: false
    }
  },
  methods: {
    handleClick () {
      this.val9 = '1111'
    },
    handleSearch (val) {
      Toast({
        message: val
      })
    },
    onInputChange (e) {
      if (!e.target.value) {
        this.error = true
      } else {
        this.error = false
      }
    },
    onErrorClick () {
      Toast({
        message: '不能为空'
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

属性

参数 说明 类型 默认值
v-model 绑定的值 String, Number -
prefix-icon 前置图标 String -
suffix-icon 后置图标 String -
label 前置描述文字 String -
clearable 显示清除按钮 Boolen -
disabled 原生属性 Boolen -
placeholder 原生属性 String -
type 可选 text textarea password number search bankCard phone String text
error 是否显示错误图标 Boolen text
on-error-click 点击错误图标的回调函数 Function -

事件

event 说明 返回值
input input 事件 value
on-focus focus 事件 event
on-blur blur 事件 event
on-change change 事件,随着input触发 value
on-input-change 原生input change 事件 event
on-keypress keypress 事件 event
on-search type 为search时，点击后置搜索按钮 event

← Checkbox 选择框 →