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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24