Skip to content

V
vue-office-aside
Commit 3eeb5ed9 by 无尘
Options

add: 增加好办后台侧边栏插件

parent c30ea4db
Showing with 908 additions and 2 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
# 左侧菜单
\ No newline at end of file
# 好办后台 公共左侧菜单 插件
> A Vue.js aside-menu Plugin
## Install
- 记得需要切换 公司源
- 换源: npm config set registry http://www.gicdev.com:7001/ 或者使用 nrm 切换
```shell
npm install @gic-test/vue-office-aside -S
```
## how to use
```
// main.js
import vueOfficeAside from '@gic-test/vue-office-aside'
Vue.use(vueOfficeAside)
// 使用页面
<vue-office-aside ref="leftMenus" :projectName="projectName" :collapseFlag="collapseFlag"></vue-office-aside>
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-office-aside.js 0 → 100644
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-office-aside",[],t):"object"==typeof exports?exports["vue-office-aside"]=t():e["vue-office-aside"]=t()}("undefined"!=typeof self?self:this,function(){return function(e){function t(a){if(r[a])return r[a].exports;var n=r[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,a){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/dist/",t(t.s=3)}([function(e,t,r){"use strict";var a=r(11),n=r.n(a);t.a={name:"vue-office-aside",props:["collapseFlag","projectName"],data:function(){return{repProjectName:"gic-web",asideHeight:"0px",pathName:"",leftCollapse:!1,leftModuleName:"",menuLeftRouter:[],baseUrl:"",selectMenu:""}},beforeMount:function(){var e=this,t=window.location.origin;console.log("当前host:",t),"-1"!=t.indexOf("localhost")?e.baseUrl="http://gicdev.demogic.com":e.baseUrl=t},methods:{handleOpen:function(e,t){},handleSelect:function(e,t){var r=this;console.log(e,t),r.selectMenu=e},setNewData:function(e){var t=this;e.forEach(function(e,t){null==e.level4List||0==e.level4List.length?e.menuUrl="/"+e.menuUrl:e.level4List.forEach(function(e,t){e.menuUrl="/"+e.menuUrl})}),console.log("处理后的左侧菜单 list:",e),t.menuLeftRouter=e},toRouter:function(e){this.$emit("toLeftRouterView","/"+e)},refreshRoute:function(){var e=this;e.routePathName=window.location.hash.split("/")[1],-1!=e.routePathName.indexOf("?")&&(e.routePathName=e.routePathName.split("?")[0]),-1!=e.routePathName.indexOf("/")&&(e.routePathName=e.routePathName.split("/")[0]),console.log("routePathname:",e.routePathName),e.pathName=e.routePathName,e.getLeftMenu()},getLeftMenu:function(){var e=this,t={project:e.repProjectName,path:e.pathName,requestProject:e.repProjectName};e.axios.post(e.baseUrl+"/api-auth/get-current-memu-data",n.a.stringify(t)).then(function(t){var r=t.data;if(0==r.errorCode)return r.result?(e.leftModuleName=r.result.level2.menuName,e.setNewData(r.result.leftMenu),r.result.level4?void(e.selectMenu="/"+r.result.level4.menuUrl):void(r.result.level3&&(e.selectMenu="/"+r.result.level3.menuUrl))):void console.log("resData.result: ",r.result);e.$message.error({duration:1e3,message:r.message})}).catch(function(t){console.log(t),e.$message.error({duration:1e3,message:t.message})})}},watch:{$route:{handler:function(e,t){console.log("左侧菜单插件获取当前路由:",e)},deep:!0},collapseFlag:function(e,t){this.leftCollapse=e},projectName:function(e,t){this.repProjectName=e||"gic-web"}},mounted:function(){console.log("传递的左侧菜单参数:",this.projectName,this.$route);var e=this;e.repProjectName=e.projectName||"gic-web",e.asideHeight=(document.documentElement.clientHeight||document.body.clientHeight)-64+"px",e.pathName=window.location.hash.split("/")[1],-1!=e.pathName.indexOf("?")&&(e.pathName=e.pathName.split("?")[0]),e.getLeftMenu(),e.leftCollapse=e.collapseFlag}}},function(e,t,r){"use strict";var a=Object.prototype.hasOwnProperty,n=function(){for(var e=[],t=0;t<256;++t)e.push("%"+((t<16?"0":"")+t.toString(16)).toUpperCase());return e}();t.arrayToObject=function(e,t){for(var r=t&&t.plainObjects?Object.create(null):{},a=0;a<e.length;++a)void 0!==e[a]&&(r[a]=e[a]);return r},t.merge=function(e,r,n){if(!r)return e;if("object"!=typeof r){if(Array.isArray(e))e.push(r);else{if("object"!=typeof e)return[e,r];(n.plainObjects||n.allowPrototypes||!a.call(Object.prototype,r))&&(e[r]=!0)}return e}if("object"!=typeof e)return[e].concat(r);var o=e;return Array.isArray(e)&&!Array.isArray(r)&&(o=t.arrayToObject(e,n)),Array.isArray(e)&&Array.isArray(r)?(r.forEach(function(r,o){a.call(e,o)?e[o]&&"object"==typeof e[o]?e[o]=t.merge(e[o],r,n):e.push(r):e[o]=r}),e):Object.keys(r).reduce(function(e,a){var o=r[a];return Object.prototype.hasOwnProperty.call(e,a)?e[a]=t.merge(e[a],o,n):e[a]=o,e},o)},t.decode=function(e){try{return decodeURIComponent(e.replace(/\+/g," "))}catch(t){return e}},t.encode=function(e){if(0===e.length)return e;for(var t="string"==typeof e?e:String(e),r="",a=0;a<t.length;++a){var o=t.charCodeAt(a);45===o||46===o||95===o||126===o||o>=48&&o<=57||o>=65&&o<=90||o>=97&&o<=122?r+=t.charAt(a):o<128?r+=n[o]:o<2048?r+=n[192|o>>6]+n[128|63&o]:o<55296||o>=57344?r+=n[224|o>>12]+n[128|o>>6&63]+n[128|63&o]:(a+=1,o=65536+((1023&o)<<10|1023&t.charCodeAt(a)),r+=n[240|o>>18]+n[128|o>>12&63]+n[128|o>>6&63]+n[128|63&o])}return r},t.compact=function(e,r){if("object"!=typeof e||null===e)return e;var a=r||[],n=a.indexOf(e);if(-1!==n)return a[n];if(a.push(e),Array.isArray(e)){for(var o=[],i=0;i<e.length;++i)e[i]&&"object"==typeof e[i]?o.push(t.compact(e[i],a)):void 0!==e[i]&&o.push(e[i]);return o}return Object.keys(e).forEach(function(r){e[r]=t.compact(e[r],a)}),e},t.isRegExp=function(e){return"[object RegExp]"===Object.prototype.toString.call(e)},t.isBuffer=function(e){return null!==e&&void 0!==e&&!!(e.constructor&&e.constructor.isBuffer&&e.constructor.isBuffer(e))}},function(e,t,r){"use strict";var a=String.prototype.replace,n=/%20/g;e.exports={default:"RFC3986",formatters:{RFC1738:function(e){return a.call(e,n,"+")},RFC3986:function(e){return e}},RFC1738:"RFC1738",RFC3986:"RFC3986"}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=r(4),n={install:function(e,t){e.component(a.a.name,a.a)}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(n),t.default=n},function(e,t,r){"use strict";function a(e){r(5)}var n=r(0),o=r(14),i=r(10),l=a,s=i(n.a,o.a,!1,l,"data-v-8ed7ad48",null);t.a=s.exports},function(e,t,r){var a=r(6);"string"==typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);r(8)("5f83eb26",a,!0,{})},function(e,t,r){t=e.exports=r(7)(!1),t.push([e.i,'.attention-wrap .item-label[data-v-8ed7ad48]{font-size:14px;color:#606266;margin-bottom:30px}.attention-wrap .item-label span[data-v-8ed7ad48]{display:inline-block;width:80px}.left-aside-contain[data-v-8ed7ad48]{display:inline-block}.left-aside-contain[data-v-8ed7ad48]::-webkit-scrollbar{width:0;height:0}.left-aside-contain/deep/.el-submenu .el-submenu__title[data-v-8ed7ad48]:hover{background-color:#f9fafc}.leftBar-wrap[data-v-8ed7ad48]{height:100%;display:inline-block;overflow:auto}.leftBar-wrap[data-v-8ed7ad48]::-webkit-scrollbar{width:0;height:0}.leftBar-wrap .cardmenu[data-v-8ed7ad48]{flex:0 0 200px;width:200px;height:100%;overflow-y:auto;overflow-x:hidden;background-color:#f9fafc;cursor:pointer;transition:all .2s ease}.leftBar-wrap .cardmenu[data-v-8ed7ad48]::-webkit-scrollbar{width:0;height:0}.leftBar-wrap .collapse[data-v-8ed7ad48]{transition:all .3s ease;flex:0 0 64px;width:64px;overflow:hidden}.leftBar-wrap .cardtitle[data-v-8ed7ad48]{font-size:20px;color:#fff;padding-left:20px;height:56px;line-height:56px}.leftBar-wrap .cardmenu-item/deep/.el-menu-item-group .el-menu-item-group__title[data-v-8ed7ad48]{display:none}.leftBar-wrap .cardmenu-item/deep/.el-menu-item span[data-v-8ed7ad48],.leftBar-wrap .cardmenu-item/deep/.el-submenu .el-menu-item label[data-v-8ed7ad48],.leftBar-wrap .cardmenu-item/deep/.el-submenu__title i[data-v-8ed7ad48]{color:#c0c4cc}.leftBar-wrap .cardmenu-item .el-menu-item.is-active[data-v-8ed7ad48]{color:#fff;background-color:#1890ff}.leftBar-wrap .cardmenu-item/deep/.el-menu-item.is-active span[data-v-8ed7ad48],.leftBar-wrap .cardmenu-item/deep/.el-submenu .el-menu-item.is-active label[data-v-8ed7ad48]{color:#fff}.el-menu.el-menu--popup[data-v-8ed7ad48]{background:#020b21;border-radius:4px}.el-menu--popup .el-menu-item[data-v-8ed7ad48]{height:40px;line-height:40px}.el-menu--popup .el-menu-item label[data-v-8ed7ad48]{display:block;margin-left:-34px;color:#c0c4cc;cursor:pointer}.el-menu--popup .el-menu-item[data-v-8ed7ad48]:hover{background-color:#020b21}.el-menu--popup .el-menu-item:hover label[data-v-8ed7ad48]{color:#fff}.leftBar-wrap .cardmenu-item/deep/.el-menu-item[data-v-8ed7ad48],.leftBar-wrap .cardmenu-item/deep/.el-submenu .el-menu-item[data-v-8ed7ad48],.leftBar-wrap .cardmenu-item/deep/.el-submenu__title[data-v-8ed7ad48]{height:40px;line-height:40px}.leftBar-wrap .cardmenu-item/deep/li.el-menu-item:hover i[data-v-8ed7ad48],.leftBar-wrap .cardmenu-item/deep/li.el-menu-item:hover span[data-v-8ed7ad48],.leftBar-wrap .cardmenu-item/deep/li.el-submenu:hover i[data-v-8ed7ad48],.leftBar-wrap .cardmenu-item/deep/li.el-submenu:hover span[data-v-8ed7ad48]{color:#fff}.leftBar-wrap .cardmenu-item/deep/li.el-submenu .el-menu-item:hover label[data-v-8ed7ad48]{color:#fff;cursor:pointer}.leftBar-wrap .el-submenu .el-menu-item-group .el-menu-item[data-v-8ed7ad48]{position:relative}.leftBar-wrap .el-submenu .el-menu-item[data-v-8ed7ad48]:before{position:absolute;content:"\\25CF";left:35px;top:0;font-size:10px}.leftBar-wrap .el-submenu .el-menu-item[data-v-8ed7ad48]:hover:before{color:#fff}.leftBar-wrap .slide-fade-enter-active[data-v-8ed7ad48],.leftBar-wrap .slide-fade-leave-active[data-v-8ed7ad48]{transition:all .3s ease}.leftBar-wrap .cardmenu-item .menu-icon[data-v-8ed7ad48]{width:24px;text-align:center;font-size:14px;vertical-align:middle;display:inline-block;color:#c0c4cc}.leftBar-wrap .cardmenu-item .el-menu-item.is-active .menu-icon[data-v-8ed7ad48]{color:#fff}.el-menu-item-group .el-menu-item[data-v-8ed7ad48]{height:40px;line-height:40px}',""])},function(e,t){function r(e,t){var r=e[1]||"",n=e[3];if(!n)return r;if(t&&"function"==typeof btoa){var o=a(n);return[r].concat(n.sources.map(function(e){return"/*# sourceURL="+n.sourceRoot+e+" */"})).concat([o]).join("\n")}return[r].join("\n")}function a(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var a=r(t,e);return t[2]?"@media "+t[2]+"{"+a+"}":a}).join("")},t.i=function(e,r){"string"==typeof e&&(e=[[null,e,""]]);for(var a={},n=0;n<this.length;n++){var o=this[n][0];"number"==typeof o&&(a[o]=!0)}for(n=0;n<e.length;n++){var i=e[n];"number"==typeof i[0]&&a[i[0]]||(r&&!i[2]?i[2]=r:r&&(i[2]="("+i[2]+") and ("+r+")"),t.push(i))}},t}},function(e,t,r){function a(e){for(var t=0;t<e.length;t++){var r=e[t],a=u[r.id];if(a){a.refs++;for(var n=0;n<a.parts.length;n++)a.parts[n](r.parts[n]);for(;n<r.parts.length;n++)a.parts.push(o(r.parts[n]));a.parts.length>r.parts.length&&(a.parts.length=r.parts.length)}else{for(var i=[],n=0;n<r.parts.length;n++)i.push(o(r.parts[n]));u[r.id]={id:r.id,refs:1,parts:i}}}}function n(){var e=document.createElement("style");return e.type="text/css",d.appendChild(e),e}function o(e){var t,r,a=document.querySelector("style["+g+'~="'+e.id+'"]');if(a){if(m)return v;a.parentNode.removeChild(a)}if(y){var o=p++;a=f||(f=n()),t=i.bind(null,a,o,!1),r=i.bind(null,a,o,!0)}else a=n(),t=l.bind(null,a),r=function(){a.parentNode.removeChild(a)};return t(e),function(a){if(a){if(a.css===e.css&&a.media===e.media&&a.sourceMap===e.sourceMap)return;t(e=a)}else r()}}function i(e,t,r,a){var n=r?"":a.css;if(e.styleSheet)e.styleSheet.cssText=b(t,n);else{var o=document.createTextNode(n),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function l(e,t){var r=t.css,a=t.media,n=t.sourceMap;if(a&&e.setAttribute("media",a),h.ssrId&&e.setAttribute(g,t.id),n&&(r+="\n/*# sourceURL="+n.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var s="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!s)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var c=r(9),u={},d=s&&(document.head||document.getElementsByTagName("head")[0]),f=null,p=0,m=!1,v=function(){},h=null,g="data-vue-ssr-id",y="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,r,n){m=r,h=n||{};var o=c(e,t);return a(o),function(t){for(var r=[],n=0;n<o.length;n++){var i=o[n],l=u[i.id];l.refs--,r.push(l)}t?(o=c(e,t),a(o)):o=[];for(var n=0;n<r.length;n++){var l=r[n];if(0===l.refs){for(var s=0;s<l.parts.length;s++)l.parts[s]();delete u[l.id]}}}};var b=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var r=[],a={},n=0;n<t.length;n++){var o=t[n],i=o[0],l=o[1],s=o[2],c=o[3],u={id:e+":"+n,css:l,media:s,sourceMap:c};a[i]?a[i].parts.push(u):r.push(a[i]={id:i,parts:[u]})}return r}},function(e,t){e.exports=function(e,t,r,a,n,o){var i,l=e=e||{},s=typeof e.default;"object"!==s&&"function"!==s||(i=e,l=e.default);var c="function"==typeof l?l.options:l;t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0),r&&(c.functional=!0),n&&(c._scopeId=n);var u;if(o?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),a&&a.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):a&&(u=a),u){var d=c.functional,f=d?c.render:c.beforeCreate;d?(c._injectStyles=u,c.render=function(e,t){return u.call(t),f(e,t)}):c.beforeCreate=f?[].concat(f,u):[u]}return{esModule:i,exports:l,options:c}}},function(e,t,r){"use strict";var a=r(12),n=r(13),o=r(2);e.exports={formats:o,parse:n,stringify:a}},function(e,t,r){"use strict";var a=r(1),n=r(2),o={brackets:function(e){return e+"[]"},indices:function(e,t){return e+"["+t+"]"},repeat:function(e){return e}},i=Date.prototype.toISOString,l={delimiter:"&",encode:!0,encoder:a.encode,serializeDate:function(e){return i.call(e)},skipNulls:!1,strictNullHandling:!1},s=function e(t,r,n,o,i,l,s,c,u,d,f){var p=t;if("function"==typeof s)p=s(r,p);else if(p instanceof Date)p=d(p);else if(null===p){if(o)return l?l(r):r;p=""}if("string"==typeof p||"number"==typeof p||"boolean"==typeof p||a.isBuffer(p))return l?[f(l(r))+"="+f(l(p))]:[f(r)+"="+f(String(p))];var m=[];if(void 0===p)return m;var v;if(Array.isArray(s))v=s;else{var h=Object.keys(p);v=c?h.sort(c):h}for(var g=0;g<v.length;++g){var y=v[g];i&&null===p[y]||(m=Array.isArray(p)?m.concat(e(p[y],n(r,y),n,o,i,l,s,c,u,d,f)):m.concat(e(p[y],r+(u?"."+y:"["+y+"]"),n,o,i,l,s,c,u,d,f)))}return m};e.exports=function(e,t){var r=e,a=t||{};if(null!==a.encoder&&void 0!==a.encoder&&"function"!=typeof a.encoder)throw new TypeError("Encoder has to be a function.");var i=void 0===a.delimiter?l.delimiter:a.delimiter,c="boolean"==typeof a.strictNullHandling?a.strictNullHandling:l.strictNullHandling,u="boolean"==typeof a.skipNulls?a.skipNulls:l.skipNulls,d="boolean"==typeof a.encode?a.encode:l.encode,f=d?"function"==typeof a.encoder?a.encoder:l.encoder:null,p="function"==typeof a.sort?a.sort:null,m=void 0!==a.allowDots&&a.allowDots,v="function"==typeof a.serializeDate?a.serializeDate:l.serializeDate;if(void 0===a.format)a.format=n.default;else if(!Object.prototype.hasOwnProperty.call(n.formatters,a.format))throw new TypeError("Unknown format option provided.");var h,g,y=n.formatters[a.format];"function"==typeof a.filter?(g=a.filter,r=g("",r)):Array.isArray(a.filter)&&(g=a.filter,h=g);var b=[];if("object"!=typeof r||null===r)return"";var w;w=a.arrayFormat in o?a.arrayFormat:"indices"in a?a.indices?"indices":"repeat":"indices";var x=o[w];h||(h=Object.keys(r)),p&&h.sort(p);for(var j=0;j<h.length;++j){var N=h[j];u&&null===r[N]||(b=b.concat(s(r[N],N,x,c,u,f,g,p,m,v,y)))}return b.join(i)}},function(e,t,r){"use strict";var a=r(1),n=Object.prototype.hasOwnProperty,o={allowDots:!1,allowPrototypes:!1,arrayLimit:20,decoder:a.decode,delimiter:"&",depth:5,parameterLimit:1e3,plainObjects:!1,strictNullHandling:!1},i=function(e,t){for(var r={},a=e.split(t.delimiter,t.parameterLimit===1/0?void 0:t.parameterLimit),o=0;o<a.length;++o){var i,l,s=a[o],c=-1===s.indexOf("]=")?s.indexOf("="):s.indexOf("]=")+1;-1===c?(i=t.decoder(s),l=t.strictNullHandling?null:""):(i=t.decoder(s.slice(0,c)),l=t.decoder(s.slice(c+1))),n.call(r,i)?r[i]=[].concat(r[i]).concat(l):r[i]=l}return r},l=function(e,t,r){if(!e.length)return t;var a,n=e.shift();if("[]"===n)a=[],a=a.concat(l(e,t,r));else{a=r.plainObjects?Object.create(null):{};var o="["===n.charAt(0)&&"]"===n.charAt(n.length-1)?n.slice(1,-1):n,i=parseInt(o,10);!isNaN(i)&&n!==o&&String(i)===o&&i>=0&&r.parseArrays&&i<=r.arrayLimit?(a=[],a[i]=l(e,t,r)):a[o]=l(e,t,r)}return a},s=function(e,t,r){if(e){var a=r.allowDots?e.replace(/\.([^.[]+)/g,"[$1]"):e,o=/(\[[^[\]]*])/,i=/(\[[^[\]]*])/g,s=o.exec(a),c=s?a.slice(0,s.index):a,u=[];if(c){if(!r.plainObjects&&n.call(Object.prototype,c)&&!r.allowPrototypes)return;u.push(c)}for(var d=0;null!==(s=i.exec(a))&&d<r.depth;){if(d+=1,!r.plainObjects&&n.call(Object.prototype,s[1].slice(1,-1))&&!r.allowPrototypes)return;u.push(s[1])}return s&&u.push("["+a.slice(s.index)+"]"),l(u,t,r)}};e.exports=function(e,t){var r=t||{};if(null!==r.decoder&&void 0!==r.decoder&&"function"!=typeof r.decoder)throw new TypeError("Decoder has to be a function.");if(r.delimiter="string"==typeof r.delimiter||a.isRegExp(r.delimiter)?r.delimiter:o.delimiter,r.depth="number"==typeof r.depth?r.depth:o.depth,r.arrayLimit="number"==typeof r.arrayLimit?r.arrayLimit:o.arrayLimit,r.parseArrays=!1!==r.parseArrays,r.decoder="function"==typeof r.decoder?r.decoder:o.decoder,r.allowDots="boolean"==typeof r.allowDots?r.allowDots:o.allowDots,r.plainObjects="boolean"==typeof r.plainObjects?r.plainObjects:o.plainObjects,r.allowPrototypes="boolean"==typeof r.allowPrototypes?r.allowPrototypes:o.allowPrototypes,r.parameterLimit="number"==typeof r.parameterLimit?r.parameterLimit:o.parameterLimit,r.strictNullHandling="boolean"==typeof r.strictNullHandling?r.strictNullHandling:o.strictNullHandling,""===e||null===e||void 0===e)return r.plainObjects?Object.create(null):{};for(var n="string"==typeof e?i(e,r):e,l=r.plainObjects?Object.create(null):{},c=Object.keys(n),u=0;u<c.length;++u){var d=c[u],f=s(d,n[d],r);l=a.merge(l,f,r)}return a.compact(l)}},function(e,t,r){"use strict";var a=function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"left-aside-contain",style:{height:e.asideHeight}},[r("div",{staticClass:"leftBar-wrap"},[r("div",{staticClass:"cardmenu",class:{collapse:e.leftCollapse}},[r("div",{staticClass:"cardmenu-item"},[r("el-menu",{staticClass:"el-menu-vertical-demo cardmenupanel",staticStyle:{"border-right":"0"},attrs:{"default-active":e.selectMenu,"data-path":"/"+e.$route.path,router:!0,"text-color":"#c0c4cc","active-text-color":"#ffffff",collapse:e.leftCollapse,"unique-opened":""},on:{open:e.handleOpen,select:e.handleSelect}},[e._l(e.menuLeftRouter,function(t,a){return[t.level4List.length>0?r("el-submenu",{attrs:{index:a+""}},[r("template",{slot:"title"},[r("i",{class:["iconfont","menu-icon",t.iconUrl]}),e._v(" "),r("span",{attrs:{slot:"title"},slot:"title"},[e._v(e._s(t.menuName))])]),e._v(" "),e._l(t.level4List,function(t,a){return r("el-menu-item",{staticStyle:{"padding-left":"53px"},attrs:{index:t.menuUrl}},[r("label",{attrs:{slot:"title","data-index":e.$route.path==t.menuUrl&&e.$route.path,"data-path":t.menuUrl},slot:"title"},[e._v(e._s(t.menuName))])])})],2):e._e(),e._v(" "),t.level4List.length?e._e():r("el-menu-item",{attrs:{index:t.menuUrl}},[r("i",{class:["iconfont","menu-icon",t.iconUrl]}),e._v(" "),r("span",{attrs:{slot:"title"},slot:"title"},[e._v(e._s(t.menuName))])])]})],2)],1)])])])},n=[],o={render:a,staticRenderFns:n};t.a=o}])});
//# sourceMappingURL=vue-office-aside.js.map
\ No newline at end of file
dist/vue-office-aside.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-office-aside</title>
</head>
<body>
<div id="app"></div>
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/vue-office-aside.js"></script>
</body>
</html>
package.json 0 → 100644
{
"name": "@gic-test/vue-office-aside",
"description": "vue-office-aside Plugin",
"author": "fairyly <498745097@qq.com>",
"version": "1.0.2",
"license": "MIT",
"private": false,
"main": "dist/vue-office-aside.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-office-aside ref="leftMenus" :projectName="projectName" :collapseFlag="collapseFlag"></vue-office-aside>
</div>
</template>
<script>
import vueOfficeAsideMenu from './lib/vue-office-aside'
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 vueOfficeAside from './vue-office-aside.vue' // 导入组件
const vueOffAside = {
install(Vue, options) {
Vue.component(vueOfficeAside.name, vueOfficeAside) // vueOfficeAside.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(vueOffAside);
}
export default vueOffAside
// export {
// vueOfficeAside
// }
src/lib/vue-office-aside.vue 0 → 100644
<template>
<div class="left-aside-contain" :style="{height: asideHeight}">
<div class="leftBar-wrap" >
<div class="cardmenu" :class="{collapse: leftCollapse}">
<!-- <div class="cardtitle" v-show="!leftCollapse">
<span>{{leftModuleName}}</span>
</div> -->
<div class="cardmenu-item">
<el-menu :default-active="selectMenu" :data-path="'/' + $route.path" style="border-right: 0;" class="el-menu-vertical-demo cardmenupanel" :router="true" text-color="#c0c4cc" active-text-color="#ffffff" :collapse="leftCollapse" unique-opened @open="handleOpen" @select="handleSelect">
<!--:default-openeds="defaultSub"-->
<template v-for="(menuItem,index) in menuLeftRouter" >
<el-submenu :index="index+''" v-if="menuItem.level4List.length>0">
<template slot="title" >
<i :class="['iconfont','menu-icon',menuItem.iconUrl]"></i>
<span slot="title">{{menuItem.menuName}}</span>
</template>
<!-- <el-menu-item-group > -->
<el-menu-item v-for="(childMenu,index) in menuItem.level4List" :index="childMenu.menuUrl" style="padding-left: 53px;"><label slot="title" :data-index="$route.path==childMenu.menuUrl? $route.path:false" :data-path="childMenu.menuUrl">{{childMenu.menuName}}</label></el-menu-item>
<!-- </el-menu-item-group> -->
</el-submenu>
<el-menu-item :index="menuItem.menuUrl" v-if="!menuItem.level4List.length">
<i :class="['iconfont','menu-icon',menuItem.iconUrl]"></i>
<span slot="title">{{menuItem.menuName}}</span>
</el-menu-item>
</template>
</el-menu>
</div>
</div>
</div>
</template>
<script>
// import { getRequest } from './api';
import qs from 'qs';
export default {
name: 'vue-office-aside',
props: ['collapseFlag','projectName'],//'leftMenuRouter','leftModulesName',
data () {
return {
repProjectName: 'gic-web', // 项目名
// 高度
asideHeight: '0px',
pathName: '', // 路由名
leftCollapse: false,// 是否收起左侧
leftModuleName: '',
// defaultSub: ['1','2','3','4','5','6','7','8','9'], // 默认打开子菜单
menuLeftRouter: [
],
// 获取 location origin
baseUrl: '',
//已选菜单
selectMenu: '',
}
},
beforeMount() {
var that = this
var host = window.location.origin;
console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
that.baseUrl = 'http://gicdev.demogic.com';
}else {
that.baseUrl = host
}
},
methods: {
handleOpen(key, keyPath) {
// console.log(key, keyPath);
},
handleSelect(key, keyPath){
var that = this
console.log(key, keyPath);
that.selectMenu = key
},
// 设置新数据
setNewData(newData) {
var that = this;
// 处理成需要的路由
// var list = [],lists = [];
newData.forEach(function(ele,index){
if (ele.level4List==null || ele.level4List.length==0) {
// 设置 url
ele.menuUrl = '/'+ ele.menuUrl;
}else {
ele.level4List.forEach(function(el,key){
// 设置 url
el.menuUrl = '/'+ el.menuUrl;
})
}
})
console.log("处理后的左侧菜单 list:",newData)
that.menuLeftRouter = newData;
},
// 触发父组件路由
toRouter(path) {
var that = this;
that.$emit('toLeftRouterView', '/'+path)
},
// 刷新路由
refreshRoute() {
var that = this
//获取项目名 pathname (路由的hash)
that.routePathName = window.location.hash.split('/')[1];
if (that.routePathName.indexOf('?')!= -1) {
that.routePathName = that.routePathName.split('?')[0]
}
if (that.routePathName.indexOf('/')!= -1) {
that.routePathName = that.routePathName.split('/')[0]
}
console.log("routePathname:",that.routePathName)
that.pathName = that.routePathName
that.getLeftMenu()
},
// 获取左侧菜单
getLeftMenu() {
var that = this
var para = {
project: that.repProjectName,
path: that.pathName,
requestProject: that.repProjectName
}
that.axios.post(that.baseUrl+'/api-auth/get-current-memu-data',qs.stringify(para))
.then((res) => {
// console.log(res,res.data,res.data.errorCode)
var resData = res.data
if (resData.errorCode == 0) {
if (!resData.result) {
console.log("resData.result: ",resData.result)
return;
}
that.leftModuleName = resData.result.level2.menuName;
that.setNewData(resData.result.leftMenu)
if (!!resData.result.level4) {
// 设置选中menu
that.selectMenu = '/'+resData.result.level4.menuUrl
return;
}
if (!!resData.result.level3) {
// 设置选中menu
that.selectMenu = '/'+resData.result.level3.menuUrl
}
// sessionStorage.setItem('activeHead',resData.result.level2.menuCode)
return;
}
that.$message.error({
duration: 1000,
message: resData.message
})
})
.catch(function (error) {
console.log(error);
// that.toLogin()
that.$message.error({
duration: 1000,
message: error.message
})
});
}
},
watch: {
$route: {
handler: function(val, oldVal){
console.log("左侧菜单插件获取当前路由:",val);
},
// 深度观察监听
deep: true
},
collapseFlag: function(newData,oldData){
var that = this;
// console.log("左侧新数据:",newData,oldData)
that.leftCollapse = newData;
},
projectName: function(newData,oldData){
var that = this;
// console.log("新数据:",newData,oldData)
that.repProjectName = newData || 'gic-web';
},
},
/* 接收数据 */
mounted(){
console.log("传递的左侧菜单参数:",this.projectName,this.$route)
var that = this;
// 项目名
that.repProjectName = that.projectName || 'gic-web';
// 获取高度
that.asideHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 +'px';
//获取项目名 pathname (路由的hash)
that.pathName = window.location.hash.split('/')[1];
if (that.pathName.indexOf('?')!= -1) {
that.pathName = that.pathName.split('?')[0]
}
// 获取菜单
that.getLeftMenu();
//折叠参数
that.leftCollapse = that.collapseFlag;
},
}
</script>
<style lang="less" scoped>
.attention-wrap{
.item-label{
font-size: 14px;
color: #606266;
margin-bottom: 30px;
span{
display: inline-block;
width: 80px;
}
}
}
.left-aside-contain {
/*width: 200px;*/
display: inline-block;
/*overflow: auto;
overflow-x: hidden;*/
&::-webkit-scrollbar{
width: 0;
height: 0;
}
/deep/ .el-submenu .el-submenu__title:hover {
background-color: rgba(249,250,252,1);
}
}
.leftBar-wrap /deep/ {
height: 100%;
display: inline-block;
overflow: auto;
&::-webkit-scrollbar{
width: 0;
height: 0;
}
.cardmenu{
flex: 0 0 200px;
width: 200px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background-color: rgba(249,250,252,1);
cursor: pointer;
transition: all .2s ease;
&::-webkit-scrollbar{
width: 0;
height: 0;
}
}
.collapse{
transition: all .3s ease;
flex: 0 0 64px;
width: 64px;
/*transform: translateX(-8px);*/
overflow: hidden;
}
.cardtitle{
font-size: 20px;
color: #fff;
padding-left: 20px;
height: 56px;
line-height: 56px;
}
/deep/ .el-submenu__title:hover {
/*background-color: #020b21;*/
}
}
.leftBar-wrap .el-menu .el-menu-item,.el-menu .el-submenu{
/*background: #020b21;*/
}
.leftBar-wrap {
/deep/ .el-submenu__title:hover {
/*background-color: #020b21;*/
}
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item-group .el-menu-item-group__title{
/*background-color: #020b21;*/
display: none;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu__title i {
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item span {
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item label {
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item .el-menu-item.is-active {
color: #fff;
background-color: #1890ff;
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item.is-active span {
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item.is-active label {
color: #fff;
}
.el-menu.el-menu--popup {
background: #020b21;
border-radius: 4px;
}
.el-menu--popup .el-menu-item {
height: 40px;
line-height: 40px;
}
.el-menu--popup .el-menu-item label{
display: block;
margin-left: -34px;
color: #c0c4cc;
cursor: pointer;
}
.el-menu--popup .el-menu-item:hover {
background-color: #020b21;
}
.el-menu--popup .el-menu-item:hover label {
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu__title,.leftBar-wrap .cardmenu-item /deep/ .el-menu-item,.leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item{
height: 40px;
line-height: 40px;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-menu-item:hover i{
/*background-color: #1890ff;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-menu-item:hover span{
/*background-color: #1890ff;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu:hover i{
/*background-color: #1890ff;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu:hover span{
/*background-color: #1890ff;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu .el-menu-item:hover label{
/*background-color: #1890ff;*/
color: #fff;
cursor: pointer;
}
.leftBar-wrap .el-submenu .el-menu-item-group .el-menu-item {
position: relative;
}
.leftBar-wrap .el-submenu .el-menu-item::before{
position: absolute;
content: '●';
left: 35px;
top: 0px;
font-size: 10px;
/* color: #fff;*/
}
.leftBar-wrap .el-submenu .el-menu-item:hover::before{
color: #fff;
}
.leftBar-wrap .slide-fade-enter-active {
transition: all .3s ease;
}
.leftBar-wrap .slide-fade-leave-active {
transition: all .3s ease;
}
.leftBar-wrap .cardmenu-item .menu-icon{
/*margin-right: 5px;*/
width: 24px;
text-align: center;
font-size: 14px;
vertical-align: middle;
display: inline-block;
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item .el-menu-item.is-active .menu-icon {
color: #fff;
}
.el-menu-item-group {
.el-menu-item{
height: 40px;
line-height: 40px;
}
}
</style>
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-office-aside.js',
library: 'vue-office-aside',
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