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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现带进度条的轮播图
Sep 13 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
配置支持SSI
2006/11/25 PHP
获得Google PR值的PHP代码
2007/01/28 PHP
PHP的分页功能
2007/03/21 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Python实现在线音乐播放器
2017/03/03 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
详解python配置虚拟环境
2019/04/08 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
顶撞领导检讨书
2014/01/29 职场文书
环保建议书
2014/03/12 职场文书
环保公益广告语
2014/03/13 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
毕业实习计划书
2015/01/16 职场文书