weex-amui
Version:
Ant Design Mobile of Weex
77 lines (62 loc) • 2.85 kB
Markdown
# am-list-input
> 基于 `am-list-item` 对 `input` 进行封装
## 使用方法
```vue
<template>
<am-list
header="Header"
:footer="`value=${value}`"
>
<am-list-input
v-model="value"
title="标题"
placeholder="请输入内容">
</am-list-input>
</am-list>
</template>
<script>
import { AmList, AmListInput } from 'weex-amui'
export default {
components: { AmList, AmListInput },
data () {
return {
value: ''
}
}
}
</script>
```
更详细代码可以参考 [这里](https://github.com/HMingHe/weex-amui/blob/master/example/list-input/index.vue)
### 可配置参数
| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:|:----------:|
| **`value`** | `String` | `N` | `''` | value, 可以用 `v-model` 双向绑定 |
| **`type`** | `String` | `N` | `text` | 输入框的类型(注1) |
| **`title`** | `String` | `N` | `''` | 标题 |
| **`titleNumber`** | `number` | `N` | `5` | 标题的文字个数,可用 `2-7` 之间的数字 |
| **`placeholder`** | `String` | `N` | `''` | placeholder |
| **`disabled`** | `Boolean` | `N` | `false` | 禁用 |
| **`thumb`** | `String` | `N` | `null` | 缩略图链接 |
| **`thumbStyle`** | `Object` | `N` | `{}` | 缩略图样式 |
| **`extra`** | `String` | `null` | `null` | 右边内容 |
| **`align`** | `String` | `N` | `left` | input值的对齐方式,可选:`left`,`center`,`right` |
| **`editable`** | `Boolean` | `N` | `true` | 是否可编辑 |
| **`disabled`** | `Boolean` | `N` | `false` | 是否禁用 |
| **`autofocus`** | `Boolean` | `N` | `true` | 自动获取光标 |
| **`returnKeyType`** | `String` | `N` | `default` | 键盘返回键的类型,支持 `defalut`,`go`,`next`,`search`,`send`,`done` |
| **`maxLength`** | `Number` | `N` | `null` | 输入的最大长度 |
| **`max`** | `String` | `N` | `null` | 控制当 `type` 属性为 `date` 时选择日期的最大时间,格式为 `yyyy-MM-dd` |
| **`min`** | `String` | `N` | `null` | 控制当 `type` 属性为 `date` 时选择日期的最小时间,格式为 `yyyy-MM-dd` |
- 注1:与 `weex` `input` 组件的 `type` 属性一致 [文档](http://weex.apache.org/cn/references/components/input.html#te-xing)。
### Slots
| Name | Required | Description |
| ---- |:---:|:----------:|
| **`thumb`** | `N` | 会覆盖 `prop.thumb` |
| **`extra`** | `N` | 会覆盖 `prop.extra` |
### Events
| Event | Description | Parameters |
| ---- |:----------:|:----:|
| **`input`** | `输入` | `(value)` |
- 除了 `input` 事件之外,其他事件与 `weex` 的 `<input/>>` 组件一致 [文档](http://weex.apache.org/cn/references/components/input.html#shi-jian)。
### Methods
- 所有方法与 `weex` 的 `<input/>` 组件一致 [文档](http://weex.apache.org/cn/references/components/input.html#methods)