美文网首页
ViewUI Select实现失去焦点添加新项

ViewUI Select实现失去焦点添加新项

作者: EasyNetCN | 来源:发表于2020-01-17 17:46 被阅读0次

本示例基于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;
        }
      }
    }

相关文章

网友评论

      本文标题:ViewUI Select实现失去焦点添加新项

      本文链接:https://www.haomeiwen.com/subject/wdqhzctx.html