首页 前端知识 在 Vue 中使用 jQuery-UI 的踩坑记

在 Vue 中使用 jQuery-UI 的踩坑记

2024-09-06 00:09:09 前端知识 前端哥 908 208 我要收藏

在使用leaflet开发的时候,有一个需求要在图层的popup上编辑信息,需要一个AutoComplete的组件。但是popup支持的是html template,只能通过js拼接HTML标签实现。不得已引入了jquery-ui中的AutoComplete组件来完成,在vue中使用jquery-ui过程中踩了不少坑。

安装和引入 jQuery 和 jQuery UI

首先,我们需要在项目中安装 jQuery 和 jQuery UI。可以通过 npm 来安装

npm install jquery jquery-ui-dist

然后,在我们的 Vue 文件或 JavaScript 文件中引入它们:

import $ from 'jquery'
import 'jquery-ui-dist/jquery-ui.min.css'
import 'jquery-ui-dist/jquery-ui.min.js'

这时会发现报错:jQuery is not defined
我先查看了路径和引入顺序问题使用$、jquery、jQuery必须先引入jquery.js 并没有问题。然后在网上找了很多资料发现在vue+webpack环境中,jquery的第三方插件会报错。找了很多方法得到解决方法如下:

包装jquery

创建jquery的包装对象jquery-vendor.js

import $ from 'jquery'
window.$ = $
window.jQuery = $
export default $

需要引用jquery时引入

import $ from '../assets/jquery-vendor.js'
import 'jquery-ui-dist/jquery-ui.min.css'
import 'jquery-ui-dist/jquery-ui.min.js'

或者 直接全局引入

import $ from 'jquery'
window.$ = window.jQuery = $

然后再在需要的文件里引入

Autocomplete 下拉列表不显示

在使用Autocomplete的组件时,Autocomplete 的下拉列表一直没有显示,我一直以为是组件哪里使用的不对。所以我对照了官方文档的例子去查看代码,甚至用了官方文档的例子都没有显示出来。最后发现是被leaflet上地图的元素遮挡了。。。地图的 z-index 比 Autocomplete 的下拉列表的 z-index 大导致下拉列表被盖住了。

可以通过在 CSS 中设置 ui-autocomplete 的 z-index 来解决这个问题:

.ui-autocomplete {
  z-index: 1000; /* 或者更高的值,取决于你的页面的其他元素的 z-index */
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17732.html
标签
评论
发布的文章

jquery video视频轮播播放

2024-09-27 09:09:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!