背景介紹

由于歷史遺留問題需要使用之前基于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 class='custom-header' style='background: #2C3E50;color:white;'>未關聯</div>",selectionHeader: "<div class='custom-header' style='background: #2C3E50;color:white;'>已關聯</div>" }); $('#resList').multiSelect('select', selectedList);

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。