/messchow-email-input

类似QQ邮箱的邮箱输入框，增删改查、根据输入给邮箱自动排序。

Primary LanguageJavaScript

messchow-email-input

类似QQ邮箱的邮箱输入框，增删改查、根据输入给邮箱自动排序。

install

npm i messchow-email-input -s

use

import emailInput from 'messchow-email-input'
import 'messchow-email-input/lib/messchow-email-input.css'
Vue.use(emailInput)

props parameter

props type introduce
value.sync Array 邮箱初始化数组
contactsFieldName String 接口返回数据中,联系人的字段名
optionFormat String input中下拉框option的label的数据格式，列如contactsName (email)中，contactsName、email都为接口返回对象的字段名
tagFormat String input中tag的label的数据格式，同理optionFormat
options Array 下拉框的数组,如果value.sync中的邮箱和options匹配，会自动选中

options的格式

//后台返回的接口数据
apiDatas:[
  {
    email:"quincy@freecodecamp.org", //邮箱地址
    contactsName:'Kane', //联系人名称
    contactsNameInitials:'KANE', //联系人名称大写（自选）
    company:'company', //联系人公司名称 （自选）
    companyInitials:'COMPANY', //公司名称大写 （自选）
  }，
  ....
]

//转换数据格式
let options = this.apiDatas.map(o => ({
  value: o.email,
  keyWord: [o.email, o.contactsName, o.contactsNameInitials, o.company, o.companyInitials] //关键字搜索，input 输入会根据 keyWord 字段去排序
}))