专栏首页前端开发随笔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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • animate.css+wow.js实现网页动画

    wePanda
  • Vue里v-for循环双层数组

    wePanda
  • vuedraggable实现列表拖动排序

    wePanda
  • Unity 水、流体、波纹基础系列(一)——纹理变形(Texture Distortion )

    如果液体不动时,在视觉上是无法与固体区分开的。你看的到底是水,果冻还是玻璃杯呢?水池是结冰的吗?但可以肯定的是,如果干扰它并观察它是否会变形,以及变形多少就可以...

    放牛的星星
  • 深度学习之后会是啥?

    我们被困住了,或者说至少我们已经停滞不前了。有谁还记得上一次一年没有在算法、芯片或数据处理方面取得重大显著进展是什么时候?几周前去参加Strata San Jo...

    大数据文摘
  • 进度组件ProgressIndicator

    在前面的文章中我们介绍了很多Flutter中的Widget,但是确实还有很多Widget没有介绍到,当然我们会在以后用的时候来做说明的,今天我们就来介绍下Flu...

    flyou
  • 响铃:运营商搭上BAT,这事不只是“握手言和”那么简单

    想看运营商热闹的人终究开始失望,运营商回过头拥抱互联网公司开始过得滋润起来,尤其最近两年如火如荼的实体流量卡的推出,让运营商与互联网进入了蜜月期。

    曾响铃
  • HTML特殊字符

    小小许
  • 如何将豆瓣观影记录实时同步至博客中

    友情提示:此篇文章大约需要阅读 27分钟32秒,不足之处请多指教,感谢你的阅读。? 订阅本站

    Debug客栈
  • Dota 2被攻陷!OpenAI 人工智能5V5模式击败人类玩家(4000分水平)

    我们团队构建的模型,OpenAI Five,已经击败业余 Dota2 团队了。虽然如今是在有限制的情况下,但我们计划到 8 月份在有限英雄池下击败 TI 赛中的...

    机器之心

扫码关注云+社区

领取腾讯云代金券