Skip to content

E
Element
Commit 16b58dc1 authored by cinwell.li's avatar cinwell.li Committed by GitHub
Browse files
Options

Merge pull request #113 from eleme/fix-autocomplete 

fixed autocomplete
parents 7b860de9 a0bbda71
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 574 additions and 516 deletions
examples/docs/autocomplete.md deleted 100644 → 0
View file @ 7b860de9
<style>
.demo-box {
.el-autocomplete {
width: 180px;
}
.my-suggestions-item {
& .remark {
float: right;
font-size: 13px;
}
}
}
</style>
<script>
var Vue = require('vue');
Vue.component('my-item', {
functional: true,
render: function (h, ctx) {
var item = ctx.props.item;
return h('li', {
attrs: { class: 'my-suggestions-item' }
}, [
h('span', { attrs: { class: 'label' } }, ['选项' + ctx.props.index]),
h('span', { attrs: { class: 'remark' } }, [item.display])
]);
},
props: {
item: {
type: Object,
required: true
},
index: {
type: Number
}
}
});
export default {
data() {
return {
states: [],
state1: '',
state2: '',
state3: '',
state4: '',
timeout: null
}
},
methods: {
loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
var result = [];
allStates.split(/, +/g).forEach((state) => {
if (state) {
result.push({
value: state.toLowerCase(),
display: state
});
}
});
return result;
},
querySearch(queryString, cb) {
var states = this.states;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
cb(results);
},
querySearchAsync(queryString, cb) {
var states = this.states;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(queryString.toLowerCase()) === 0);
};
}
},
mounted() {
this.states = this.loadAll();
}
};
</script>
## 基础使用
<div class="demo-box">
<el-autocomplete
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
></el-autocomplete>
</div>
```html
<template>
<el-autocomplete
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
></el-autocomplete>
</template>
<script>
export default {
data() {
return {
states: [],
state1: ''
}
},
methods: {
loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
var result = [];
allStates.split(/, +/g).forEach((state) => {
if (state) {
result.push({
value: state.toLowerCase(),
display: state
});
}
});
return result;
},
querySearch(queryString, callback) {
var states = this.states;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
callback(results);
},
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(queryString.toLowerCase()) === 0);
};
}
},
mounted() {
this.states = this.loadAll();
}
};
</script>
```
## 自定义模板
<div class="demo-box">
<el-autocomplete
v-model="state2"
:fetch-suggestions="querySearch"
custom-item="my-item"
placeholder="请输入内容"
></el-autocomplete>
</div>
```html
<el-autocomplete
v-model="state2"
:fetch-suggestions="querySearch"
custom-item="my-item"
placeholder="请输入内容"
></el-autocomplete>
<script>
var Vue = require('vue');
Vue.component('my-item', {
functional: true,
render: function (h, ctx) {
var item = ctx.props.item;
return h('li', {
attrs: { class: 'my-suggestions-item' }
}, [
h('span', { attrs: { class: 'label' } }, ['选项' + ctx.props.index]),
h('span', { attrs: { class: 'remark' } }, [item.display])
]);
},
props: {
item: {
type: Object,
required: true
},
index: {
type: Number
}
}
});
export default {
data() {
return {
states: [],
state2: ''
}
},
methods: {
loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
var result = [];
allStates.split(/, +/g).forEach((state) => {
if (state) {
result.push({
value: state.toLowerCase(),
display: state
});
}
});
return result;
},
querySearch(queryString, cb) {
var states = this.states;
var results = queryString ? states.filter(this.createStateFilter(queryString)) : states;
cb(results);
},
createStateFilter(queryString) {
return (state) => {
return (state.value.indexOf(queryString.toLowerCase()) === 0);
};
}
},
mounted() {
this.states = this.loadAll();
}
};
</script>
```
## 服务端数据
<div class="demo-box">
<el-autocomplete
v-model="state3"
placeholder = "请输入内容"
:fetch-Suggestions="querySearchAsync"
></el-autocomplete>
</div>
```html
<template>
<el-autocomplete
v-model="state3"
placeholder = "请输入内容"
:fetch-Suggestions="querySearchAsync"
></el-autocomplete>
</template>
<script>
export default {
data() {
return {
state3: '',
states: []
}
},
methods: {
loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
var result = [];
allStates.split(/, +/g).forEach((state) => {
if (state) {
result.push({
value: state.toLowerCase(),
display: state
});
}
});
return result;
},
querySearchAsync(query, callback) {
var states = this.states;
var results = query ? states.filter(this.createStateFilter(query)) : states;
if (!query) { return []; }
setTimeout(() => {
callback(results);
}, 3000 * Math.random());
},
createStateFilter(query) {
return (state) => {
return (state.value.indexOf(query.toLowerCase()) === 0);
};
}
},
ready() {
this.states = this.loadAll();
}
};
</script>
```
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| placeholder | 输入框占位文本 | string | | |
| disabled | 禁用 | boolean | true, false | false |
| value | 必填值输入绑定值 | string | | |
| showOnUpDown | 是否通过键盘上下键控制建议列表 | boolean | | |
| fetch-suggestions | 返回输入建议的方法，组件内部通过调用该方法来获得输入建议的数据，在该方法中，仅当你的输入建议数据 resolve 时再通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | | |
examples/docs/input.md
View file @ 16b58dc1
This diff is collapsed.
examples/nav.config.json
View file @ 16b58dc1
...@@ -137,11 +137,6 @@ ...@@ -137,11 +137,6 @@
"title": "Form 表单", "title": "Form 表单",
"description": "一个多功能的并带有字段验证的表单组件" "description": "一个多功能的并带有字段验证的表单组件"
}, },
{
"path": "/autocomplete",
"name": "自动完成 (autocomplete)",
"title": "Autocomplete 自动完成"
},
{ {
"path": "/rate", "path": "/rate",
"name": "评分 (rate)", "name": "评分 (rate)",
......
packages/autocomplete/src/autocomplete.vue
View file @ 16b58dc1
...@@ -13,35 +13,31 @@ ...@@ -13,35 +13,31 @@
></el-input> ></el-input>
<transition name="md-fade-bottom"> <transition name="md-fade-bottom">
<ul <ul
v-show="suggestionVisible && !loading && suggestions.length > 0" v-if="suggestionVisible"
class="el-autocomplete__suggestions" class="el-autocomplete__suggestions"
:class="{ 'is-loading': loading }"
ref="suggestions" ref="suggestions"
> >
<li <li v-if="loading"><i class="el-icon-loading"></i></li>
v-if="!customItem" <template v-for="(item, index) in suggestions" v-else>
:class="{'highlighted': highlightedIndex === index}" <li
@click="select(index)" v-if="!customItem"
v-for="(item, index) in suggestions"> :class="{'highlighted': highlightedIndex === index}"
{{item.display}} @click="select(index)"
</li> >
<component {{item.value}}
v-else </li>
:is="customItem" <component
@click.native="select(index)" v-else
v-for="(item, index) in suggestions" :class="{'highlighted': highlightedIndex === index}"
:item="item" @click="select(index)"
:index="index"> :is="customItem"
</component> :item="item"
:index="index">
</component>
</template>
</ul> </ul>
</transition> </transition>
<transition name="md-fade-bottom">
<div
v-show="suggestionVisible && loading"
class="el-autocomplete__suggestions is-loading"
>
<i class="el-icon-loading"></i>
</div>
</transition>
</div> </div>
</template> </template>
<script> <script>
...@@ -62,7 +58,7 @@ ...@@ -62,7 +58,7 @@
name: String, name: String,
value: String, value: String,
fetchSuggestions: Function, fetchSuggestions: Function,
triggerOnfocus: { triggerOnFocus: {
type: Boolean, type: Boolean,
default: true default: true
}, },
...@@ -72,7 +68,6 @@ ...@@ -72,7 +68,6 @@
return { return {
suggestions: [], suggestions: [],
suggestionVisible: false, suggestionVisible: false,
inputFocusing: false,
loading: false, loading: false,
highlightedIndex: -1 highlightedIndex: -1
}; };
...@@ -83,60 +78,59 @@ ...@@ -83,60 +78,59 @@
this.showSuggestions(value); this.showSuggestions(value);
}, },
handleFocus() { handleFocus() {
if (this.triggerOnfocus) { if (this.triggerOnFocus) {
this.showSuggestions(this.value); this.showSuggestions(this.value);
} }
}, },
handleBlur() { handleBlur() {
this.suggestionVisible = false; this.hideSuggestions();
}, },
select(index) { select(index) {
if (this.suggestions && this.suggestions[index]) { if (this.suggestions && this.suggestions[index]) {
this.$emit('input', this.suggestions[index].value); this.$emit('input', this.suggestions[index].value);
this.$nextTick(() => { this.$nextTick(() => {
this.suggestionVisible = false; this.hideSuggestions();
}); });
} }
}, },
hideSuggestions() {
this.suggestionVisible = false;
this.suggestions = [];
this.loading = false;
},
showSuggestions(value) { showSuggestions(value) {
this.suggestionVisible = true; this.suggestionVisible = true;
this.loading = true; this.loading = true;
this.fetchSuggestions(value, (suggestions) => { this.fetchSuggestions(value, (suggestions) => {
this.loading = false; this.loading = false;
this.suggestions = suggestions; if (Array.isArray(suggestions) && suggestions.length > 0) {
this.suggestions = suggestions;
} else {
this.hideSuggestions();
}
}); });
}, },
getSuggestionElement(index) {
if (!this.suggestions || !this.suggestions[index]) {
return null;
} else {
return this.$refs.suggestions.children[index];
}
},
highlight(index) { highlight(index) {
if (!this.suggestionVisible || this.loading) { return; }
if (index < 0) { if (index < 0) {
index = 0; index = 0;
} else if (index >= this.suggestions.length) { } else if (index >= this.suggestions.length) {
index = this.suggestions.length - 1; index = this.suggestions.length - 1;
} }
var elSelect = this.getSuggestionElement(index);
var elSuggestions = this.$refs.suggestions; var elSuggestions = this.$refs.suggestions;
var elSelect = elSuggestions.children[index];
var scrollTop = elSuggestions.scrollTop; var scrollTop = elSuggestions.scrollTop;
var offsetTop = elSelect.offsetTop; var offsetTop = elSelect.offsetTop;
if (offsetTop > (scrollTop + elSuggestions.clientHeight - 12)) { if (offsetTop + elSelect.scrollHeight > (scrollTop + elSuggestions.clientHeight)) {
elSuggestions.scrollTop += elSelect.scrollHeight; elSuggestions.scrollTop += elSelect.scrollHeight;
} }
if (offsetTop < scrollTop - 12) { if (offsetTop < scrollTop) {
elSuggestions.scrollTop -= elSelect.scrollHeight; elSuggestions.scrollTop -= elSelect.scrollHeight;
} }
this.highlightedIndex = index; this.highlightedIndex = index;
if (this.showOnUpDown) {
this.suggestionVisible = true;
}
} }
} }
}; };
......
packages/theme-default/src/autocomplete.css
View file @ 16b58dc1
...@@ -25,9 +25,14 @@ ...@@ -25,9 +25,14 @@
& li { & li {
list-style: none; list-style: none;
line-height: 36px; line-height: 36px;
padding: 0 27px 0 10px; padding: 0 10px;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
color: #475669;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.highlighted, &.highlighted,
&:hover { &:hover {
...@@ -47,12 +52,18 @@ ...@@ -47,12 +52,18 @@
} }
@when loading { @when loading {
text-align: center; li {
height: 100px; text-align: center;
line-height: 100px; height: 100px;
font-size: 20px; line-height: 100px;
color: #999; font-size: 20px;
@utils-vertical-center; color: #999;
@utils-vertical-center;
&:hover {
background-color: #fff;
}
}
& .el-icon-loading { & .el-icon-loading {
vertical-align: middle; vertical-align: middle;
......
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