Skip to content

V
vue-gic-aside-menu
Commit 20c5950b by 无尘
Options

add aside-menu

parent bc7e9ca2
Showing with 470 additions and 3 deletions
.babelrc 0 → 100644
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
.editorconfig 0 → 100644
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
.gitignore 0 → 100644
.DS_Store
node_modules/
npm-debug.log
yarn-error.log
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
\ No newline at end of file
README.md
vue-pligin
# 公共侧边栏菜单插件
公共左侧菜单插件
\ No newline at end of file
> A Vue.js area select Plugin
## Install
- 记得需要切换 公司源
- 换源: npm config set registry http://www.gicdev.com:7001/ 或者使用 nrm 切换
```shell
npm install @gic-test/vue-gic-aside-menu -S
```
## how to use
```
// main.js
import vueGicAsideMenu from '@gic-test/vue-gic-aside-menu'
Vue.use(vueGicAsideMenu)
// 使用页面
<vue-gic-aside-menu ref="leftMenus" :projectName="projectName" :collapseFlag="collapseFlag"></vue-gic-aside-menu>
data() {
return {
// 可传参数
projectName: '', // 当前项目名
collapseFlag: false, // 折叠参数
// 路由菜单
修改由插件内请求
}
}
methods: {
// 处理路由跳转(左侧菜单暂时不用,组件内处理)
},
```
> 注意,层级比较深的内部样式无法修改,需要使用页设置
```
.left-aside-contain {
/deep/ .el-submenu__title:hover {
background-color: #020b21;
}
}
使用页如果有加 scoped ,需要到公共样式中添加
.el-menu.el-menu--popup {
background: #020b21;
border-radius: 4px;
}
/* 左侧菜单 */
.leftBar-wrap .el-menu{
background-color: #020b21;
}
.leftBar-wrap .cardmenu-item .el-submenu__title,.leftBar-wrap .cardmenu-item .el-menu-item,.leftBar-wrap .cardmenu-item .el-submenu .el-menu-item{
height: 40px;
line-height: 40px;
}
.leftBar-wrap .el-submenu__title:hover {
background-color: #020b21;
}
.leftBar-wrap .cardmenu-item li.el-menu-item:hover i{
/*background-color: #409EFF;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item li.el-menu-item:hover span{
/*background-color: #409EFF;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item li.el-submenu:hover i{
/*background-color: #409EFF;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item li.el-submenu:hover span{
/*background-color: #409EFF;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item li.el-submenu .el-menu-item:hover label{
/*background-color: #409EFF;*/
color: #fff;
cursor: pointer;
}
.leftBar-wrap .cardmenu-item .el-submenu.is-active div.el-submenu__title i{
color: #fff;
}
.leftBar-wrap .cardmenu-item .el-submenu.is-active div.el-submenu__title span{
color: #fff;
}
.el-menu.el-menu--popup .el-menu-item.is-active label {
color: #fff;
}
```
dist/vue-gic-aside-menu.js.map 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>vue-gic-aside-menu</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/vue-gic-aside-menu.js"></script>
</body>
</html>
package.json 0 → 100644
{
"name": "@gic-test/vue-gic-aside-menu",
"description": "vue-gic-aside-menu Plugin",
"author": "fairyly <498745097@qq.com>",
"version": "1.1.43",
"license": "MIT",
"private": false,
"main": "dist/vue-gic-aside-menu.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
src/App.vue 0 → 100644
<template>
<div id="app">
<vue-gic-aside-menu ref="leftMenus" :projectName="projectName" :collapseFlag="collapseFlag"></vue-gic-aside-menu>
</div>
</template>
<script>
import vueGicAsideMenu from './lib/vue-gic-aside-menu'
export default {
name: 'app',
data () {
return {
projectName: '', // 当前项目名
// leftRouterOptions: {
collapseFlag: false, // 折叠参数
// 模块名
// leftModulesName: '公众号配置',
// 路由菜单
// leftMenuRouter: [
// {
// "menuCode": "xcx_02",
// "menuName": "主题设置",
// "project": "gic-web",
// "menuUrl": "themeSetting",
// "target": 0,
// "iconUrl": "icon-shequ-zhutifenxiang",
// "parentCode": "xcx_01",
// "isRouter": 1,
// "level": 3,
// "level4List": []
// },
// {
// "menuCode": "xcx_03",
// "menuName": "导航设置",
// "project": "gic-web",
// "menuUrl": "navSetting",
// "target": 0,
// "iconUrl": "icon-daohang-",
// "parentCode": "xcx_01",
// "isRouter": 1,
// "level": 3,
// "level4List": []
// },
// {
// "menuCode": "xcx_04",
// "menuName": "自定义页面",
// "project": "gic-web",
// "menuUrl": "custom",
// "target": 0,
// "iconUrl": "icon-icon_zidingyiyemianshezhi",
// "parentCode": "xcx_01",
// "isRouter": 1,
// "level": 3,
// "level4List": []
// },
// {
// "menuCode": "xcx_05",
// "menuName": "会员功能页面",
// "project": "gic-web",
// "menuUrl": "",
// "target": 0,
// "iconUrl": "icon-huiyuan-",
// "parentCode": "xcx_01",
// "isRouter": 1,
// "level": 3,
// "level4List": [
// {
// "menuCode": "xcx_06",
// "menuName": "会员体系",
// "project": "gic-web",
// "menuUrl": "member",
// "target": 0,
// "iconUrl": "",
// "parentCode": "xcx_05",
// "isRouter": 1,
// "level": 4,
// "level4List": null
// },
// {
// "menuCode": "xcx_07",
// "menuName": "会员中心",
// "project": "gic-web",
// "menuUrl": "membercenter",
// "target": 0,
// "iconUrl": "",
// "parentCode": "xcx_05",
// "isRouter": 1,
// "level": 4,
// "level4List": null
// }
// ]
// }
// ]
// },
}
},
components: {
vueGicAsideMenu
},
methods: {
// 处理路由跳转
// toLeftRouterView(val) {
// var that = this;
// // 模拟检查数据
// console.log(val);
// that.$router.push({
// path: val
// })
// }
}
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
</style>
src/lib/api.js 0 → 100644
import axios from 'axios';
import qs from 'qs';
axios.defaults.timeout = 10000;
let base = "http://192.168.1.164:8282/gic/";
const timeout = 10000;
let token = ''//sessionStorage.getItem('user');
/*
*
* 统一 get 请求方法
* @url: 请求的 url
* @params: 请求带的参数
* @header: 带 token
*
*/
export const getRequest = (url, params) => {
return axios({
method: 'get',
url: `${base}${url}`,
data: {},
params: params,
headers: {'content-type': 'application/x-www-form-urlencoded'},// "token": token
});
}
src/lib/index.js 0 → 100644
import vueGicAsideMenu from './vue-gic-aside-menu.vue' // 导入组件
const vueGicAside = {
install(Vue, options) {
Vue.component(vueGicAsideMenu.name, vueGicAsideMenu) // vueGicAsideMenu.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(vueGicAside);
}
export default vueGicAside
// export {
// vueGicAsideMenu
// }
src/main.js 0 → 100644
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
webpack.config.js 0 → 100644
var path = require('path')
var webpack = require('webpack')
module.exports = {
// entry: './src/main.js',
entry: './src/lib/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js',
filename: 'vue-gic-aside-menu.js',
library: 'vue-gic-aside-menu',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment