messchow-email-input
v1.1.0
Published
A EmailInput for Vue.js.
Readme
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:"[email protected]", //邮箱地址
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 字段去排序
}))
