开发指南080-邮箱录入控件

一个很小的控件，就是录入时自动补全常用的后缀，很实用。

实现原理：

     基于<el-autocomplete>开发，最核心的是

       :fetch-suggestions="querySearchEmail"

        @select="onChange"
        @blur="onChange"

    // 邮箱自动填充后缀名
    querySearchEmail(queryString, callback) {
      const emailList = [
        { value: "@qq.com" },
        { value: "@126.com" },
        { value: "@163.com" },
        { value: "@sina.com" },
        { value: "@21cn.com" },
        { value: "@sohu.com" },
        { value: "@yahoo.com.cn" },
        { value: "@tom.com" },
        { value: "@etang.com" },
        { value: "@eyou.com" },
        { value: "@56.com" },
        { value: "@x.cn" },
        { value: "@chinaren.comsogou.com" },
        { value: "@citiz.com" }
      ];
      let results = [];
      let queryList = [];
      emailList.map(item => {
        queryList.push({ value: queryString.split("@")[0] + item.value });
      });
      results = queryString
        ? queryList.filter(this.createFilter(queryString))
        : queryList;
            callback(results);
    },

    onChange() {
      this.$emit("update:content", this.email);
    }

    用法：

     import emailInput from "@/qlmcomponents/inputControl/emailInput"

     components: { emailInput},

    <emailInput :content.sync="formData.contactEMail"></emailInput>