mpx-cube-ui

# Cube-Input

# 介绍

输入框组件，支持使用wx:model对数据双向绑定，支持一键清空内容。

# 示例

# 基础用法

通过wx:model属性对于输入内容进行双向绑定。

收起 
<template>
  <cube-input wx:model="{{ inputValue }}" wx:model-prop="value"/>
  {{ inputValue }}
</template>

<script>
  import { createPage } from '@mpxjs/core'

  createPage({
    data: {
      inputValue: 'mpx-cube-ui'
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 控制最大长度

通过maxlength配置最大长度等。

收起 
<template>
  <cube-input wx:model="{{ inputValue }}" wx:model-prop="value" maxlength="{{ maxlength }}"/>
  {{ textareaValue }}
</template>

<script>
  import { createPage } from '@mpxjs/core'

  createPage({
    data: {
      inputValue: 'mpx-cube-ui',
      maxlength: 10
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 清空按钮

通过clearable配置清空按钮。 clearable可以为布尔类型，还可以配置为对象

收起 
<template>
  <cube-input 
    wx:model="{{ value }}"
    placeholder="{{ placeholder }}"
    type="{{ type }}"
    maxlength="{{ maxlength }}"
    disabled="{{ disabled }}"
    clearable="{{ clearable }}"
  />
</template>

<script>
  import { createPage } from '@mpxjs/core'

  createPage({
    data: {
      value: '',
      placeholder: '请输入内容',
      type: 'text',
      maxlength: 100,
      disabled: true,
      clearable: {
        visible: true,
        blurHidden: true
      }
    }
  })
</script>
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

clearable配置的对象包含两个值：visivle和blurHidden分别代表当前是否展示以及当前Input元素离焦的时候是否隐藏。

# 密码配置

通过eye配置密码眼睛。 eye配置为对象

收起 
<template>
  <cube-input 
    wx:model="{{ value }}"
    placeholder="{{ placeholder }}"
    type="{{ type }}"
    maxlength="{{ maxlength }}"
    disabled="{{ disabled }}"
    eye="{{ eye }}"
  />
</template>

<script>
  import { createPage } from '@mpxjs/core'

  createPage({
    data: {
      value: '',
      placeholder: '请输入内容',
      type: 'password',
      maxlength: 100,
      disabled: true,
      eye: {
        open: true,
        reverse: false
      }
    }
  })
</script>
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

eye配置的对象包含两个值：open和reverse分别代表当前是否展示以及当前眼睛展示是否反转。

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
value 输入框的内容 String - -
type 输入框的类型 String - text
placeholder 占位文本 String - 请输入...
placeholderStyle 指定 placeholder 的样式 String - color: #969699
disabled 是否禁用 Boolean - false
focus 获取焦点 Boolean - false
autoFocus 自动聚焦 Boolean - false
autocomplete 是否自动填充 Boolean - false
maxlength 最大输入长度 Number - -1
clearable 清除按键是否可见和清除按键离焦是否可见 Object - {}
eye 密码眼睛是否可见和展示样式 Object - {}
cursorSpacing 指定光标与键盘的距离（web暂不支持） Number - 0
cursor 指定focus时的光标位置（web暂不支持） Number - -1
selectionStart 光标起始位置（web暂不支持） Number - -1
selectionEnd 光标结束位置（web暂不支持） Number - -1
adjustPosition 键盘弹起时，是否自动上推页面（web暂不支持） Boolean - true
holdKeyboard focus时，点击页面的时候不收起键盘（web暂不支持） Boolean - false

# Events

事件名 说明 参数
input - -
confirm 点击完成时， 触发 confirm 事件 事件对象 e = {value: value}
focus 输入框聚焦时触发 事件对象 @arg 事件对象 e = {value}
blur 输入框失去焦点时触发 事件对象 @arg 事件对象 e = {value, cursor}

# Slots

插槽名 说明
prepend 前缀插槽
append 后缀插槽

# CSS Variable

变量名 默认值 含义
$input-color
#4B4B4D
 文本颜色
$input-bgc
#FFFFFF
 背景颜色
$input-padding
10px 10px 10px 10px
 内边距
$input-disable-bgc
#eee
 禁用颜色
$input-border-color
#E8E9EB
 边框颜色
$input-border-radius
7px
 边框圆角
$input-focus-border-color 边框颜色
$input-indicator-color
#969699
 指示器颜色
$input-indicator-waring-color
#C73122
 指示器警告颜色
$input-indicator-bottom
5px
 指示器下边距
$input-indicator-right
10px
 指示器右边距
$input-font-size 文本字号
$input-indicator-font-size 指示器文本字号
$input-indicator-line-height
14px
 指示器行高
$input-clear-icon-color
#999
 -

← Textarea 文本输入框 →