我是靠谱客的博主 畅快小土豆,这篇文章主要介绍vue-drawer-layout实现手势滑出菜单栏,现在分享给大家,希望可以做个参考。

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

文档链接地址

安装

复制代码
1
npm install vue-drawer-layout --save

main.js导入

复制代码
1
2
import DrawerLayout from 'vue-drawer-layout' Vue.use(DrawerLayout)

完整代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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-drawer-layout实现手势滑出菜单栏的全部内容,更多相关vue-drawer-layout实现手势滑出菜单栏内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(131)

评论列表共有 0 条评论

立即
投稿
返回
顶部