菜单栏的隐藏与显示

首先需要配置jquery，不然会报错，达不到效果的，如果项目中早就下载了，那就往下看
1在package.json文件中的"dependencies": 下加入以下配置之后会出现install，下载即可

“jquery”: “^3.4.1”,

2之后在main.js中导入jquery
import $ from ‘jquery’

3在webpack.base.conf.js文件下导入以下配置
在最上方声明
var webpack=require(‘webpack’)

4之后在module.exports里加入以下配置

plugins: [
new webpack.ProvidePlugin({
$:“jquery”,
jQuery:“jquery”,
“windows.jQuery”:“jquery”
})
],

这样就可以了，
接下来就需要进入正题了，我此处菜单栏是利用div框起来的，还与很多种方法，我只介绍这一种，对于新手来说比较容易实现的，话不多说，直接粘代码
为了看得方便，将css写在了里面

menuBar () {
// var problemList = document.getElementById(“problemList”);
// var icon = document.getElementById(“icon”);
this.seen = !this.seen
if (this.seen) {
$(’#problemList’).animate({right: ‘0px’})
$(’.box1>i’).removeClass(‘el-icon-caret-left’)
$(’.box1>i’).addClass(‘el-icon-caret-right’)
} else {
$(’#problemList’).animate({right: ‘-180px’})
$(’.box1>i’).addClass(‘el-icon-caret-left’)
$(’.box1>i’).removeClass(‘el-icon-caret-right’)
}
}