前言

在vue项目中，当一些特定的功能需要实现时，mvvm模式并不容易实现。因此，引入jquery包来满足需求

jquery中的触发器事件可以自己在mounted中定义。如果需要使用vue中的数据，就不能直接使用this.msg，需要单独定义const _this=this。

储存这个之后。可以在事件中使用_this.msg数据。

要求：可以在品牌处输入，会有下拉框进行模糊搜索，也可以从下拉框中选择。输入后，检查下拉框中是否存在该值。对焦时，会显示在蓝色方框中。如果它不存在，它将显示在一个红色框中。如果存在，将在绿色框(即带有输入建议的输入框)中提示

问题：使用element-ui中的el-autocomplete组件，我们开始通过失焦事件进行验证。但是如果选择了下拉框的某个值(选择后下拉框的值会赋给上面的输入框)，赋之前会触发失焦事件，所以失焦时用输入框的值来判断是错误的。在选择下拉框之前更改输入框。变更事件也有同样的bug，所以没有办法，只能引入jquery自己完成。

点击输入框后，通过占位符判断是否是品牌下的输入框，因为每个输入框都有这个类，如果有，则添加一个类名，如果第一次点击的位置和第二次点击的位置都是品牌下的输入框，则执行相应的逻辑判断。

执行逻辑后，在其他地方的输入列表中删除相同的类名

const _ this=this $(“body”)。委托('。el-input _ _ inner '，' focus '，函数(e){//因为是动态生成的，所以选择这种方式监听事件if (e.target.placeholder==='请输入brand') {//trigger $ (this)。add class(' inputlist ')//如果($()，则在input list中添加一个类名。input list’)。length===2) {//判断下一次点击的位置，如果下一个焦点位置仍然是品牌下的输入框从第一个输入框(！$('.input list’)。不是(这个)。val()) { $('。input list’)。不是(这个)。css('border '，' 1px solid # 67c 23 a '))else { let num=0 for(let j=0；j _ this . goodsbrands . length；J) {if ($(')。input list’)。不是(这个)。val ()===_ this。goodsbrands [j]。value){ num=1 break } } if(num===0){ _ this。$ message.error('输入的品牌不存在。$('.input list’)。不是(这个)。css('边框'，' 1px实心#F56C6C') } else { $('。input list’)。不是(这个)。css('border '，1pxsolid # 67c23a')}} $('。El-input _ _ inner ')。不是(这个)。remove class(' inputList ')//逻辑执行完毕后，删除当前焦点位置之外的input list类，以保持的长度。inputList最多2}})这里是模拟输入框的变化事件。因此，在这里你可以判断它是否是你想要的位置。如果是，给一个标志位getindex。当你点击品牌下的输入框时，如果第二次点击的位置不是该品牌其他位置的输入框，做一个逻辑判断

此事件也将在$(文档)时触发。点击(函数(e){//焦点被触发。并在焦点事件后触发if(e . target . class list[1]==' input list '){//判断对应位置的点击是否_this.getIndex=1 //用于标记焦点事件后的下一次点击是否触发焦点，如果触发则以第二次点击作为第一次重新判断，等到下一次点击再判断} else {if $()。input list’)。eq(0)。val()) { $('。input list’)。eq(0)。css('border '，' 1px solid # 67c 23 a '))else { let num=0 for(let j=0；j _ this . goodsbrands . length；J) {if ($(')。input list’)。eq (0)。val ()===_ this。goodsbrands [j]。value){ num=1 break } } if(num===0){ _ this。$ message.error('输入的品牌不存在。$('.input list’)。eq(0)。css('边框'，' 1px实心#F56C6C') } else { $('。input list’)。eq(0)。css('border '，1pxsolid # 67c23a')}} $('。El-input _ _ inner ')。removeclass ('inputlist') _ this。getIndex=0//每次第二次单击另一个位置时，getIndex将再次计数}})。如果还有其他更好的方法，欢迎各位同行给出建议。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。