vue点击新建弹出一个抽屉

你可以通过使用 Vue 的组件和事件来实现点击按钮弹出一个抽屉的效果。下面是一个简单的示例代码：

首先，在你的 Vue 组件中，定义一个数据属性来控制抽屉的显示与隐藏状态：

data() {
  return {
    showDrawer: false
  };
}

接下来，创建一个按钮，并使用 `@click` 事件监听器来触发显示抽屉的方法：

<button @click="showDrawer = true">新建</button>

然后，在同一个组件中，使用 Vue 的条件渲染来根据 `showDrawer` 的值来显示或隐藏抽屉组件：

<template>
  <div>
    <!-- 按钮 -->
    <button @click="showDrawer = true">新建</button>

    <!-- 抽屉 -->
    <div v-if="showDrawer" class="drawer">
      <!-- 抽屉内容 -->
      <div class="drawer-content">
        <!-- 内容区域 -->
        <!-- ... -->
      </div>
      
      <!-- 关闭按钮 -->
      <button @click="showDrawer = false">关闭</button>
    </div>
  </div>
</template>

最后，你可以根据你的需求自定义抽屉的样式，并在关闭按钮上绑定一个点击事件来隐藏抽屉。

这样，当你点击按钮时，抽屉将显示出来，点击关闭按钮或在抽屉外的任何地方时，抽屉将隐藏起来。