如何实现移动端侧边目录栏收缩,并监听点击目录栏以外则自动收缩

父组件,index界面,注意此时expend按钮在父组件中



子组件,侧边导航栏,用父子间的传参 配合watch来监听侧边栏是否展开,展开则添加点击监听函数,收缩则去除点击监听函数。判断点击是否点击到aside组件外可以通过检查目标元素(e.target)是否不包含在组件的根元素(this.$el)中,如果目标元素在组件之外,我们调用父组件的函数expendClick()来实现自动收缩,另外因为expend按钮在父组件中,点击按钮也会被判定为false,导致按钮展开功能失效



实现效果如下

此时是展开侧边栏,添加了点击监听事件,这时我们点击侧边栏以外部分

如何实现移动端侧边目录栏收缩,并监听点击目录栏以外则自动收缩_第1张图片

 点击这部分

如何实现移动端侧边目录栏收缩,并监听点击目录栏以外则自动收缩_第2张图片

 侧边栏就自动收缩啦

如何实现移动端侧边目录栏收缩,并监听点击目录栏以外则自动收缩_第3张图片

 

你可能感兴趣的:(css,css3,javascript,vue,vue.js)