uniapp uni-drawer 使用方法

uni-drawer是一个uni-app的抽屉组件，可以用于实现侧边栏、底部弹出框等效果。使用方法如下：

1.在需要使用uni-drawer的页面中引入组件：

<template>
  <view>
    <uni-drawer ref="drawer" :show="showDrawer" :mask="mask" :mode="mode" :width="width" @close="closeDrawer">
      <!-- drawer内容 -->
    </uni-drawer>
  </view>
</template>

<script>
  import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
  export default {
    components: {
      uniDrawer
    },
    data() {
      return {
        showDrawer: false, // 是否显示drawer
        mask: true, // 是否显示遮罩层
        mode: 'left', // drawer打开的方向，可选值为left、right、top、bottom
        width: '80vw' // drawer的宽度
      }
    },
    methods: {
      openDrawer() {
        this.showDrawer = true
      },
      closeDrawer() {
        this.showDrawer = false
      }
    }
  }
</script>

2.在需要打开drawer的地方调用openDrawer方法：

<template>
  <view>
    <button @click="openDrawer">打开drawer</button>
  </view>
</template>

<script>
  export default {
    methods: {
      openDrawer() {
        this.$refs.drawer.openDrawer()
      }
    }
  }
</script>

3.在需要关闭drawer的地方调用closeDrawer方法：

<template>
  <view>
    <button @click="closeDrawer">关闭drawer</button>
  </view>
</template>

<script>
  export default {
    methods: {
      closeDrawer() {
        this.$refs.drawer.closeDrawer()
      }
    }
  }
</script>