mirror of https://github.com/ElemeFE/element
fix textarea style & improve docs
parent
77549b752b
commit
cc22527321
|
@ -28,6 +28,8 @@
|
||||||
input8: '',
|
input8: '',
|
||||||
input9: '',
|
input9: '',
|
||||||
textarea: '',
|
textarea: '',
|
||||||
|
textarea2: '',
|
||||||
|
textarea3: '',
|
||||||
select: '',
|
select: '',
|
||||||
state1: '',
|
state1: '',
|
||||||
state2: '',
|
state2: '',
|
||||||
|
@ -218,14 +220,14 @@ export default {
|
||||||
|
|
||||||
### Textarea
|
### 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
|
```html
|
||||||
<el-input
|
<el-input
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:autosize="{ minRows: 2, maxRows: 4}"
|
:rows="2"
|
||||||
placeholder="Please input"
|
placeholder="Please input"
|
||||||
v-model="textarea">
|
v-model="textarea">
|
||||||
</el-input>
|
</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
|
### Mixed input
|
||||||
|
|
||||||
Prepend or append an element, generally a label or a button.
|
Prepend or append an element, generally a label or a button.
|
||||||
|
|
|
@ -28,6 +28,8 @@
|
||||||
input8: '',
|
input8: '',
|
||||||
input9: '',
|
input9: '',
|
||||||
textarea: '',
|
textarea: '',
|
||||||
|
textarea2: '',
|
||||||
|
textarea3: '',
|
||||||
select: '',
|
select: '',
|
||||||
state1: '',
|
state1: '',
|
||||||
state2: '',
|
state2: '',
|
||||||
|
@ -257,13 +259,13 @@ export default {
|
||||||
|
|
||||||
### 文本域
|
### 文本域
|
||||||
|
|
||||||
可调整大小,用于输入多行文本信息
|
用于输入多行文本信息,通过将 `type` 属性的值指定为 textarea。
|
||||||
|
|
||||||
::: demo 通过将 `type` 属性的值指定为 textarea。
|
::: demo 文本域高度可通过 `rows` 属性控制
|
||||||
```html
|
```html
|
||||||
<el-input
|
<el-input
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:autosize="{ minRows: 2, maxRows: 4}"
|
:rows="2"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
v-model="textarea">
|
v-model="textarea">
|
||||||
</el-input>
|
</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>
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|
||||||
### 复合型输入框
|
### 复合型输入框
|
||||||
|
|
||||||
可前置或后置元素,一般为标签或按钮
|
可前置或后置元素,一般为标签或按钮
|
||||||
|
|
|
@ -173,6 +173,7 @@
|
||||||
@b textarea {
|
@b textarea {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
vertical-align: bottom;
|
||||||
|
|
||||||
@e inner {
|
@e inner {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
Loading…
Reference in New Issue