1.1.0 • Published 2 years ago
messchow-email-input v1.1.0
messchow-email-input
类似QQ邮箱的邮箱输入框，增删改查、根据输入给邮箱自动排序。
install
npm i messchow-email-input -suse
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 字段去排序
}))