EasyCVS右侧菜单栏的activeindex选定以及重定向

原创
2021/04/14 10:03
阅读数 42

上一篇我们解决了EasyCVS视频管理平台在小屏状态下菜单栏的问题(视频管理平台菜单栏小屏自适应优化记录)。但是在实际使用中,EasyCVS右侧菜单栏在顶部菜单栏切换时,菜单栏的activeindex就会改变,此时,若是打开右侧菜单栏,相应的也是需要切换到相应菜单栏item,同时在页面刷新时也需要重定向到相应的activeIndex。

首先右侧菜单栏是使用elementUi的el-menu组件,该组件自带default-active 属性,当顶部导航栏切换时将他的activeIndex值给右侧的导航栏default-active 值即可。

而重定向是检测路由地址,来获取事先确定好的每个导航栏的item对应的路由地址,然后将每个路由的activeInde值给导航栏的default-active赋值即可。

参考代码如下:

        <el-menu
          :default-active="activeIndexRight"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @select="select"
          background-color="#292C33"
          text-color="#fff"
          @close="handleClose"
          :router="true"
        >
          <el-menu-item index="0" :route="'/scrren'">
            <span slot="title">实时预览</span>
          </el-menu-item>
          <el-menu-item index="1" :route="'/live/lis'">
            <span slot="title">视频直播</span>
          </el-menu-item>
          <el-menu-item index="2" :route="'/user/list'">
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="3" :route="'/space/list'">
            <span slot="title">空间管理</span>
          </el-menu-item>
          <el-menu-item index="4" :route="'/bucket/list'">
            <span slot="title">对象存储</span>
          </el-menu-item>
        </el-menu>

    //导航栏重定向
    RouteRedirection() {
      var path = this.$route.path;
      let paths = [
        { path"/scrren"type0 },
        { path"/live/list"type1 },
        { path"/user"type2 },
        { path"/space"type3 },
        { path"/bucket"type4 },
        { path"/oss/list"type5 },
      ];
      for (const i in paths) {
        if (path.indexOf(paths[i].path) != -1) {
          this.activeIndex = paths[i].type;
          this.activeIndexRight = JSON.stringify(this.activeIndex);
          console.log(this.activeIndex, "路由");
          return;
        }
      }
    },

EasyCVS目前虽不对外开放,但有兴趣的用户可以先了解EasyCVR。EasyCVR目前已经支持RTSP、GB28181、Ehome、海康SDK、大华SDK等协议设备的接入,其他主流厂家的私有协议在不断扩展中。因此从长远来看,EasyCVR具备很高的使用价值和适配性。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部