菜单缩放

src/components/common/HomePage.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container :class="getRole">
-    <el-aside>
+    <el-aside v-show="onshow">
       <div class="logo">
         <p v-if="userLoginDTO&&userLoginDTO.type=='0'">
           <b>医院知识库后台管理系统</b>
@@ -12,6 +12,18 @@
         v-bind:data="menuWrappers"
       ></lt-menu>
     </el-aside>
+    <img
+      src="../../images/icon-collect-right.png"
+      v-show="!onshow"
+      class="collect"
+      @click="collect"
+    />
+    <img
+      src="../../images/icon-collect-left.png"
+      v-show="onshow"
+      class="collect-left"
+      @click="collect"
+    />
     <el-container>
       <el-header class="clearfix">
         <div class="title fl">
@@ -135,7 +147,7 @@ export default {
       isNewV: false,
       version: null, //版本信息接口返回的数据
       changePassWord: false,
-
+      onshow:true,
       ruleForm2: {
         pass: '',
         checkPass: '',
@@ -175,7 +187,16 @@ export default {
     //获取菜单
     this.getMenuList();
   },
-  mounted() {},
+  mounted() {
+    let elSide = document.querySelector('.el-aside'),
+      tabWidth = document.querySelector('.collect-left');
+    tabWidth.style.left = elSide.offsetWidth - 36 + 'px';
+    window.onresize = () => {
+      return (() => {
+        tabWidth.style.left = elSide.offsetWidth - 36 + 'px';
+      })();
+    };
+  },
   watch: {
     $route: function(to, from) {
       if (from.name == 'login') {
@@ -189,6 +210,9 @@ export default {
     }
   },
   methods: {
+    collect() {
+      this.onshow = !this.onshow;
+    },
     CalcuMD5(password) {
       password = md5(password);
       return password;
@@ -324,6 +348,22 @@ export default {
 </style>
 <style lang="less" scoped>
 @import '../../less/common.less';
+.collect {
+  width: 36px;
+  height: 32px;
+  position: fixed;
+  left: 0;
+  top: 70%;
+  z-index: 20;
+}
+.collect-left {
+  width: 36px;
+  height: 32px;
+  position: fixed;
+  // left: calc(20% - 36px);
+  top: 65%;
+  z-index: 20;
+}
 .el-menu-vertical-demo.el-menu {
   height: calc(100% - 120px);
   overflow-y: auto;