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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Python实现的建造者模式示例
2018/08/06 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
应聘自荐书
2013/10/08 职场文书
出国留学介绍信
2014/01/13 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
租房安全协议书
2014/08/20 职场文书
员工开除通知书
2015/04/25 职场文书
管理失职检讨书
2015/05/05 职场文书
聘任书范文大全
2015/09/21 职场文书
2016党校培训心得体会
2016/01/07 职场文书
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
Python OpenCV之常用滤波器使用详解
2022/04/07 Python