Vue项目中使用jquery的简单方法


Posted in jQuery onMay 16, 2019

前言

在vue项目中,需要实现某些特定的功能时,使用mvvm模式不易实现。因此引入jquery包来完成需求

jquery中的触发事件可以自己定义在mounted中,如果需要使用vue中data的数据,直接使用this.msg是无法使用的,需要另外定义const _this = this,

存储this.之后便可以在事件中使用_this.msg数据了。

需求:在品牌处可以输入,并且会有模糊搜索的下拉框,也可下拉选择,在输入完毕后检验值是否在下拉框中存在,聚焦时蓝色边框,change时如果不存在则红框显示,存在的话就绿框提示,(就是带输入建议的输入框)

问题: 使用element-ui中的el-autocomplete组件,开始通过失焦事件来验证,但是如果选择了下拉框某个值时(选中后会将下拉框的值赋给上面的输入框),失焦事件触发会在赋值之前,因此拿失焦时输入框的值来进行判断时错误的,在先改变输入框的值后再去选择下拉框,change事件有同样的bug,没办法只能自己引入jquery来完成

Vue项目中使用jquery的简单方法Vue项目中使用jquery的简单方法

点击输入框后,通过placeholder判断是否是品牌下的的输入框,因为每个输入框都有这个类,如果是的话则增加一个类名,如果第一次点击的位置和第二次鼠标点击的位置都是品牌下的输入框,则执行相应的逻辑判断,

在逻辑执行完后就删除其他处同样的类名inputList

const _this = this 
$('body').delegate('.el-input__inner', 'focus', function(e) { // 因为是动态生成的,所以选择这种方式来监听事件
   if (e.target.placeholder === '请输入品牌') { // 当聚焦在品牌输入框时触发
    $(this).addClass('inputList') // 加上一个类名inputList
    if ($('.inputList').length === 2) { // 判断下一次点击的位置,当从第一个输入框改值后下一个聚焦位置还是品牌下的输入框时
     if (!$('.inputList').not(this).val()) {
      $('.inputList').not(this).css('border', '1px solid #67c23a')
     } else {
      let num = 0
      for (let j = 0; j < _this.goodsBrands.length; j++) {
       if ($('.inputList').not(this).val() === _this.goodsBrands[j].value) {
        num += 1
        break
       }
      }
      if (num === 0) {
       _this.$message.error('输入的品牌不在品牌列表中')
       $('.inputList').not(this).css('border', '1px solid #F56C6C')
      } else {
       $('.inputList').not(this).css('border', '1px solid #67c23a')
      }
     }
    }

    $('.el-input__inner').not(this).removeClass('inputList') // 逻辑执行完之后删除当前聚焦位置以外的inputList类,这样就保持.inputList长度最多为2
   }
  })

此处是为了模拟出输入框的change事件,因为在聚焦时会添加inputList这个类名。所以这里可以判断是否是自己想要的位置,如果是的话给一个标志位getindex,当点击到品牌下的输入框时,如果第二次的点击位置不是品牌其他位置的输入框,则进行逻辑判断

$(document).click(function(e) { // focus触发时也会触发这个事件,并且触发在focus事件之后
   if (e.target.classList[1] === 'inputList') { // 判断是否点击在对应位置
    _this.getIndex = 1 // 用于标志在聚焦事件触发后的下一次点击是否同样会触发聚焦,如果是则把第二次点击当成第一次重新判断,等到下一次点击再来判断
   } else {
    if (_this.getIndex === 1) { 
     if (!$('.inputList').eq(0).val()) {
      $('.inputList').eq(0).css('border', '1px solid #67c23a')
     } else {
      let num = 0
      for (let j = 0; j < _this.goodsBrands.length; j++) {
       if ($('.inputList').eq(0).val() === _this.goodsBrands[j].value) {
        num += 1
        break
       }
      }
      if (num === 0) {
       _this.$message.error('输入的品牌不在品牌列表中')
       $('.inputList').eq(0).css('border', '1px solid #F56C6C')
      } else {
       $('.inputList').eq(0).css('border', '1px solid #67c23a')
      }
     }
     $('.el-input__inner').removeClass('inputList')
     _this.getIndex = 0 // 每次第二次点击了其他位置时,getIndex重新计数
    }
   }
  })

小白一枚,如果有其他更好的方法,欢迎各位同行指教,多多交流

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JQuery常见节点操作实例分析
May 15 #jQuery
JQuery属性操作与循环用法示例
May 15 #jQuery
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
jquery 验证用户名是否重复代码实例
May 14 #jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 #jQuery
You might like
PHP自定义大小验证码的方法详解
2013/06/07 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
python万年历实现代码 含运行结果
2017/05/20 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python ftplib模块使用代码实例
2019/12/31 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
PageFactory设计模式基于python实现
2020/04/14 Python
python实现批量命名照片
2020/06/18 Python
UML设计模式笔试题
2014/06/07 面试题
花店创业计划书范文
2014/02/07 职场文书
美术教师岗位职责
2014/03/18 职场文书
贷款担保申请书
2014/05/20 职场文书
心理学专业求职信
2014/06/16 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
公证委托书格式
2014/09/13 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
世界遗产的导游词
2015/02/13 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS