JSFiddle - React, Tailwind, and code Playground

by zhouyulong

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<div id="app">
  <el-col :span="24" class="header">
    <el-col :span="10" class="logo">
      <br>
    </el-col>
    <el-col :span="10">
      <div class="tools">
        <i class="fa fa-align-justify"></i>
      </div>
    </el-col>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">顶栏导航一</el-menu-item>
      <el-menu-item index="2">顶栏导航二</el-menu-item>
      <el-menu-item index="3">顶栏导航三</el-menu-item>
    </el-menu>
    <div class="line"></div>
  </el-col>

  <el-col :span="10">
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :default-openeds="['1', '2']">
     <el-submenu index="1" v-show="activeIndex == 1">
        <span slot="title">
          <i class="el-icon-message"></i>订单管理</span>
       
          <el-menu-item index="1">订单列表</el-menu-item>
          <el-menu-item index="1-2">未支付订单</el-menu-item>

          <el-submenu index="1-3">
            <span slot="title">配送管理</span>
            <el-menu-item index="1-3-1">配送小区列表</el-menu-item>
            <el-menu-item index="1-3-2">增加配送小区</el-menu-item>
          </el-submenu>

        </el-submenu>
        <el-menu-item index="2" v-show="activeIndex== 2">
          <i class="el-icon-menu"></i>
          <span slot="title">侧栏导航二</span>
        </el-menu-item>
        <el-menu-item index="3" v-show="activeIndex== 3">
          <i class="el-icon-setting"></i>
          <span slot="title">侧栏导航三</span>
        </el-menu-item>
    </el-menu>
  </el-col>

</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

JavaScript

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      activeIndex: "1"
    }
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    }
  }
})