element-ui 组件el-autocomplete使用踩坑记录 - 石耳 - 博客园
; "复制代码")
createFilter(queryString, filed) {
console.log("createFilter==" + queryString) return (item) => { switch (filed) { case 'cardNum': break
case 'cardPass': case 'userPhone': case 'userName': case 'userCardId': return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1); break
case 'mobile': return (item.phone.toLowerCase().indexOf(queryString.toLowerCase()) !== -1); break
default: break }
};
},
; "复制代码")
项目遇到一个比较麻烦的需求，保存用户填写的历史记录，项目使用的element-ui，自然就使用了el-autocomplete组件，然后就是各种踩坑，以下记录以下写代码过程中遇到的问题
1、下拉框高度修改：
el-autocomplete组件样式默认有一个最大高度，超出高度会滚动，如图显示的大概有7、8条的数据，需求要求展示10条所以只能修改组件样式。
如图可以看到有一个max-height属性，修改这个样式就可了，但是写了样式代码不起作用,组件修改了:popper-append-to-body="false"之后样式起作用了，原理不太清楚，哪位大神知道原因的麻烦告诉我一下，多谢
; "复制代码")
<style scoped lang="less">
/deep/ .inline-input { /deep/ .el-scrollbar__wrap {
max-height: 360px; /*no*/ }} </style>
; "复制代码")
2、一个页面有多个el-autocomplete组件，所以我需要传入使用这个组件的字段名，然后修改 fetch-suggestions方法为
:fetch-suggestions="((queryString, cb)=>{queryFun(queryString, cb,'userName')})用闭包的方式多传入一个字段的入参
; "复制代码")
<el-form-item label="使用人姓名：" prop="userName" :rules="[{ required: true, message: '请填写信息！',trigger: ['blur', 'change'] },
{ pattern: /^\[a-zA-Z\\u4e00-\\u9fa5\]{2,20}$/, message: '请填写正确信息！',trigger: \['blur', 'change'\] }\]">
<!\-\- <el-input @input="filterInput($event,'userName')" v-model="form.userName" autocomplete="off" maxlength="20"></el-input> -->
<el-autocomplete @blur.stop="saveLocal($event.target.value,'userName')" @input="filterInput($event,'userName')" class="inline-input" v-model="form.userName"
:fetch-suggestions="((queryString, cb)=>{queryFun(queryString, cb,'userName')})"
placeholder="请输入姓名" @select="((item)=>{handleSelect(item,'userName')})" :debounce=0 :popper-append-to-body="false">
</el-autocomplete>
</el-form-item>
; "复制代码")
3、需要保存的数据是校验通过后的数据，也就是输入完成blur之后再操作保存的逻辑，但是el-autocomplete组件blur事件不起作用，后查询资料说是因为click事件的优先级高于blur事件，所以要解决这个问题就解决事件冒泡问题，只需要使用vue的事件修饰符.stop就可以了，؏؏☝ᖗ乛◡乛ᖘ☝؏؏
@blur.stop="saveLocal($event.target.value,'userName')"
; "复制代码")
queryFun(queryString, cb, filed) {
console.log(filed)
let items = \[\]; switch (filed) { case 'cardNum': break
case 'cardPass':
items = JSON.parse(localStorage.getItem("passHistory")) ? JSON.parse(localStorage.getItem("passHistory")) : \[\]; break
case 'userPhone':
items = JSON.parse(localStorage.getItem("phoneHistory")) ? JSON.parse(localStorage.getItem("phoneHistory")) : \[\]; break
case 'userName':
items = JSON.parse(localStorage.getItem("userNameHistory")) ? JSON.parse(localStorage.getItem("userNameHistory")) : \[\]; break
case 'mobile': break
case 'userCardId':
items = JSON.parse(localStorage.getItem("userCardIdHistory")) ? JSON.parse(localStorage.getItem("userCardIdHistory")) : \[\]; break
default: break }
let results = queryString ? items.filter(this.createFilter(queryString, filed)) : items;
clearTimeout(this.timeout); this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
}
; "复制代码")
; "复制代码")
createFilter(queryString, filed) {
console.log("createFilter==" + queryString) return (item) => { switch (filed) { case 'cardNum': break
case 'cardPass': case 'userPhone': case 'userName': case 'userCardId': return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1); break
default: break }
};
},
; "复制代码")
4、第一次点击的时候会显示“请填写信息！”报错信息，再次点击选项就正常了，这个问题也是纠结了一阵儿，后来想起我的校验规则 trigger 写的是‘blur’，下拉框应该触发change事件，修改为
trigger: ['blur', 'change']，解决
; "复制代码")
handleSelect(item, filed) {
console.log(item);
console.log("handleSelect==" + filed);
let _this = this; switch (filed) { case 'cardNum': break
case 'cardPass': case 'userPhone': case 'userName':
_this.$set(_this.form, filed, item.value); break
case 'userCardId': this.form.userCardId = item.userCardId; this.getAge(item.userCardId); break
default: break }
},
; "复制代码")
5、姓名禁止输入数字等使用input事件，将不符合正则的内容替换成空，代码如下
; "复制代码")
filterInput(e, filed) {
console.log("filterInput=====")
console.log(e) switch (filed) { case 'cardNum': this.form\[filed\] = e.replace(/\[^\\a-\\z\\A-\\Z0-9\]/g, ''); this.form\[filed\] = this.form\[filed\].slice(0, 12); break
case 'cardPass': this.form\[filed\] = e.replace(/\[^\\a-\\z\\A-\\Z0-9\]/g, ''); this.form\[filed\] = this.form\[filed\].slice(0, 6); break
case 'userPhone': this.form\[filed\] = e.replace(/\[^0-9\]/g, ''); this.form\[filed\] = this.form\[filed\].slice(0, 11); break
case 'userName': this.form\[filed\] = e.replace(/\[^\\a-\\z\\A-\\Z\\u4e00-\\u9fa5\]/g, ''); this.form\[filed\] = this.form\[filed\].slice(0, 20); break
case 'mobile': this.form\[filed\] = e.replace(/\[^0-9\]/g, ''); this.form\[filed\] = this.form\[filed\].slice(0, 11); break
case 'userCardId': this.form\[filed\] = e.replace(/\[^0-9Xx\]/g, ''); this.form\[filed\] = this.form\[filed\].slice(0, 18); break
default: this.form\[filed\] = e.replace(/\[\\u4e00-\\u9fa5\]/g, ''); break } // this.saveLocal(this.form\[filed\], filed)
this.$forceUpdate();
},
; "复制代码")
6、校验通过后存储到localStorage，总觉得代码有点重复，不过改bug比较着急，大神有更好的写法，欢迎评论区留言
; "复制代码")
// 保存验证通过的信息
saveLocal(val, filed) { var reg = ""; switch (filed) { case 'cardNum':
reg = /\[0-9a-zA-Z\]{12}/; if (reg.test(val)) { // 存储正确卡号到历史信息
this.cardHistory.unshift({ "cardNum": val }); // 历史消息去重
var hash = {}; this.cardHistory = this.cardHistory.reduce(function (item, next) {
hash\[next.cardNum\] ? '' : hash\[next.cardNum\] = true && item.push(next); return item
}, \[\]); if (this.cardHistory.length > 10) { this.cardHistory.pop();
}
localStorage.setItem("cardList", JSON.stringify(this.cardHistory));
} break
case 'cardPass':
reg = /\[0-9a-zA-Z\]{6}/; if (reg.test(val)) { // 存储正确卡号到历史信息
this.passHistory.unshift({ "value": val }); // 历史消息去重
var hash = {}; this.passHistory = this.passHistory.reduce(function (item, next) {
hash\[next.value\] ? '' : hash\[next.value\] = true && item.push(next); return item
}, \[\]); if (this.passHistory.length > 10) { this.passHistory.pop();
}
localStorage.setItem("passHistory", JSON.stringify(this.passHistory));
} break
case 'userPhone':
reg = /^1\[3-9\]\\d{9}$/; if (reg.test(val)) { // 存储正确卡号到历史信息
this.phoneHistory.unshift({ "value": val }); // 历史消息去重
var hash = {}; this.phoneHistory = this.phoneHistory.reduce(function (item, next) {
hash\[next.value\] ? '' : hash\[next.value\] = true && item.push(next); return item
}, \[\]); if (this.phoneHistory.length > 10) { this.phoneHistory.pop();
}
localStorage.setItem("phoneHistory", JSON.stringify(this.phoneHistory));
} break
case 'userName':
reg = /^\[a-zA-Z\\u4e00-\\u9fa5\]{2,20}$/; if (reg.test(val)) { // 存储正确卡号到历史信息
this.userNameHistory.unshift({ "value": val }); // 历史消息去重
var hash = {}; this.userNameHistory = this.userNameHistory.reduce(function (item, next) {
hash\[next.value\] ? '' : hash\[next.value\] = true && item.push(next); return item
}, \[\]); if (this.userNameHistory.length > 10) { this.userNameHistory.pop();
}
localStorage.setItem("userNameHistory", JSON.stringify(this.userNameHistory));
} break
case 'mobile': break
case 'userCardId':
reg = /^\[1-9\]\\d{5}(18|19|20)\\d{2}((0\[1-9\])|(1\[0-2\]))((\[0-2\]\[1-9\])|10|20|30|31)\\d{3}\[0-9Xx\]$/; if (reg.test(val)) { // 存储正确卡号到历史信息
this.userCardIdHistory.unshift({ "value": val }); // 历史消息去重
var hash = {}; this.userCardIdHistory = this.userCardIdHistory.reduce(function (item, next) {
hash\[next.value\] ? '' : hash\[next.value\] = true && item.push(next); return item
}, \[\]); if (this.userCardIdHistory.length > 10) { this.userCardIdHistory.pop();
}
localStorage.setItem("userCardIdHistory", JSON.stringify(this.userCardIdHistory));
} break
default: break }
},
; "复制代码")
记录一下折腾一天的工作成果，嗯~下班
Original url: Access
Created at: 2020-03-24 12:14:33
Category: default
Tags: none
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论