本示例基于ViewUI 4.1.1,4.x版本Select支持了创建新项的功能。此示例是在登录页实现类似浏览器的记住密码的功能,仅供参考。
<Select
ref="username"
v-if="rememberMeShow"
v-model="username"
size="large"
class="form-control user-select"
allow-create
clearable
filterable
@on-create="handleUsernameCreate"
@on-change="handleUsernameChange"
@blur.native.capture="handleUsernameBlur"
>
handleUsernameCreate(query) {
let user = this.users.find(el => el.key == query);
if (user == undefined) {
this.username = query;
this.users.push({ key: query, value: "" });
this.password = "";
}
},
handleUsernameChange(value) {
let user = this.users.find(el => el.key == value);
if (user != undefined) {
this.password = user.value;
}
},
handleUsernameBlur() {
let query = this.$refs.username.query;
if (null != query && query.length > 0) {
let user = this.users.find(el => el.key == query);
if (user == undefined) {
this.$refs.username.clearSingleSelect();
this.users.push({ key: query, value: "" });
this.$nextTick(() => {
this.username = query;
this.password = "";
});
} else {
this.username = user.key;
this.password = user.value;
}
}
}
网友评论