Skip to content

E
Element
Commit 9dee7854 authored by baiyaaaaa's avatar baiyaaaaa Committed by 杨奕
Browse files
Options

autocomplete dropdown use el-scrollbar

parent a1dc075f
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 132 deletions
examples/docs/en-US/input.md
View file @ 9dee7854
......@@ -120,7 +120,7 @@
}
}
}
.el-autocomplete__suggestions.my-autocomplete {
.el-autocomplete-suggestion.my-autocomplete {
li {
line-height: normal;
padding: 7px *;
......@@ -133,7 +133,6 @@
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
......
examples/docs/zh-CN/input.md
View file @ 9dee7854
......@@ -161,7 +161,7 @@
}
}
}
.el-autocomplete__suggestions.my-autocomplete {
.el-autocomplete-suggestion.my-autocomplete {
li {
line-height: normal;
padding: 7px *;
......@@ -174,7 +174,6 @@
font-size: 12px;
color: #b4b4b4;
}
.highlighted .addr {
color: #ddd;
}
......
packages/autocomplete/src/autocomplete-suggestions.vue
View file @ 9dee7854
<template>
<transition name="el-zoom-in-top" @after-leave="doDestroy">
<ul
<div
v-show="showPopper"
class="el-autocomplete__suggestions"
class="el-autocomplete-suggestion"
:class="{ 'is-loading': parent.loading }"
:style="{ width: dropdownWidth }"
>
<li v-if="parent.loading"><i class="el-icon-loading"></i></li>
<template v-for="(item, index) in suggestions" v-else>
<li
v-if="!parent.customItem"
:class="{'highlighted': parent.highlightedIndex === index}"
@click="select(item)"
>
{{item.value}}
</li>
<component
v-else
:class="{'highlighted': parent.highlightedIndex === index}"
@click="select(item)"
:is="parent.customItem"
:item="item"
:index="index">
</component>
</template>
</ul>
<el-scrollbar
tag="ul"
wrap-class="el-autocomplete-suggestion__wrap"
view-class="el-autocomplete-suggestion__list"
>
<li v-if="parent.loading"><i class="el-icon-loading"></i></li>
<template v-for="(item, index) in suggestions" v-else>
<li
v-if="!parent.customItem"
:class="{'highlighted': parent.highlightedIndex === index}"
@click="select(item)"
>
{{item.value}}
</li>
<component
v-else
:class="{'highlighted': parent.highlightedIndex === index}"
@click="select(item)"
:is="parent.customItem"
:item="item"
:index="index">
</component>
</template>
</el-scrollbar>
</div>
</transition>
</template>
<script>
......
packages/autocomplete/src/autocomplete.vue
View file @ 9dee7854
......@@ -133,22 +133,22 @@
},
highlight(index) {
if (!this.suggestionVisible || this.loading) { return; }
if (index < 0) {
index = 0;
} else if (index >= this.suggestions.length) {
if (index < 0) index = 0;
if (index >= this.suggestions.length) {
index = this.suggestions.length - 1;
}
var elSuggestions = this.$refs.suggestions.$el;
const suggestion = this.$refs.suggestions.$el.querySelector('.el-autocomplete-suggestion__wrap');
const suggestionList = suggestion.querySelectorAll('.el-autocomplete-suggestion__list li');
var elSelect = elSuggestions.children[index];
var scrollTop = elSuggestions.scrollTop;
var offsetTop = elSelect.offsetTop;
let highlightItem = suggestionList[index];
let scrollTop = suggestion.scrollTop;
let offsetTop = highlightItem.offsetTop;
if (offsetTop + elSelect.scrollHeight > (scrollTop + elSuggestions.clientHeight)) {
elSuggestions.scrollTop += elSelect.scrollHeight;
if (offsetTop + highlightItem.scrollHeight > (scrollTop + suggestion.clientHeight)) {
suggestion.scrollTop += highlightItem.scrollHeight;
}
if (offsetTop < scrollTop) {
elSuggestions.scrollTop -= elSelect.scrollHeight;
suggestion.scrollTop -= highlightItem.scrollHeight;
}
this.highlightedIndex = index;
......
packages/theme-default/src/autocomplete.css
View file @ 9dee7854
......@@ -6,71 +6,73 @@
@b autocomplete {
position: relative;
display: inline-block;
}
@b autocomplete-suggestion {
margin: 5px 0 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
@e suggestions {
position: absolute;
left: 0;
top: 110%;
margin: 5px 0 0;
@e wrap {
max-height: 280px;
overflow: auto;
background-color: var(--color-white);
border: 1px solid var(--color-base-gray);
width: 100%;
padding: 6px 0;
z-index: 10;
border-radius: 2px;
max-height: 280px;
box-sizing: border-box;
overflow: auto;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
}
& li {
list-style: none;
line-height: 36px;
padding: 0 10px;
margin: 0;
cursor: pointer;
color: var(--color-extra-light-black);
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@e list {
margin: 0;
padding: 0;
}
&:hover {
background-color: var(--select-option-hover-background);
}
&.highlighted {
background-color: var(--color-primary);
color: var(--color-white);
}
&:active {
background-color: darken(var(--color-primary), 0.2);
}
&.divider {
margin-top: 6px;
border-top: 1px solid var(--color-base-gray);
}
&.divider:last-child {
margin-bottom: -6px;
}
& li {
list-style: none;
line-height: 36px;
padding: 0 10px;
margin: 0;
cursor: pointer;
color: var(--color-extra-light-black);
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: var(--select-option-hover-background);
}
&.highlighted {
background-color: var(--color-primary);
color: var(--color-white);
}
&:active {
background-color: darken(var(--color-primary), 0.2);
}
&.divider {
margin-top: 6px;
border-top: 1px solid var(--color-base-gray);
}
&.divider:last-child {
margin-bottom: -6px;
}
}
@when loading {
li {
text-align: center;
height: 100px;
line-height: 100px;
font-size: 20px;
color: #999;
@utils-vertical-center;
@when loading {
li {
text-align: center;
height: 100px;
line-height: 100px;
font-size: 20px;
color: #999;
@utils-vertical-center;
&:hover {
background-color: var(--color-white);
}
&:hover {
background-color: var(--color-white);
}
}
& .el-icon-loading {
vertical-align: middle;
}
& .el-icon-loading {
vertical-align: middle;
}
}
}
......
test/unit/specs/autocomplete.spec.js
View file @ 9dee7854
......@@ -57,7 +57,7 @@ describe('Autocomplete', () => {
setTimeout(_ => {
const suggestions = vm.$refs.autocomplete.$refs.suggestions.$el;
expect(suggestions.style.display).to.not.equal('none');
expect(suggestions.children.length).to.be.equal(4);
expect(suggestions.querySelectorAll('.el-autocomplete-suggestion__list li').length).to.be.equal(4);
document.body.click();
setTimeout(_ => {
......@@ -74,14 +74,12 @@ describe('Autocomplete', () => {
ref="autocomplete"
:fetch-suggestions="querySearch"
placeholder="请输入内容autocomplete2"
@select="handleSelect"
></el-autocomplete>
`,
data() {
return {
restaurants: [],
state: '',
onceSelected: false
state: ''
};
},
methods: {
......@@ -102,27 +100,29 @@ describe('Autocomplete', () => {
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' }
];
},
handleSelect() {
this.onceSelected = true;
}
},
mounted() {
this.restaurants = this.loadAll();
}
}, true);
let elm = vm.$el;
let inputElm = elm.querySelector('input');
const autocomplete = vm.$refs.autocomplete;
const elm = vm.$el;
const inputElm = elm.querySelector('input');
const spy = sinon.spy();
autocomplete.$on('select', spy);
inputElm.focus();
setTimeout(_ => {
let suggestionsList = vm.$refs.autocomplete.$refs.suggestions.$el;
suggestionsList.children[1].click();
const suggestions = autocomplete.$refs.suggestions.$el;
const suggestionList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');
suggestionList[1].click();
setTimeout(_ => {
expect(inputElm.value).to.be.equal('Hot honey 首尔炸鸡（仙霞路）');
expect(vm.state).to.be.equal('Hot honey 首尔炸鸡（仙霞路）');
expect(vm.onceSelected).to.be.true;
expect(elm.querySelector('.el-autocomplete__suggestions')).to.not.exist;
expect(spy.withArgs().calledOnce).to.be.true;
expect(suggestions.style.display).to.be.equal('none');
done();
}, 500);
}, 500);
......@@ -135,14 +135,12 @@ describe('Autocomplete', () => {
v-model="state"
:fetch-suggestions="querySearch"
placeholder="请输入内容autocomplete3"
@select="handleSelect"
></el-autocomplete>
`,
data() {
return {
restaurants: [],
state: '',
onceSelected: false
state: ''
};
},
methods: {
......@@ -181,28 +179,25 @@ describe('Autocomplete', () => {
{ 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },
{ 'value': '钱记', 'address': '上海市长宁区天山西路' }
];
},
handleSelect() {
this.onceSelected = true;
}
},
mounted() {
this.restaurants = this.loadAll();
}
}, true);
let elm = vm.$el;
let inputElm = elm.querySelector('input');
const autocomplete = vm.$refs.autocomplete;
const inputElm = autocomplete.$el.querySelector('input');
inputElm.focus();
setTimeout(_ => {
vm.$refs.autocomplete.highlight(8);
autocomplete.highlight(8);
vm.$nextTick(_ => {
let suggestionsList = vm.$refs.autocomplete.$refs.suggestions.$el;
let highlightedItem = suggestionsList.children[8];
expect(highlightedItem.className).to.be.equal('highlighted');
expect(suggestionsList.scrollTop === highlightedItem.scrollHeight).to.be.true;
vm.$refs.autocomplete.highlight(8);
const suggestions = autocomplete.$refs.suggestions.$el.querySelector('.el-autocomplete-suggestion__wrap');
let suggestionsList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');
let highlightedItem = suggestionsList[8];
expect(highlightedItem.classList.contains('highlighted')).to.be.true;
expect(suggestions.scrollTop === highlightedItem.scrollHeight).to.be.true;
done();
});
}, 500);
......@@ -215,14 +210,12 @@ describe('Autocomplete', () => {
v-model="state"
:fetch-suggestions="querySearch"
placeholder="请输入内容autocomplete3"
@select="handleSelect"
></el-autocomplete>
`,
data() {
return {
restaurants: [],
state: '',
onceSelected: false
state: ''
};
},
methods: {
......@@ -251,29 +244,27 @@ describe('Autocomplete', () => {
{ 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
{ 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' }
];
},
handleSelect() {
this.onceSelected = true;
}
},
mounted() {
this.restaurants = this.loadAll();
}
}, true);
let elm = vm.$el;
let inputElm = elm.querySelector('input');
const autocomplete = vm.$refs.autocomplete;
let inputElm = vm.$el.querySelector('input');
inputElm.focus();
setTimeout(_ => {
vm.$refs.autocomplete.highlight(15);
autocomplete.highlight(15);
vm.$nextTick(_ => {
let suggestionsList = vm.$refs.autocomplete.$refs.suggestions.$el;
let highlightedItem = suggestionsList.children[11];
const suggestions = autocomplete.$refs.suggestions.$el;
const suggestionsList = suggestions.querySelectorAll('.el-autocomplete-suggestion__list li');
let highlightedItem = suggestionsList[11];
expect(highlightedItem.className).to.be.equal('highlighted');
vm.$refs.autocomplete.highlight(-5);
autocomplete.highlight(-5);
vm.$nextTick(_ => {
let highlightedItem = suggestionsList.children[0];
let highlightedItem = suggestionsList[0];
expect(highlightedItem.className).to.be.equal('highlighted');
});
done();
......@@ -321,13 +312,12 @@ describe('Autocomplete', () => {
this.restaurants = this.loadAll();
}
}, true);
let elm = vm.$el;
let inputElm = elm.querySelector('input');
let inputElm = vm.$el.querySelector('input');
inputElm.focus();
setTimeout(_ => {
let suggestionsList = vm.$refs.autocomplete.$refs.suggestions.$el;
expect(suggestionsList.style.display).to.be.equal('none');
let suggestions = vm.$refs.autocomplete.$refs.suggestions.$el;
expect(suggestions.style.display).to.be.equal('none');
done();
}, 500);
});
......
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