vue-drawer-layout实现手势滑出菜单栏

 更新时间:2020-11-19 17:00:36   作者:佚名   我要评论(0)

本文实例为大家分享了vue-drawer-layout实现手势滑出菜单栏的具体代码,供大家参考,具体内容如下

文档链接地址
安装


npm install vue-drawer-layout --save

ma

本文实例为大家分享了vue-drawer-layout实现手势滑出菜单栏的具体代码,供大家参考,具体内容如下

文档链接地址

安装

npm install vue-drawer-layout --save

main.js导入

import DrawerLayout from 'vue-drawer-layout'
Vue.use(DrawerLayout)

完整代码

<template>
 <div class="box">
 <vue-drawer-layout :drawer-width="230" ref="drawerLayout" @mask-click="closeMenu()">
  <div class="drawer" slot="drawer">
  <div>菜单栏</div>
  </div>
  <div class="content" slot="content">
  <button type="primary" @click="openMenu()">打开菜单栏</button>
  </div>
 </vue-drawer-layout>
 </div>
</template>

<script>
export default {
 data() {
 return {};
 },

 mounted() {},

 methods: {
 openMenu() {
  this.$refs.drawerLayout.toggle();
 },
 closeMenu() {
  this.$refs.drawerLayout.toggle(false);
 },
 },
};
</script>
<style lang="less" scoped>
.drawer {
 width: 100%;
 height: 100%;
 background: #fff;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • atom-design(Vue.js移动端组件库)手势组件使用教程

相关文章

  • vue-drawer-layout实现手势滑出菜单栏

    vue-drawer-layout实现手势滑出菜单栏

    本文实例为大家分享了vue-drawer-layout实现手势滑出菜单栏的具体代码,供大家参考,具体内容如下 文档链接地址 安装 npm install vue-drawer-layout --save ma
    2020-11-19
  • JavaScript实现无限轮播效果

    JavaScript实现无限轮播效果

    本文实例为大家分享了JavaScript实现无限轮播效果的具体代码,供大家参考,具体内容如下 效果展示 原理 图片说明原理 轮播顺序:1–>2–>3–>4–>5–>1的副本–>2
    2020-11-19
  • php操作redis命令及代码实例大全

    php操作redis命令及代码实例大全

    官方PHP Redis扩展文件下载 https://pecl.php.net/package/redis 选择与你PHP版本相应的文件下载后直接放到PHP目录下的ext文件夹里,然后修改php.ini配置文件如下
    2020-11-19
  • 如何用SpringBoot 进行测试

    如何用SpringBoot 进行测试

    普通测试 假设要测试一个工具类 StringUtil(com.rxliuli.example.springboottest.util.StringUtil) /** * 用于测试的字符串工具类 * * @author rxliuli
    2020-11-19
  • Java彻底消灭if-else的8种方案

    Java彻底消灭if-else的8种方案

    优化方案 1:提前 return,去除不必要的 else 如果 if-else 代码块包含 return 语句,可以考虑通过提前 return,把多余 else 干掉,使代码更加优雅。 优化前: if
    2020-11-19
  • 微信小程序实现分页加载效果

    微信小程序实现分页加载效果

    分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用
    2020-11-19
  • Java如何利用状态模式(state pattern)替代if else

    Java如何利用状态模式(state pattern)替代if else

    大多数开发人员现在还在使用if else的过程结构,曾看过jdon的banq大哥写的一篇文章,利用command,aop模式替代if else过程结构。当时还不太明白,这几天看了《重构》
    2020-11-19
  • JavaScript构造函数原理及实现流程解析

    JavaScript构造函数原理及实现流程解析

    在学习构造函数之前我们需要知道我们学习构造函数需要学习什么: 1.什么是构造函数 2.构造函数用来做什么 3.构造函数的执行过程 4.构造函数的返回值 1.所以首先我们
    2020-11-19
  • Docker重命名镜像名称和TAG操作

    Docker重命名镜像名称和TAG操作

    使用docker images时,可能会出现REPOSITORY和TAG均为none的镜像,如下图 这时,我们可以重命名镜像 # docker tag IMAGEID(镜像id) REPOSITORY:TAG(仓库:标签)
    2020-11-19
  • C# 设置防火墙的创建规则

    C# 设置防火墙的创建规则

      对于某些程序,我们只允许它使用某些特定端口、网络类型或者特定IP类型等信息。这时候,需要使用到防火墙里面的“高级设置”,创建某些特定的入站或者出栈规则,
    2020-11-19

最新评论