Commit 162d7c36 authored by baiyaaaaa's avatar baiyaaaaa Committed by cinwell.li

input box model fix

parent 635cf6a7
...@@ -132,32 +132,17 @@ ...@@ -132,32 +132,17 @@
} }
.el-input { .el-input {
width: 180px; width: 180px;
& + .el-input,
& + .el-textarea {
margin-top: 15px;
}
} }
.el-textarea { .el-textarea {
width: 414px; width: 414px;
} }
.el-input-group { .el-input-group {
min-width: 260px; width: 260px;
}
.el-input-group + .el-input-group {
margin-top: 15px;
}
.el-autocomplete {
display: inline-block;
} }
.inline-input { .demo-input-size {
&.el-input { .el-input {
vertical-align: top; vertical-align: top;
margin: 10px 5px; margin: 0 10px 10px 0;
}
&.el-autocomplete {
display: inline-block;
margin: 10px 0 0;
} }
} }
.tac { .tac {
...@@ -301,13 +286,17 @@ export default { ...@@ -301,13 +286,17 @@ export default {
::: demo 可通过 slot 来指定在 input 中前置或者后置内容。 ::: demo 可通过 slot 来指定在 input 中前置或者后置内容。
```html ```html
<template> <div>
<el-input placeholder="请输入内容" v-model="input3"> <el-input placeholder="请输入内容" v-model="input3">
<template slot="prepend">Http://</template> <template slot="prepend">Http://</template>
</el-input> </el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input4"> <el-input placeholder="请输入内容" v-model="input4">
<template slot="append">.com</template> <template slot="append">.com</template>
</el-input> </el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input5" style="width: 300px;"> <el-input placeholder="请输入内容" v-model="input5" style="width: 300px;">
<el-select v-model="select" slot="prepend" placeholder="请选择"> <el-select v-model="select" slot="prepend" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option> <el-option label="餐厅名" value="1"></el-option>
...@@ -316,14 +305,7 @@ export default { ...@@ -316,14 +305,7 @@ export default {
</el-select> </el-select>
<el-button slot="append" icon="search"></el-button> <el-button slot="append" icon="search"></el-button>
</el-input> </el-input>
</template> </div>
<style>
.el-select .el-input {
width: 100px;
}
</style>
<script> <script>
export default { export default {
data() { data() {
...@@ -343,26 +325,22 @@ export default { ...@@ -343,26 +325,22 @@ export default {
::: demo 可通过 `size` 属性指定输入框的尺寸,除了默认的大小外,还提供了 large、small 和 mini 三种尺寸。 ::: demo 可通过 `size` 属性指定输入框的尺寸,除了默认的大小外,还提供了 large、small 和 mini 三种尺寸。
```html ```html
<div> <div class="demo-input-size">
<el-input <el-input
class="inline-input"
size="large" size="large"
placeholder="请输入内容" placeholder="请输入内容"
v-model="input6"> v-model="input6">
</el-input> </el-input>
<el-input <el-input
class="inline-input"
placeholder="请输入内容" placeholder="请输入内容"
v-model="input7"> v-model="input7">
</el-input> </el-input>
<el-input <el-input
class="inline-input"
size="small" size="small"
placeholder="请输入内容" placeholder="请输入内容"
v-model="input8"> v-model="input8">
</el-input> </el-input>
<el-input <el-input
class="inline-input"
size="mini" size="mini"
placeholder="请输入内容" placeholder="请输入内容"
v-model="input9"> v-model="input9">
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment