mirror of https://github.com/ElemeFE/element
fix textarea style & improve docs
parent
77549b752b
commit
cc22527321
|
@ -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.
|
||||
|
|
|
@ -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>
|
||||
```
|
||||
:::
|
||||
|
||||
### 复合型输入框
|
||||
|
||||
可前置或后置元素,一般为标签或按钮
|
||||
|
|
|
@ -173,6 +173,7 @@
|
|||
@b textarea {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: bottom;
|
||||
|
||||
@e inner {
|
||||
display: block;
|
||||
|
|
Loading…
Reference in New Issue