vue如何做一个抽屉效果，实现点击鼠标关闭抽屉

vue如何做一个抽屉效果，实现点击鼠标关闭抽屉？下面web建站小编给大家简单介绍一下具体实现代码！

示列代码如下：

<template>
  <div>
    <!-- 抽屉内容 -->
    <div class="drawer-box" v-show="visible">
      <!-- 抽屉组件内容 -->
    </div>
    <!-- 遮罩层 -->
    <div class="drawer-mask" v-show="visible" @click="close"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: true //默认开启抽屉
    };
  },
  methods: {
    close() {
      this.visible = false; // 关闭抽屉
    }
  }
};
</script>