vue-drawer-layout實現手勢滑出選單欄
阿新 • • 發佈:2020-11-22
本文例項為大家分享了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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。