背景介绍
由于历史遗留问题需要使用之前基于jQuery的代码，其中还用到了一个基于jQuery的多选控件，环境是vue cli3
导入并配置jQuery
首先通过npm导入jQuery
npm install –save jquery
修改package.json同级的vue.config.js文件(如果没有，则自己新建一个)
const webpack = require("webpack");
module.exports = {
// 调整 webpack 配置最简单的方式就是在 vue.config.js中的configureWebpack选项提供一个对象
//webpack ProvidePlugin创建一个全局变量，在webpack各个模块内都可以使用。
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery', // 创建 '$'、'jQuery'、'window.jQuery' 三个变量指向依赖jquery
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
]
}
}
Plan A(控件提供了npm包)
通过npm导入控件
npm install –save multiselect
这里我要说一句，一开始我也以为我要用的这个控件没有npm包，在浏览其github的issue的时候发现有人正好提这个需求，然后下面人已经在npm上找到了，所以有些控件使用问题先到issue里搜搜，很有可能已经有别人帮你探过路了
在用到jQuery和jQuery控件的地方引入
import $ from 'jquery';
require('multiselect')
Plan B(控件没有提供npm包)
控件可能年代久远，没有提供npm包，这时我们可以将下载下来的js(我这里是jquery.multi-select.js)放入”根目录/src/asset/jquery-multi-select”目录下
然后在页面用到jQuery和jQuery控件的地方引入
import $ from 'jquery';
import multiSelect from '@/asset/jquery-multi-select/jquery.multi-select'
使用
$('#resList').multiSelect({
selectableHeader: "<div class='custom-header' style='background: #2C3E50;color:white;'>未关联</div>",
selectionHeader: "<div class='custom-header' style='background: #2C3E50;color:white;'>已关联</div>"
});
$('#resList').multiSelect('select', selectedList);
发表回复