Vue

elementUi 记录导航展示收起状态

联系站长 作者:web知道 来源:未知 2019-02-25 09:44 我要评论

elementUi 记录导航展示收起状态...

<el-menu
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :class="isCollapse ? 'layoutColse':'layoutOpen'"
      @open="handleOpen"
      @close="handleClose"
      :default-openeds="openeds"
>
 

一、本功能需要本地储存,通过浏览器的sessionStorage来记录状态
data(){
   return{
      navArr:[],
      openeds:[]
  }
},
 

二、进到界面就获取是否有展开的记录
created(){
   //判断浏览器是否有展开记录
   if(sessionStorage.getItem('defaultNav')){
 
   //如果有展开记录就获取
   var defaultNavStr = sessionStorage.getItem('defaultNav')
 
   //把展开记录JSON字符串转成数组
   //展开数组
   this.openeds = JSON.parse(defaultNavStr)
 
   //本地数组,如果不赋值给本地数组的数,那每次都是一个空数组,在收起时,会误删
   this.navArr = JSON.parse(defaultNavStr)
   } 
}
 
三、在导航代码上加下如下两个事件代码
<el-menu
@open="handleOpen"
@close="handleClose"
>
 

四、methods
methods: {
    handleOpen (key, keyPath) {
        //key 获取每一个展开的index值,这里用的是标题
        //把获取到的index值push到本地数组
        this.navArr.push(key)
        //存储到浏览器
        sessionStorage.setItem('defaultNav',JSON.stringify(this.navArr))
    },
    handleClose (key, keyPath) {
        //把收起来得到的index key值和本地数组对比,如果有相同的,就返回索引值
        var myIndex = this.navArr.findIndex((value, index, arr) => {
            return value == key
        })
        //按索引删除
        this.navArr.splice(myIndex,1)
        //删除完成再存储到浏览器
        sessionStorage.setItem('defaultNav',JSON.stringify(this.navArr))
    },
},
 



本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评