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 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
初识PHP
2014/09/28 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
YII框架http缓存操作示例
2019/04/29 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
javascript的函数
2007/01/31 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python常规方法实现数组的全排列
2015/03/17 Python
Python当中的array数组对象实例详解
2019/06/12 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
函授教育个人学习的自我评价
2013/12/31 职场文书
班组建设经验交流材料
2014/05/12 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
导游词之西递宏村
2019/12/10 职场文书