前言
在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将再次计数}})。如果还有其他更好的方法,欢迎各位同行给出建议。
摘要
以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。