zoukankan      html  css  js  c++  java
  • Vue 实现左边导航栏且右边显示具体内容(element-ui)

    最终效果图:

     

    现在开始进入正题:

    1、安装element-ui

    npm i element-ui -S

    CDN

    目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    2.在main.js中引入

    3、在 components 中新建导航栏组件

    <template>
      <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="/demo" @click="goTo('/demo')">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="/index" @click="goTo('/index')">
              <i class="el-icon-setting"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <router-view></router-view>
      </el-row>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
    
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        goTo(path) {
          this.$router.replace(path);
        }
      }
    };
    </script>
    
    <style scoped>
    .el-col-12{
       15%;
    }
    </style>

    4、在router下的index.js中引入组件,搭配路由

    5、添加跳转路径

       

    6、很重要的一点,加上路由出口,也就是右侧显示部分

    这样就实现成功啦

  • 相关阅读:
    AQTime : ASP.NET Applications
    Ext Js 之坑
    才看到这个强贴,真是out了
    Ext JS多选控件 MultiCombo
    杂记
    NHibernate中用Criteria查询,不采用SetResultTransformer(new DistinctRootEntityResultTransformer())处理Distinct
    [转]IntelliJ IDEA整合VSS2005的配置
    Ext JS: Formpanel中联动ComboBox赋初值
    c#中using 的作用
    DIV+CSS中标签ul ol li dl dt dd用法
  • 原文地址:https://www.cnblogs.com/mica/p/10790976.html
Copyright © 2011-2022 走看看