linan-0110 5 年之前
父節點
當前提交
4868d4ebd3
共有 3 個文件被更改,包括 98 次插入10 次删除
  1. 15 0
      src/main.js
  2. 80 10
      src/views/Home.vue
  3. 3 0
      src/views/Login.vue

+ 15 - 0
src/main.js

@@ -8,6 +8,21 @@ import vueModuleLoader from 'vue-module-loader'
 import localModule from './module'
 
 Vue.use(vueModuleLoader, { store }).use(ElementUI);
+/* 
+Element-UI用到的图标 
+import {
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Input,
+  Button,
+  ButtonGroup,
+  Form,
+  FormItem,
+  Icon,
+} from 'element-ui';
+*/
 
 const app = new Vue({
   router,

+ 80 - 10
src/views/Home.vue

@@ -1,32 +1,102 @@
 <template>
     <div class="home">
-        <h1>{{title}}</h1>
-        <!-- 加载动态组件 -->
-        <component :is="$store.state.dynamicComponent.GLOBAL.logo"></component>
-        <HelloWorld msg="Vue + vue-module-loader = Micro Front-end" />
+        <header class="header">
+            <div class="left">left</div>
+            <div class="right">
+                <el-button type="primary" @click="onSignIn">登录</el-button>
+                <el-button type="primary" @click="onSignIn">登录</el-button>
+            </div>
+        </header>
+        <section class="section">
+            <el-row class="tac">
+                <el-col :span="12">
+                    <h5>默认颜色</h5>
+                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" >
+                        <el-submenu index="1">
+                            <template slot="title">
+                                <i class="el-icon-location"></i>
+                                <span>导航一</span>
+                            </template>
+                            <el-menu-item-group>
+                                <template slot="title">分组一</template>
+                                <el-menu-item index="1-1">选项1</el-menu-item>
+                                <el-menu-item index="1-2">选项2</el-menu-item>
+                            </el-menu-item-group>
+                            <el-menu-item-group title="分组2">
+                                <el-menu-item index="1-3">选项3</el-menu-item>
+                            </el-menu-item-group>
+                            <el-submenu index="1-4">
+                                <template slot="title">选项4</template>
+                                <el-menu-item index="1-4-1">选项1</el-menu-item>
+                            </el-submenu>
+                        </el-submenu>
+                        
+                        <el-menu-item index="2">
+                            <i class="el-icon-menu"></i>
+                            <span slot="title">导航二</span>
+                        </el-menu-item>
+
+                        <el-menu-item index="3" disabled>
+                            <i class="el-icon-document"></i>
+                            <span slot="title">导航三</span>
+                        </el-menu-item>
+
+                        <el-menu-item index="4">
+                            <i class="el-icon-setting"></i>
+                            <span slot="title">导航四</span>
+                        </el-menu-item>
+                    </el-menu>
+                </el-col>
+            </el-row>
+        </section>
     </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+// import HelloWorld from "@/components/HelloWorld.vue";
 
 export default {
     name: "home",
-    components: {
-        HelloWorld
-    },
+    components: {},
     data() {
         return {
-            title: process.env.VUE_APP_TITLE
+            // 菜单数据
+            menuData: [
+                {
+                    oneMenuName: "导航一", // 一级菜单名
+                    childList: [
+                        
+                    ],
+                    iconClassName: 'aaa',  // element-ui图标名
+                },
+                
+                "导航二",
+                "导航三",
+                "导航四",
+            ]
         };
+    },
+    methods: {
+        onSignIn() {},
+        handleOpen(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        handleClose(key, keyPath) {
+            console.log(key, keyPath);
+        }
     }
 };
 </script>
 
 <style lang="scss" scoped>
 .home {
+    .header {
+        display: flex;
+        justify-content: space-between;
+        border: 1px solid #099;
+    }
     height: 2000px;
-    border: 2px solid #f00;
+    // border: 2px solid #f00;
 }
 </style>

+ 3 - 0
src/views/Login.vue

@@ -39,6 +39,9 @@ export default {
         onSignIn() {
             console.log("登录!");
             console.log(this.form)
+            this.$router.push({
+                name: "home"
+            });
         }
     },
     mounted() {}