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


Posted in Vue.js onNovember 19, 2020

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

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>

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

Vue.js 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 #Vue.js
深入了解Vue3模板编译原理
Nov 19 #Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 #Vue.js
vue 插槽简介及使用示例
Nov 19 #Vue.js
详解Vue的mixin策略
Nov 19 #Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 #Vue.js
You might like
坏狼php学习 计数器实例代码
2008/06/15 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php中的登陆login实例代码
2016/06/20 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
TensorFlow实现模型评估
2018/09/07 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
shell程序中如何注释
2012/02/17 面试题
材料员岗位职责
2014/03/13 职场文书
百日安全活动总结
2014/05/04 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2016高考寄语集锦
2015/12/04 职场文书
八年级物理教学反思
2016/02/19 职场文书
经销商会议开幕词
2016/03/04 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
python实现高效的遗传算法
2021/04/07 Python