vue完成侧边滑出菜单栏的方法是什么？

发布时间：2022-11-17 11:14:02 所属栏目：编程来源：

导读：　　文档链接地址
　　
　　安装
　　
　　npm install vue-drawer-layout --save
　　main.js导入
　　
　　import DrawerLayout from 'vue-drawer-layout'
　　Vue.use(DrawerLayout)
　　完整代

　　文档链接地址
　　
　　安装
　　
　　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>

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

什么是生成树生成树	Python __repr__ 方法
C++ static静态成员变	C++继承时的名字遮蔽问

vue完成侧边滑出菜单栏的 方法是什么？

vue完成侧边滑出菜单栏的方法是什么？