Skip to content

feat: Select组件 增加quickConfirm props支持回车直接选中第一个结果, fix #110 #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DebugIsFalse wants to merge 8 commits into
base: master
Choose a base branch
from
Open

feat: Select组件 增加quickConfirm props支持回车直接选中第一个结果, fix #110 #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0fab99f
feat: 添加默认选中值
DebugIsFalse Jul 10, 2022
a222375
fix: delete unusing code
DebugIsFalse Jul 10, 2022
6ecfdc7
feat: has word will selected
DebugIsFalse Jul 10, 2022
c7975c7
feat: 更新下拉选中逻辑
DebugIsFalse Jul 11, 2022
4125f4b
Update select.vue
DebugIsFalse Jul 11, 2022
f47ddbe
feat: add select default focusIndex = 0
DebugIsFalse Jul 25, 2022
d84f75f
feat: add focusIndex api
DebugIsFalse Jul 26, 2022
d965598
update Select example #145
DebugIsFalse Jul 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 82 additions & 2 deletions examples/routers/select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,32 @@
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</template>
</Select>
<Row :gutter="24" style="margin-top:10px">
<Col span="12">
<Select
v-model="model"
filterable
:remote-method="remoteMethod3"
default-label="北京"
:loading="loading3"
>
<Option v-for="(option, index) in options3" :value="option.value" :key="index">{{option.label}}</Option>
</Select>
</Col>
<Col span="12">
<Select
v-model="model1"
multiple
filterable
:remote-method="remoteMethod4"
:default-label="['北京', '深圳']"
:loading="loading4"
@on-set-default-options="setDefaultOptions"
>
<Option v-for="(option, index) in options4" :value="option.value" :key="index">{{option.label}}</Option>
</Select>
</Col>
</Row>
</div>
</template>
<script>
Expand Down Expand Up @@ -40,7 +66,36 @@ export default {
label: 'Canberra'
}
],
model: ''
model: '',

model2: 'beijing',
options3: [],
loading3: false,
model1: ['beijing', 'shenzhen'],
options4: [],
loading4: false,
list2: [
{
value: 'beijing',
label: '北京'
},
{
value: 'shanghai',
label: '上海'
},
{
value: 'shenzhen',
label: '深圳'
},
{
value: 'hangzhou',
label: '杭州'
},
{
value: 'guangzhou',
label: '广州'
}
]
}
},
created(){
Expand Down Expand Up @@ -74,7 +129,32 @@ export default {
this.cityList = this.cityList.concat(randomArray);
}, 500)
});
},
remoteMethod3 (query) {
if (query !== '') {
this.loading3 = true;
setTimeout(() => {
this.loading3 = false;
this.options3 = this.list2.filter(item => item.label.indexOf(query) > -1);
}, 200);
} else {
this.options3 = [];
}
},
remoteMethod4 (query) {
if (query !== '') {
this.loading4 = true;
setTimeout(() => {
this.loading4 = false;
this.options4 = this.list2.filter(item => item.label.indexOf(query) > -1);
}, 200);
} else {
this.options4 = [];
}
},
setDefaultOptions (options) {
this.options4 = options;
}
}
}
</script>
</script>
56 changes: 42 additions & 14 deletions src/components/select/select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,9 @@
}
},
mounted () {
if (this.allowCreate) {
this.focusIndex = -1;
}
// set the initial values if there are any
if (!this.remote && this.slotOptions.length > 0){
this.values = this.getInitialValue().map(value => {
Expand Down Expand Up @@ -299,7 +302,7 @@
values: [],
dropDownWidth: 0,
visible: false,
focusIndex: -1,
focusIndex: 0,
isFocused: false,
query: '',
initialLabel: this.label,
Expand All @@ -314,7 +317,8 @@
filterQueryChange: false, // #4273
slotOptionsMap: new Map(),
// fix Option hide, the model value cannot selected
isLocking: false
isLocking: false,
slotTimer: null
};
},
computed: {
Expand Down Expand Up @@ -464,6 +468,7 @@

this.visible = typeof force !== 'undefined' ? force : !this.visible;
if (this.visible){

this.dropDownWidth = this.$el.getBoundingClientRect().width;
this.$refs.dropdown.handleOnUpdatePopper();
}
Expand Down Expand Up @@ -508,11 +513,37 @@
},
reset(){
this.query = '';
this.focusIndex = -1;
this.focusIndex = 0;
this.unchangedQuery = true;
this.values = [];
this.filterQueryChange = false;
},
getFilterFocusIndex() {
const { slotOptions } = this;
let _focusIndex = 0;
const slotFirstIndex = slotOptions.findIndex((item) => item.proxy.isShow);
return slotFirstIndex === -1 ? _focusIndex : slotFirstIndex;
},
changeSelectedFocusIndex() {
if (this.slotTimer || this.allowCreate) return;
// use setTimeout avoid to get slotOptions length wrong;
this.slotTimer = setTimeout(() => {
const { slotOptions, values, getFilterFocusIndex, remoteMethod } = this;
let _focusIndex = 0;
if (typeof remoteMethod === "function") {
_focusIndex = getFilterFocusIndex();
} else if (values.length > 0) {
const lastSlotItem = values[values.length - 1];
_focusIndex = slotOptions.findIndex((slotItem) => slotItem.proxy.value === lastSlotItem.value && slotItem.proxy.isShow);
} else {
_focusIndex = getFilterFocusIndex();
}
if (_focusIndex === -1) _focusIndex = getFilterFocusIndex();
this.focusIndex = _focusIndex;
clearTimeout(this.slotTimer);
this.slotTimer = null;
});
},
handleKeydown (e) {
const key = e.key || e.code;
const keyCode = e.keyCode || e.which;
Expand Down Expand Up @@ -540,9 +571,8 @@
}
// enter
if (key === 'Enter') {
if (this.focusIndex === -1) return this.hideMenu();
const optionComponent = this.slotOptions[this.focusIndex];

const { slotOptions, focusIndex } = this;
const optionComponent = slotOptions[focusIndex];
// fix a script error when searching
if (optionComponent) {
const option = this.getOptionData(optionComponent.props.value);
Expand Down Expand Up @@ -570,7 +600,7 @@
let nearestActiveOption;
// find first show option in case of set init focusIndex
let firseIndex = null
if (direction > 0){
if (direction >= 0){
nearestActiveOption = -1;
for (let i = 0; i < slotOptions.length; i++){
const { proxy } = slotOptions[i];
Expand Down Expand Up @@ -627,7 +657,6 @@
if (!opt) return false;
return opt.props.value === option.value;
});

if (this.filterable){
const inputField = this.$el.querySelector('input[type="text"]');
if (!this.autoComplete) nextTick(() => inputField.focus());
Expand Down Expand Up @@ -754,11 +783,8 @@
}
},
query (query) {
// when query word, set focusIndex init
this.focusIndex = -1;

this.$emit('on-query-change', query);
const {remoteMethod, lastRemoteQuery} = this;
const {remoteMethod, lastRemoteQuery, filterable, visible, remote} = this;
const hasValidQuery = query !== '' && (query !== lastRemoteQuery || !lastRemoteQuery);
const shouldCallRemoteMethod = remoteMethod && hasValidQuery && !this.preventRemoteCall;
this.preventRemoteCall = false; // remove the flag
Expand All @@ -772,10 +798,12 @@
});
}
}
if (this.visible) {
// when query word, set focusIndex init
filterable && this.changeSelectedFocusIndex();
if (visible) {
this.$refs.dropdown.handleOnUpdatePopper();
}
if (query !== '' && this.remote) this.lastRemoteQuery = query;
if (query !== '' && remote) this.lastRemoteQuery = query;
},
isFocused (focused) {
const el = this.filterable ? this.$el.querySelector('input[type="text"]') : this.$el;
Expand Down