JSFiddle - React, Tailwind, and code Playground

by Ratanak Serey

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
    <el-radio-button :label="false">expand</el-radio-button>
    <el-radio-button :label="true">collapse</el-radio-button>
  </el-radio-group>
  <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    <el-submenu index="1">
      <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">Navigator One</span>
    </template>
      <el-menu-item-group>
        <span slot="title">Group One</span>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <span slot="title">item four</span>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-submenu>
    </el-submenu>

    <el-popover placement="right-start" width="200" trigger="hover" v-model="visible2">

      <el-menu-item index="2" @click="menuSelect">
        <i class="el-icon-document"></i>
        <span>Navigator Three</span>
      </el-menu-item>
      <el-menu-item index="22" @click="menuSelect">
        <i class="el-icon-document"></i>
        <span>Navigator Three</span>
      </el-menu-item>
      <el-menu-item index="23" @click="menuSelect">
        <i class="el-icon-document"></i>
        <span>Navigator Three</span>
      </el-menu-item>

      <span slot="reference">
    <el-menu-item index="2" @click="menuSelect">
      <i class="el-icon-menu"></i>
    <span slot="title">Navigator Two</span>
      </el-menu-item>
      </span>
    </el-popover>
    <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <span...

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

.el-tooltip__popper {
      display: none !important;
}

Babel + JSX

var Main = {
    data() {
      return {
        isCollapse: true,
        visible2: false,
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      menuSelect(index){
      	this.visible2 = false
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')