上海城市建设档案馆网站,一个正规平台维护多久,南昌网络营销外包公司全力以赴,网站优化快速排名软件背景介绍
由于历史遗留问题需要使用之前基于jQuery的代码#xff0c;其中还用到了一个基于jQuery的多选控件#xff0c;环境是vue cli3
导入并配置jQuery
首先通过npm导入jQuery
npm install –save jquery修改package.json同级的vue.config.js文件(如果没有#xff0c;…背景介绍
由于历史遗留问题需要使用之前基于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 三个变量指向依赖jqueryjQuery: 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 classcustom-header stylebackground: #2C3E50;color:white;未关联/div,selectionHeader: div classcustom-header stylebackground: #2C3E50;color:white;已关联/div
});
$(#resList).multiSelect(select, selectedList);
