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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
基于datagrid框架的查询
2013/04/08 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
Python函数嵌套实例
2014/09/23 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
技术学校毕业生求职信分享
2013/12/02 职场文书
婚假请假条怎么写
2014/04/10 职场文书
男女朋友协议书
2014/04/23 职场文书
社区健康教育工作方案
2014/06/03 职场文书
公民授权委托书范本
2014/09/17 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
个人催款函范文
2015/06/24 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB