背景介紹

由于歷史遺留問題需要使用之前基于jQuery的代碼，其中還用到了一個(gè)基于jQuery的多選控件，環(huán)境是vue cli3

導(dǎo)入并配置jQuery

首先通過npm導(dǎo)入jQuery

npm install –save jquery

修改package.json同級(jí)的vue.config.js文件(如果沒有，則自己新建一個(gè))

const webpack = require("webpack"); module.exports = { // 調(diào)整 webpack 配置最簡(jiǎn)單的方式就是在 vue.config.js中的configureWebpack選項(xiàng)提供一個(gè)對(duì)象 //webpack ProvidePlugin創(chuàng)建一個(gè)全局變量，在webpack各個(gè)模塊內(nèi)都可以使用。configureWebpack: {plugins: [new webpack.ProvidePlugin({$: 'jquery', // 創(chuàng)建 '$'、'jQuery'、'window.jQuery' 三個(gè)變量指向依賴jqueryjQuery: 'jquery','window.jQuery': 'jquery'})]} }

Plan A(控件提供了npm包)

通過npm導(dǎo)入控件

npm install –save multiselect

這里我要說一句，一開始我也以為我要用的這個(gè)控件沒有npm包，在瀏覽其github的issue的時(shí)候發(fā)現(xiàn)有人正好提這個(gè)需求，然后下面人已經(jīng)在npm上找到了，所以有些控件使用問題先到issue里搜搜，很有可能已經(jīng)有別人幫你探過路了

在用到j(luò)Query和jQuery控件的地方引入

import $ from 'jquery'; require('multiselect')

Plan B(控件沒有提供npm包)

控件可能年代久遠(yuǎn)，沒有提供npm包，這時(shí)我們可以將下載下來的js(我這里是jquery.multi-select.js)放入"根目錄/src/asset/jquery-multi-select"目錄下
然后在頁(yè)面用到j(luò)Query和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;'>未關(guān)聯(lián)</div>",selectionHeader: "<div class='custom-header' style='background: #2C3E50;color:white;'>已關(guān)聯(lián)</div>" }); $('#resList').multiSelect('select', selectedList);

總結(jié)

以上是生活随笔為你收集整理的Vue cli3使用jQuery控件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。