前言
需求:输入开票主体:该操作框为下拉输入框,用户可选择历史充值过的开票主体,也可以重新输入新的开票主体
此处根据需求实现“开票主体历史搜索建议”功能,按照需求的下拉框 el-select 不完全符合产品设计;
这里适合产品的是支持下拉选择历史选项的文本输入框;支持输入新的数据,或者选择之前有输入过的历史数据,新数据会放入存储历史集合,并在集合大小超出设定最大值后,按先进先出原则,清除历史记录。相对下拉组件,带输入建议的文本框组件 el-autocomplete 符合此需求。
功能实现
Vue 页面关键代码
注意要引入组件 el-autocomplete 才能使用。
<el-form ref="protocol_form" :model="protocolInfo">
<el-form-item label="请选择支付方式:" class="labelClass" required>
<el-form-grid style="float: left;">
<template>
<el-radio-group v-model="protocolInfo.payWay">
<el-radio :label="0"> <img src="./img/aliPay2.png"/> </el-radio>
<el-radio :label="1"> <img src="./img/card.png"/> </el-radio>
</el-radio-group>
</template>
</el-form-grid>
</el-form-item>
<el-form-item label="请输入开票主体:" class="labelClass" required>
<el-form-grid style="float: left;">
<el-autocomplete
v-model="protocolInfo.invoiceAccount"
:fetch-suggestions="querySearch"
placeholder="请输入内容"/>
</el-form-grid>
</el-form-item>
<el-form-item style="float: left">
<el-form-grid>
<template>
<el-checkbox v-model="protocolInfo.know"></el-checkbox>本人已知悉:付款账号的户名需与开票抬头(即合同主体)保持一致,否则会影响发票索取。
</template>
</el-form-grid>
</el-form-item>
</el-form>
Js 文件关键代码
Js 存储查询记录及渲染历史记录;文本框获取鼠标焦点事件,fetch-suggestions 方法返回输入建议,新的输入建议可以通过 localStorage 放入前端本地存储中,最多保留 6 条开票主体记录;支持输入新的开票主体,点击同意按钮时触发文本存储校验,新的文本会放入历史记录集合,并在超出 6 条记录时,清除第一条记录。
export default {
data: function () {
return {
// 协议信息
protocolInfo: {
payWay: 0,
invoiceAccount: '',
know: false,
}
}
},
methods: {
// 点击同意
agreeProtocol: function () {
this.handleSearchHistory()
},
// 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它
querySearch (queryString, cb) {
var invoiceAccountHistory = this.getInvoiceAccountHistory()
var results = queryString ? invoiceAccountHistory.filter(this.createFilter(queryString)) : invoiceAccountHistory
cb(results)
},
createFilter (queryString) {
return (invoiceAccount) => {
return (invoiceAccount.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
// 存放查询记录
handleSearchHistory () {
let searchWordArray = localStorage.getItem('searchWord')
searchWordArray = searchWordArray.split(',')
if (searchWordArray.indexOf(this.protocolInfo.invoiceAccount) === -1) {
searchWordArray.unshift(this.protocolInfo.invoiceAccount)
}
if (searchWordArray.length > 6) {
searchWordArray.pop()
}
localStorage.setItem('searchWord', searchWordArray)
},
// 渲染历史记录
getInvoiceAccountHistory () {
let searchWordArray = localStorage.getItem('searchWord')
searchWordArray = searchWordArray.split(',')
let invoiceAccountHistory = []
for (let i=0; i < searchWordArray.length; i++) {
let item = {
"value": searchWordArray[i],
"label": searchWordArray[i]
}
invoiceAccountHistory.push(item)
}
return invoiceAccountHistory
}
}
}
页面效果