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

在使用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 */
}