Vue侧导航栏的实现

<template><div class="sildebar"><div class="home" @click="hideMenu">侧导航栏侧导航栏侧导航栏侧导航栏</div><div class="menu" v-show="isShows" @click="hideMenu"></div><transition name="slide-fade"><div class="sss" v-show="isShow">2222</div></transition></div>
</template><script>export default {data () {return {isShow: false,isShows: false}},methods: {hideMenu () {if (this.isShow) {this.isShow = falsethis.isShows = false} else {this.isShow = truethis.isShows = true}},}}
</script><style>.sss{color: #fff;position: fixed;width: 286px;height: 100%;top: 0;left: 0;bottom: 0;z-index: 11;overflow-y: auto;background: #000;}.slide-fade-enter-active {transition: all .3s ease;}.slide-fade-leave-active {transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);}.slide-fade-leave-to,.slide-fade-enter{transform: translateX(-286px);opacity: 0;}.menu {position: fixed;top: 0;left: 0;bottom: 0;right: 0;opacity: 1;z-index: 10;background: rgba(0,0,0,0.5);}
</style>

Vue侧导航栏的实现相关推荐

vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
小米商城侧导航栏的实现（导航栏的制作）
侧导航栏在我们写的时候很常用,很多网站上面都有侧边导航栏的应用,那么如何制作侧边导航栏呢? 下面看一看我制作的小米商城的侧导航栏. 看下列代码: <body><div class=& ...
Axure中如何快速设计左边导航栏，侧导航栏和顶部导航栏等？
Axure中如何快速设计侧导航栏和顶部导航栏? 1.下载侧导航栏和顶部导航栏组件参考<蚂蚁金服 ant design 中下载axure 菜单组件库> 2.导入组件下载保存为AntDes ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
状态输出导航栏html,Vue实现导航栏效果（选中状态刷新不消失）_百厌_前端开发者...
用 1.首先把这些小图片放到src/assets路径下面(自动base64编码) 2.在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未选 ...
Vue实现导航栏切换
使用Vue @mouseenter 鼠标移入事件 @mouseout鼠标移出事件实现导航栏鼠标移入移出效果 <!DOCTYPE html> <html lang="en& ...
html5导航栏点击之后变色,vue实现导航栏点击当前标题变色
1.效果 2.步骤首先在vue实例中生命一个数组,里面放置导航栏的内容,并声明两个变量,一个控制下方文字的变动,一个控制颜色的变动然后再创建一个列表,通过v-for遍历数组,将这个数组显示到页面中 ...
vue底部导航栏（选中状态刷新不消失）解决
我们用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题.也可以选择自适应屏幕.看一下效果,底部的图标是我自己找的,选中和未 ...
Vue使用导航栏router模式，设置的default-active无效解决
问题说明最近开始使用Vue进行开发,但是在使用导航栏的router模式的时候,遇到设置default-active无效的问题,就是设置了default-active,但是没有默认出现该有的页面,仍然 ...

Vue侧导航栏的实现

Vue侧导航栏的实现相关推荐

最新文章

热门文章