Skip to content

E
Element
Commit a0bbda71 authored by baiyaaaaa's avatar baiyaaaaa
Browse files
Options

fixed autocomplete

parent 7b860de9
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 @ a0bbda71
This diff is collapsed.
examples/nav.config.json
View file @ a0bbda71
......@@ -137,11 +137,6 @@
"title": "Form 表单",
"description": "一个多功能的并带有字段验证的表单组件"
},
{
"path": "/autocomplete",
"name": "自动完成 (autocomplete)",
"title": "Autocomplete 自动完成"
},
{
"path": "/rate",
"name": "评分 (rate)",
......
packages/autocomplete/src/autocomplete.vue
View file @ a0bbda71
......@@ -13,35 +13,31 @@
></el-input>
<transition name="md-fade-bottom">
<ul
v-show="suggestionVisible && !loading && suggestions.length > 0"
v-if="suggestionVisible"
class="el-autocomplete__suggestions"
:class="{ 'is-loading': loading }"
ref="suggestions"
>
<li
v-if="!customItem"
:class="{'highlighted': highlightedIndex === index}"
@click="select(index)"
v-for="(item, index) in suggestions">
{{item.display}}
</li>
<component
v-else
:is="customItem"
@click.native="select(index)"
v-for="(item, index) in suggestions"
:item="item"
:index="index">
</component>
<li v-if="loading"><i class="el-icon-loading"></i></li>
<template v-for="(item, index) in suggestions" v-else>
<li
v-if="!customItem"
:class="{'highlighted': highlightedIndex === index}"
@click="select(index)"
>
{{item.value}}
</li>
<component
v-else
:class="{'highlighted': highlightedIndex === index}"
@click="select(index)"
:is="customItem"
:item="item"
:index="index">
</component>
</template>
</ul>
</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>
</template>
<script>
......@@ -62,7 +58,7 @@
name: String,
value: String,
fetchSuggestions: Function,
triggerOnfocus: {
triggerOnFocus: {
type: Boolean,
default: true
},
......@@ -72,7 +68,6 @@
return {
suggestions: [],
suggestionVisible: false,
inputFocusing: false,
loading: false,
highlightedIndex: -1
};
......@@ -83,60 +78,59 @@
this.showSuggestions(value);
},
handleFocus() {
if (this.triggerOnfocus) {
if (this.triggerOnFocus) {
this.showSuggestions(this.value);
}
},
handleBlur() {
this.suggestionVisible = false;
this.hideSuggestions();
},
select(index) {
if (this.suggestions && this.suggestions[index]) {
this.$emit('input', this.suggestions[index].value);
this.$nextTick(() => {
this.suggestionVisible = false;
this.hideSuggestions();
});
}
},
hideSuggestions() {
this.suggestionVisible = false;
this.suggestions = [];
this.loading = false;
},
showSuggestions(value) {
this.suggestionVisible = true;
this.loading = true;
this.fetchSuggestions(value, (suggestions) => {
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) {
if (!this.suggestionVisible || this.loading) { return; }
if (index < 0) {
index = 0;
} else if (index >= this.suggestions.length) {
index = this.suggestions.length - 1;
}
var elSelect = this.getSuggestionElement(index);
var elSuggestions = this.$refs.suggestions;
var elSelect = elSuggestions.children[index];
var scrollTop = elSuggestions.scrollTop;
var offsetTop = elSelect.offsetTop;
if (offsetTop > (scrollTop + elSuggestions.clientHeight - 12)) {
if (offsetTop + elSelect.scrollHeight > (scrollTop + elSuggestions.clientHeight)) {
elSuggestions.scrollTop += elSelect.scrollHeight;
}
if (offsetTop < scrollTop - 12) {
if (offsetTop < scrollTop) {
elSuggestions.scrollTop -= elSelect.scrollHeight;
}
this.highlightedIndex = index;
if (this.showOnUpDown) {
this.suggestionVisible = true;
}
}
}
};
......
packages/theme-default/src/autocomplete.css
View file @ a0bbda71
......@@ -25,9 +25,14 @@
& li {
list-style: none;
line-height: 36px;
padding: 0 27px 0 10px;
padding: 0 10px;
margin: 0;
cursor: pointer;
color: #475669;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.highlighted,
&:hover {
......@@ -47,12 +52,18 @@
}
@when loading {
text-align: center;
height: 100px;
line-height: 100px;
font-size: 20px;
color: #999;
@utils-vertical-center;
li {
text-align: center;
height: 100px;
line-height: 100px;
font-size: 20px;
color: #999;
@utils-vertical-center;
&:hover {
background-color: #fff;
}
}
& .el-icon-loading {
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