fix textarea style & improve docs

pull/2298/head
baiyaaaaa 2017-01-06 01:16:49 +08:00 committed by 杨奕
parent 77549b752b
commit cc22527321
3 changed files with 78 additions and 6 deletions

View File

@ -28,6 +28,8 @@
input8: '',
input9: '',
textarea: '',
textarea2: '',
textarea3: '',
select: '',
state1: '',
state2: '',
@ -218,14 +220,14 @@ export default {
### Textarea
Resizable for entering multiple lines of text information.
Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`.
::: demo Add attribute `type="textarea"` to change `input` into native `textarea`.
::: demo Control the height by setting the `rows` prop.
```html
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
:rows="2"
placeholder="Please input"
v-model="textarea">
</el-input>
@ -242,6 +244,40 @@ export default {
```
:::
### Autosize Textarea
Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust.
::: demo
```html
<el-input
type="textarea"
autosize
placeholder="Please input"
v-model="textarea2">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="Please input"
v-model="textarea3">
</el-input>
<script>
export default {
data() {
return {
textarea2: '',
textarea3: ''
}
}
}
</script>
```
:::
### Mixed input
Prepend or append an element, generally a label or a button.

View File

@ -28,6 +28,8 @@
input8: '',
input9: '',
textarea: '',
textarea2: '',
textarea3: '',
select: '',
state1: '',
state2: '',
@ -257,13 +259,13 @@ export default {
### 文本域
可调整大小,用于输入多行文本信息
用于输入多行文本信息,通过将 `type` 属性的值指定为 textarea。
::: demo 通过将 `type` 属性的值指定为 textarea。
::: demo 文本域高度可通过 `rows` 属性控制
```html
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
@ -280,6 +282,39 @@ export default {
```
:::
### 可自适应文本高度的文本域
通过设置 `autosize` 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 `autosize` 还可以设定为一个对象,指定最小行数和最大行数。
::: demo
```html
<el-input
type="textarea"
autosize
placeholder="请输入内容"
v-model="textarea2">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入内容"
v-model="textarea3">
</el-input>
<script>
export default {
data() {
return {
textarea2: '',
textarea3: ''
}
}
}
</script>
```
:::
### 复合型输入框
可前置或后置元素,一般为标签或按钮

View File

@ -173,6 +173,7 @@
@b textarea {
display: inline-block;
width: 100%;
vertical-align: bottom;
@e inner {
display: block;