1.vue2.0 封装 侧滑菜单组件

Sidebar.vue

<!-- 侧滑菜单 组件 -->
<template>
<div>
<transition name="fold">
<div class="sidebar" v-show="sidebarShow">
侧滑菜单
</div>
</transition>
<transition name="fade">
<div class="mask" @click.stop.prevent="hide" v-show="sidebarShow"></div>
</transition>
</div>
</template> <script type="text/ecmascript-6">
export default {
//接收父组件传值
props: {
sidebarShow: {
type: Boolean,
default: false
}
},
data() {
return {
data: [] //初始化数据
}
},
//生命周期创建观察数据
created() { },
//观察路由跳转更新数据
watch: { },
methods: {
//隐藏侧边栏,向上派发事件(向父组件传值)
hide() {
this.$emit('hideSidebar', false);
}
},
computed: { },
//注册组件
components: { }
}
</script> <style lang="less" scoped>
.sidebar{
position: fixed;
top: 0px;
right: 0px;
z-index: 50;
height: 100%;
width: 230px;
// background-color: rgb(35, 42, 48);
background-color: #fff;
transform: translate3d(0, 0, 0);
}
.mask{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 40;
background: rgba(7, 17, 27, 0.6);
opacity: 1;
&.fade-enter-active, &.fade-leave-active{
transition: all 0.5s;
}
&.fade-enter, &.fade-leave-active{
opacity: 0;
}
}
</style>

2.父组件 调用

home.vue

<!-- 首页 -->
<template>
<div>
<!-- 头部 -->
<mt-header title="综合管理平台">
<!-- 点击按钮 显示侧滑菜单 -->
<mt-button icon="more" @click="showSide" slot="right"></mt-button>
</mt-header>
<!-- 侧滑菜单 -->
<mSidebar :sidebarShow="sidebarShow" v-on:hideSidebar="setSidebar"></mSidebar>
</div>
</template> <script>
// 引入 侧滑菜单组件
import mSidebar from '../../components/Sidebar.vue' export default {
name: 'home',
components: {
// 注册组件
mSidebar
},
data() {
return {
sidebarShow:false // 默认值
}
},
created() { },
methods: {
// 显示 侧滑菜单
showSide(){
this.sidebarShow = true;
},
// 接收 Sidebar组件的返回值 隐藏 侧滑菜单
setSidebar(val){
this.sidebarShow = val;
}
}
}
</script> <style lang="less" scoped> </style>

3.效果图

vue2.X 自定义 侧滑菜单 组件的更多相关文章

  1. vue2.0 自定义 侧滑删除(LeftSlider)组件

    1.自定义侧滑删除组件 LeftSlider.vue <!-- 侧滑删除 组件 --> <template> <div class="delete"& ...

  2. 鸿蒙开源第三方组件——SlidingMenu_ohos侧滑菜单组件

    目录: 1.前言 2.背景 3.效果展示 4.Sample解析 5.Library解析 6.<鸿蒙开源第三方组件>文章合集 前言 基于安卓平台的SlidingMenu侧滑菜单组件(http ...

  3. Android之自定义侧滑菜单

    先来上图: 我们把主界面从左向右拉动,可以看到地下有一层菜单页,从透明渐渐变得不透明,从小渐渐变大,感觉上觉得菜单页是从屏幕外面被拉到屏幕中的.下面的代码实现这个DEMO: 首先是自定义控件Slidi ...

  4. Android 自定义View修炼-打造完美的自定义侧滑菜单/侧滑View控件

    一.概述 在App中,经常会出现侧滑菜单,侧滑滑出View等效果,虽然说Android有很多第三方开源库,但是实际上 咱们可以自己也写一个自定义的侧滑View控件,其实不难,主要涉及到以下几个要点: ...

  5. Android 自定义View修炼-仿QQ5.0 的侧滑菜单效果的实现

    有一段时间没有写博客了,最近比较忙,没什么时间写,刚好今天有点时间, 我就分享下,侧滑菜单的实现原理,一般android侧滑的实现原理和步骤如下:(源码下载在下面最后给出哈) 1.使用ViewGrou ...

  6. Android-自定义侧滑菜单

    效果图: 需要继承ViewGroup,因为包含了子控件,菜单子控件 与 主页面子控件 Activity Xml布局相关: <!-- 自定义侧滑菜单 SlideMenu --> <Li ...

  7. Android组件——使用DrawerLayout仿网易新闻v4.4侧滑菜单

    摘要: 转载请注明出处:http://blog.csdn.net/allen315410/article/details/42914501 概述        今天这篇博客将记录一些关于DrawerL ...

  8. antd Tree组件中,自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

  9. 如鹏网仿QQ侧滑菜单:ResideMenu组件的使用笔记整理+Demo

    ResideMenu菜单 课堂笔记: https://github.com/SpecialCyCi/AndroidResideMenu Github:如何使用开源组件1. 下载 下载方式: 1. 项目 ...

随机推荐

  1. 设计模式(一)单例模式:2-懒汉模式(Lazy)

    思想: 相比于饿汉模式,懒汉模式实际中的应用更多,因为在系统中,“被用到时再初始化”是更佳的解决方案. 设计思想与饿汉模式类似,同样是持有一个自身的引用,只是将 new 的动作延迟到 getinsta ...

  2. Python之文件操作:文件的读写

    一.open函数:对文件读写之前,需要先打开文件,获取文件句柄 注意:open() file() 尽量使用open(),Python3以后不支持file()了 1.open(file_name[,ac ...

  3. 深入比较选择 Angular 还是 React

    我应该选择 Angular 还是 React?现在JS框架两强的格局让许多开发者选择起来很纠结.无论你是一个正在思考如何入门的新手,还是一个为下个项目挑选框架的设计者,或是一个架构师为公司做长远的规划 ...

  4. Bzoj 3145 - [Feyat cup 1.5]Str

    bzoj 3145 - [Feyat cup 1.5]Str Description 给你两个长度\(10^5\)级别的串\(S, T\) 求\(S,T\)的最长模糊匹配公共子串 模糊匹配 : 至多一 ...

  5. ConcurrentHashMap 1.8为什么要使用CAS+Synchronized取代Segment+ReentrantLock

    大家应该都知道ConcurrentHashMap在1.8的时候有了很大的改动,当然,我这里要说的改动不是指链表长度大于8就转为红黑树这种常识,我要说的是ConcurrentHashMap在1.8为什么 ...

  6. KMP--君住长江头,我住长江尾,日日思君不见君,共饮长江水

    POJ 3461: Oulipo 题意: 求出第一个串在第二个串中的出现次数... 分析: KMP板子题... 代码: #include<algorithm> #include<io ...

  7. Dictionary To Dynamic

    原文发布时间为:2012-12-25 -- 来源于本人的百度文章 [由搬家工具导入] public static class DictionaryExt    {        /// <sum ...

  8. wap开发杂项1

    原文发布时间为:2010-08-31 -- 来源于本人的百度文章 [由搬家工具导入] wap开发全程记忆[CLQ原创 持续更新] 1. 据说手机wap最好都是utf-8字符集,不过gb2312对移动手 ...

  9. (5)ASP.NET HttpResponse 类

    HttpResponse 类用来封装来自 ASP.NET 操作的 HTTP 响应信息 https://msdn.microsoft.com/zh-cn/library/system.web.httpr ...

  10. HDFS Scribe Integration 【转】

    It is finally here: you can configure the open source log-aggregator, scribe, to log data directly i ...