本文实例为大家分享了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-drawer-layout实现手势滑出菜单栏的全部内容,更多相关vue-drawer-layout实现手势滑出菜单栏内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复