mirror of https://github.com/ElemeFE/element
support autocomplete append & prepend
parent
c5c5bbba9e
commit
63ae2d2a68
|
@ -110,17 +110,14 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.inline-input {
|
.inline-input {
|
||||||
.el-input {
|
&.el-input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
margin: 10px 5px;
|
margin: 10px 5px;
|
||||||
}
|
}
|
||||||
.el-autocomplete {
|
&.el-autocomplete {
|
||||||
|
display: inline-block;
|
||||||
margin: 10px 0 0;
|
margin: 10px 0 0;
|
||||||
|
|
||||||
.el-input {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tac {
|
.tac {
|
||||||
|
@ -306,22 +303,26 @@ export default {
|
||||||
|
|
||||||
::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
|
::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
|
||||||
```html
|
```html
|
||||||
<div class="inline-input">
|
<div>
|
||||||
<el-input
|
<el-input
|
||||||
|
class="inline-input"
|
||||||
size="large"
|
size="large"
|
||||||
placeholder="Please input"
|
placeholder="Please input"
|
||||||
v-model="input6">
|
v-model="input6">
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-input
|
<el-input
|
||||||
|
class="inline-input"
|
||||||
placeholder="Please input"
|
placeholder="Please input"
|
||||||
v-model="input7">
|
v-model="input7">
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-input
|
<el-input
|
||||||
|
class="inline-input"
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="Please input"
|
placeholder="Please input"
|
||||||
v-model="input8">
|
v-model="input8">
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-input
|
<el-input
|
||||||
|
class="inline-input"
|
||||||
size="mini"
|
size="mini"
|
||||||
placeholder="Please input"
|
placeholder="Please input"
|
||||||
v-model="input9">
|
v-model="input9">
|
||||||
|
@ -349,10 +350,11 @@ You can get some recommended tips based on the current input.
|
||||||
|
|
||||||
::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
|
::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
|
||||||
```html
|
```html
|
||||||
<el-row class="inline-input border-grid">
|
<el-row class="border-grid">
|
||||||
<el-col :span="12" class="tac">
|
<el-col :span="12" class="tac">
|
||||||
<div class="text">list suggestions when activated</div>
|
<div class="text">list suggestions when activated</div>
|
||||||
<el-autocomplete
|
<el-autocomplete
|
||||||
|
class="inline-input"
|
||||||
v-model="state1"
|
v-model="state1"
|
||||||
:fetch-suggestions="querySearch"
|
:fetch-suggestions="querySearch"
|
||||||
placeholder="Please input"
|
placeholder="Please input"
|
||||||
|
@ -362,6 +364,7 @@ You can get some recommended tips based on the current input.
|
||||||
<el-col :span="12" class="tac">
|
<el-col :span="12" class="tac">
|
||||||
<div class="text">list suggestions on input</div>
|
<div class="text">list suggestions on input</div>
|
||||||
<el-autocomplete
|
<el-autocomplete
|
||||||
|
class="inline-input"
|
||||||
v-model="state2"
|
v-model="state2"
|
||||||
:fetch-suggestions="querySearch"
|
:fetch-suggestions="querySearch"
|
||||||
placeholder="Please input"
|
placeholder="Please input"
|
||||||
|
|
|
@ -151,17 +151,14 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.inline-input {
|
.inline-input {
|
||||||
.el-input {
|
&.el-input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
margin: 10px 5px;
|
margin: 10px 5px;
|
||||||
}
|
}
|
||||||
.el-autocomplete {
|
&.el-autocomplete {
|
||||||
|
display: inline-block;
|
||||||
margin: 10px 0 0;
|
margin: 10px 0 0;
|
||||||
|
|
||||||
.el-input {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tac {
|
.tac {
|
||||||
|
@ -349,22 +346,26 @@ export default {
|
||||||
|
|
||||||
::: demo 可通过 `size` 属性指定输入框的尺寸,除了默认的大小外,还提供了 large、small 和 mini 三种尺寸。
|
::: demo 可通过 `size` 属性指定输入框的尺寸,除了默认的大小外,还提供了 large、small 和 mini 三种尺寸。
|
||||||
```html
|
```html
|
||||||
<div class="inline-input">
|
<div>
|
||||||
<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">
|
||||||
|
@ -392,10 +393,11 @@ export default {
|
||||||
|
|
||||||
::: demo autocomplete 是一个可带输入建议的输入框组件,`fetch-suggestions` 是一个返回输入建议的方法属性,如 querySearch(queryString, cb),在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
|
::: demo autocomplete 是一个可带输入建议的输入框组件,`fetch-suggestions` 是一个返回输入建议的方法属性,如 querySearch(queryString, cb),在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
|
||||||
```html
|
```html
|
||||||
<el-row class="inline-input border-grid">
|
<el-row class="border-grid">
|
||||||
<el-col :span="12" class="tac">
|
<el-col :span="12" class="tac">
|
||||||
<div class="text">激活即列出输入建议</div>
|
<div class="text">激活即列出输入建议</div>
|
||||||
<el-autocomplete
|
<el-autocomplete
|
||||||
|
class="inline-input"
|
||||||
v-model="state1"
|
v-model="state1"
|
||||||
:fetch-suggestions="querySearch"
|
:fetch-suggestions="querySearch"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
|
@ -405,6 +407,7 @@ export default {
|
||||||
<el-col :span="12" class="tac">
|
<el-col :span="12" class="tac">
|
||||||
<div class="text">输入后匹配输入建议</div>
|
<div class="text">输入后匹配输入建议</div>
|
||||||
<el-autocomplete
|
<el-autocomplete
|
||||||
|
class="inline-input"
|
||||||
v-model="state2"
|
v-model="state2"
|
||||||
:fetch-suggestions="querySearch"
|
:fetch-suggestions="querySearch"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
|
|
|
@ -11,7 +11,14 @@
|
||||||
@keydown.up.native="highlight(highlightedIndex - 1)"
|
@keydown.up.native="highlight(highlightedIndex - 1)"
|
||||||
@keydown.down.native="highlight(highlightedIndex + 1)"
|
@keydown.down.native="highlight(highlightedIndex + 1)"
|
||||||
@keydown.enter.native="select(highlightedIndex)"
|
@keydown.enter.native="select(highlightedIndex)"
|
||||||
></el-input>
|
>
|
||||||
|
<template slot="prepend" v-if="$slots.prepend">
|
||||||
|
<slot name="prepend"></slot>
|
||||||
|
</template>
|
||||||
|
<template slot="append" v-if="$slots.append">
|
||||||
|
<slot name="append"></slot>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
<transition name="md-fade-bottom">
|
<transition name="md-fade-bottom">
|
||||||
<ul
|
<ul
|
||||||
v-if="suggestionVisible"
|
v-if="suggestionVisible"
|
||||||
|
|
Loading…
Reference in New Issue